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>'
        },
...               

以上。

 

原文链接：https://www.cnblogs.com/foxcharon/p/9551012.html

参考链接：https://knifez.gitee.io/articles/kz.layedit/