项目中有用到富文本上传视频功能,奈何我用的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: ' <video src="' +res.data.src + '" alt="' + res.data.title + '" class="layedit-video" controls="controls" ></video> <br>'
},range)
}else{
layer.msg(res.msg || "上传失败")
}
}
});
});
}
...
//全部工具
tools={
...
,image: '<i class="layui-icon layedit-tool-image" title="图片" layedit-event="image"><input type="file" name="file"></i>'
,video: '<i class="layui-icon layedit-tool-image" title="视频" layedit-event="video"><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-img
textArea.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功能简单,源码也挺好理解的,所以自己改起来也挺方便的。