layui 魔改：富文本编辑器添加上传视频功能

甲方又整新需求了：富文本编辑器须要能够传视频。

layui自己的富文本编辑器没有传视频的功能，因此，又到了我们魔改的时候了。

友情提醒，富文本编辑器 layedit 只有layui的V1版有，V2版没了，也是很神秘。

由于上次我们加了上传加了进度条，因此这回的上传也是有进度条的，只不过在富文本编辑区的外面。

 

上代码。

须要用编辑器的某个HTML的JS域：

var layeditIndex = layedit.build('intro', {
    height: 600,
    uploadImage: {
        url: 'xxx'
    },
    uploadVideo: { url: 'xxx',
        exts: 'mp4',
        xhr:xhrOnProgress,
        progress:function(value){//上传进度回调 value进度值
            element.progress('demo', value+'%')//设置页面进度条
            console.log(value)
        },
        before: function(obj){
            element.progress('demo', '0%')
            $("#uploadLoadingDiv").show() } }
});

var xhrOnProgress=function(fun) {
    console.log("xhrOnProgress")
    xhrOnProgress.onprogress = fun; //绑定监听
    //使用闭包实现监听绑
    return function() {
        //经过$.ajaxSettings.xhr();得到XMLHttpRequest对象
        var xhr = $.ajaxSettings.xhr();
        //判断监听函数是否为函数
        if (typeof xhrOnProgress.onprogress !== 'function')
            return xhr;
        //若是有监听函数而且xhr对象支持绑定时就把监听函数绑定上去
        if (xhrOnProgress.onprogress && xhr.upload) {
            xhr.upload.onprogress = xhrOnProgress.onprogress;
        }
        return xhr;
    }
}

layedit.js:

...
      var e = layui.$,
        i = layui.layer,
        a = layui.form,
        l = (layui.hint(), layui.device()),
        n = "layedit",
        o = "layui-show",
        r = "layui-disabled",
        c = function() {
            var t = this;
            t.index = 0, t.config = {
                tool: ["strong", "italic", "underline", "del", "|", "left", "center", "right", "|", "link", "unlink", "face", "image", "video"],
                hideTool: [],
                height: 280
            }
        };
...
image:function(){...}
                    video: function(a) {
                        var n = this;
                        layui.use("upload", function(o) {
                            var r = l.uploadVideo || {};                            
                            o.render({
                                url: r.url,
                                method: r.type,
                                exts:r.exts,
                                elem: e(n).find("input")[0],
                                xhr:r.xhr,
                                progress:r.progress,
                                before:r.before,
                                done: function(e) {                                    
                                    0 == e.code ? (e.data = e.data || {}, v.call(t, "video", {
                                        src: e.data.src,
                                        alt: e.data.title,
                                        controls:"controls"
                                    }, a)) : i.msg(e.msg || "上传失败") } }) }) }, 
code:function(){...}
...
        C = {
            html: '<i class="layui-icon layedit-tool-html" title="HTML源代码" lay-command="html" layedit-event="html"">&#xe64b;</i><span class="layedit-tool-mid"></span>',
            strong: '<i class="layui-icon layedit-tool-b" title="加粗" lay-command="Bold" layedit-event="b"">&#xe62b;</i>',
            italic: '<i class="layui-icon layedit-tool-i" title="斜体" lay-command="italic" layedit-event="i"">&#xe644;</i>',
            underline: '<i class="layui-icon layedit-tool-u" title="下划线" lay-command="underline" layedit-event="u"">&#xe646;</i>',
            del: '<i class="layui-icon layedit-tool-d" title="删除线" lay-command="strikeThrough" layedit-event="d"">&#xe64f;</i>',
            "|": '<span class="layedit-tool-mid"></span>',
            left: '<i class="layui-icon layedit-tool-left" title="左对齐" lay-command="justifyLeft" layedit-event="left"">&#xe649;</i>',
            center: '<i class="layui-icon layedit-tool-center" title="居中对齐" lay-command="justifyCenter" layedit-event="center"">&#xe647;</i>',
            right: '<i class="layui-icon layedit-tool-right" title="右对齐" lay-command="justifyRight" layedit-event="right"">&#xe648;</i>',
            link: '<i class="layui-icon layedit-tool-link" title="插入连接" layedit-event="link"">&#xe64c;</i>',
            unlink: '<i class="layui-icon layedit-tool-unlink layui-disabled" title="清除连接" lay-command="unlink" layedit-event="unlink"">&#xe64d;</i>',
            face: '<i class="layui-icon layedit-tool-face" title="表情" layedit-event="face"">&#xe650;</i>',
            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 lt-video" title="视频" layedit-event="video">&#xe6ed;<input type="file" name="file"></i>',
            code: '<i class="layui-icon layedit-tool-code" title="插入代码" layedit-event="code">&#xe64e;</i>',
            help: '<i class="layui-icon layedit-tool-help" title="帮助" layedit-event="help">&#xe607;</i>'
        },
...               

以上。