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

以上。