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信息就好了,如图:
(如果上传后前端视频没有回显,基本上是后端返回格式或视频路径的问题)
layui富文本编辑器layedit添加视频上传功能
实现效果:
layui富文本编辑器layedit添加视频上传功能

分隔线----------------------------------------------------
问题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功能简单,源码也挺好理解的,所以自己改起来也挺方便的。

上一篇:【小5聊】layui第三方插件-xm-select参数


下一篇:java SSM Layui学生宿舍管理系统源码