admin 管理员组

文章数量: 1087677

layui富文本编辑器layedit添加视频上传功能

项目中有用到富文本上传视频功能，奈何我用的layedit，没有这个功能，就参考着上传图片的代码改了一下。
直接修改的layedit.js源码，本质上和图片上传功能一样。

//图片
,image: function(range){...}
//视频
,video:function(range) {*
var that = this;
layui.use("upload", function(upload) {var uploadVideo = set.uploadVideo || {};                            upload.render({url: uploadVideo.url,method: uploadVideo.type,accept:'video',data: uploadVideo.data,elem: $(that).find("input")[0],done: function(res) {if(res.code == 0){res.data = res.data || {};insertInline.call(iframeWin,'p',{text: '&nbsp;<video src="' +res.data.src + '" alt="' + res.data.title + '" class="layedit-video" controls="controls" ></video>&nbsp;<br>'},range)}else{layer.msg(res.msg || "上传失败")}}});});
}
...
//全部工具
tools={
...
,image: '<i class="layui-icon layedit-tool-image" title="图片" layedit-event="image">&#xe64a;<input type="file" name="file"></i>'
,video: '<i class="layui-icon layedit-tool-image" title="视频" layedit-event="video">&#xe6ed;<input type="file" name="file"></i>'
}

前端HTML代码：

<textarea id="textarea_edit1" name="name" placeholder="" lay-verify="content" class="layui-textarea"></textarea>

前端JS代码（layedit.set一定要放在 build 前面）：

layui.layedit.set({uploadVideo: {url: url//接口url,data:data//接口传递的参数（非必须，看接口要求）,type: '' //默认post},
});

前端的代码写完了，只需要后端返回指定格式的JSON信息就好了，如图：
（如果上传后前端视频没有回显，基本上是后端返回格式或视频路径的问题）

实现效果：

分隔线----------------------------------------------------
问题1：clone后之前编辑器里的图片\视频\其他内容不见了：
原因：layedit在表单提交前有一部分内容没有同步到textarea里
解决：修改layedit.js
/1.添加textArea参数，添加setTimeout()方法/

//触发工具
,toolActive = function(iframeWin, editor, textArea,set){...//触发内容区域body.on('click', function(){toolCheck.call(iframeWin, tools);layer.close(face.index);setTimeout(function(){filter.call(iframeWin, body);textArea.value = body.html();}, 100);});
}

/2.调用函数时把textArea也传过去/

//iframe初始化
var setIframe = function(editor, textArea, set){...toolActive.call(that, iframeWin, editor, textArea,set); //触发工具
}

问题2：处理视频样式和粘贴后的图片样式（layedit可以截图后直接粘贴图片，传到后台是base64编码）
解决：修改layedit.js
/1.iframe初始化中的style里添加样式代码/

,style = $(['<style>'...// 图片\视频,'.layedit-img{height:92px;width:92px}','.layedit-video{height:230px;width:200px}','</style>'].join(''))

/2.粘贴后的图片和layedit自带的表情需要加个类名来区分/

//处理粘贴
body.on('paste', function(e){iframeDOM.execCommand('formatBlock', false, '<p>');setTimeout(function(){filter.call(iframeWin, body);body.find('img').not('.layedit-face').addClass('layedit-img');//粘贴的添加类名layedit-imgtextArea.value = body.html();}, 100); 
});
//表情
,face: function(range){face.call(this, function(img){insertInline.call(iframeWin, 'img', {src: img.src,alt: img.alt,class:'layedit-face'//加个类名以区分}, range);});
}

以上就是layedit处理图片\视频碰到的问题，layedit功能简单，源码也挺好理解的，所以自己改起来也挺方便的。

本文标签： layui富文本编辑器layedit添加视频上传功能

版权声明：本文标题：layui富文本编辑器layedit添加视频上传功能 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1699084831a327272.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。