Tinymce编辑器实现视频上传功能

1、思路：上传后把上传后的得到的地址追加到富文本。

（注：我是用的是laui，原生js同理）

效果图：

二、代码部分 <!-- 富文本内容区 --> <div class="layui-form-item security_edit_form_param_content"> <label class="layui-form-label">内容</label> <div class="layui-btn-container"> <button type="button" class="layui-btn" id="test5"><i class="layui-icon"></i>上传视频 -- (请等待下面富文本器加载完毕再上传视频)</button> </div> <div class="layui-input-block"> <textarea id="edit"></textarea> </div> </div>

                      //定义layui的用到的插件
    var $ = layui.jquery
    ,layer = parent.layer === undefined ? layui.layer : top.layer
    ,form = layui.form;
	var upload = layui.upload,element = layui.element;
            
            		//视频上传
   upload.render({
	    elem: '#test5'
	    ,url: '' //改成您自己的上传接口
	    ,accept: 'video' //视频
	    ,done: function(res){
	      layer.msg('上传成功');
	      console.log(res.data.src);//你返回的js
          //注意以下的一段html里面需要替换两个地方，替换为你后台返回的视频url
	      var vhtml = '<p><span class="mce-preview-object mce-object-video" contenteditable="false" data-mce-object="video" data-mce-p-controls="controls" data-mce-html="<source src='+res.data.src+' />"><video src="'+res.data.src+'" controls="controls" width="100%" height="auto" frameborder="0"></video><span class="mce-shim"></span></span></p>';
          //追加到内容
	      content = content + vhtml;
          //赋值给内容
	      edit.setContent(content);
	    }
    });
        
    
        	//编辑器
    var content = "";
    var edit = "";
    layui.extend({
        tinymce: './tinymce/tinymce'//你的富文本组件路径
    }).use(['tinymce'], function () {
    	var t = layui.tinymce;
        t.render({
            elem: "#edit",
            height: 600,//高度自己定义
            images_upload_handler: function (blobInfo, success, failure, progress) {
                    var xhr, formData;
                    xhr = new XMLHttpRequest();
                    xhr.withCredentials = false;
                    xhr.open('POST', '');//你后台上传图片的接口，这个地方是富文本里面的图片上传，看自己需求
                    
                    //进度条
                    xhr.upload.onprogress = function(e){
                        progress(e.loaded / e.total * 100);
                    }

                    xhr.onload = function() {
                        var json;
                        if (xhr.status == 403) {
                            failure('HTTP Error: ' + xhr.status, { remove: true });
                            return;
                        }
                        if (xhr.status < 200 || xhr.status >= 300 ) {
                            failure('HTTP Error: ' + xhr.status);
                            return;
                        }
                        json = JSON.parse(xhr.responseText);
                        if (!json || typeof json.location != 'string') {
                            failure('Invalid JSON: ' + xhr.responseText);
                            return;
                        }
                        success(json.location);
                    };

                    xhr.onerror = function () {
                        failure('Image upload failed due to a XHR Transport error. Code: ' + xhr.status);
                    }

                    formData = new FormData();
                    formData.append('file', blobInfo.blob(), blobInfo.filename());
                    
                    xhr.send(formData);
                }
        },(opt, d)=>{
            // 加载完成后回调 opt 是传入的所有参数
            // edit是当前编辑器实例，等同于t.get返回值
        	edit = d;
        	d.setContent(content);
        	
        });
        //edit = t.get('#edit');
    })