甲方又整新需求了:富文本编辑器须要能够传视频。html
layui自己的富文本编辑器没有传视频的功能,因此,又到了我们魔改的时候了。ajax
友情提醒,富文本编辑器 layedit 只有layui的V1版有,V2版没了,也是很神秘。闭包
由于上次我们加了上传加了进度条,因此这回的上传也是有进度条的,只不过在富文本编辑区的外面。编辑器
上代码。ide
须要用编辑器的某个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:ui
... 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""></i><span class="layedit-tool-mid"></span>', strong: '<i class="layui-icon layedit-tool-b" title="加粗" lay-command="Bold" layedit-event="b""></i>', italic: '<i class="layui-icon layedit-tool-i" title="斜体" lay-command="italic" layedit-event="i""></i>', underline: '<i class="layui-icon layedit-tool-u" title="下划线" lay-command="underline" layedit-event="u""></i>', del: '<i class="layui-icon layedit-tool-d" title="删除线" lay-command="strikeThrough" layedit-event="d""></i>', "|": '<span class="layedit-tool-mid"></span>', left: '<i class="layui-icon layedit-tool-left" title="左对齐" lay-command="justifyLeft" layedit-event="left""></i>', center: '<i class="layui-icon layedit-tool-center" title="居中对齐" lay-command="justifyCenter" layedit-event="center""></i>', right: '<i class="layui-icon layedit-tool-right" title="右对齐" lay-command="justifyRight" layedit-event="right""></i>', link: '<i class="layui-icon layedit-tool-link" title="插入连接" layedit-event="link""></i>', unlink: '<i class="layui-icon layedit-tool-unlink layui-disabled" title="清除连接" lay-command="unlink" layedit-event="unlink""></i>', face: '<i class="layui-icon layedit-tool-face" title="表情" layedit-event="face""></i>', image: '<i class="layui-icon layedit-tool-image" title="图片" layedit-event="image"><input type="file" name="file"></i>', video: '<i class="layui-icon layedit-tool-image lt-video" title="视频" layedit-event="video"><input type="file" name="file"></i>', code: '<i class="layui-icon layedit-tool-code" title="插入代码" layedit-event="code"></i>', help: '<i class="layui-icon layedit-tool-help" title="帮助" layedit-event="help"></i>' }, ...
以上。this