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

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

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

效果图：

2、具体代码：

div代码部分

                    <!-- 富文本内容区 -->
                    <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>

js部分

        //定义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);
		    }
	    });

 tinymce编辑器部分代码

    	//编辑器
        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');
        })