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

以上。