diff --git a/public/static/ueditorPlus/dialogs/video/video.js b/public/static/ueditorPlus/dialogs/video/video.js index 50ce748..c30cdea 100644 --- a/public/static/ueditorPlus/dialogs/video/video.js +++ b/public/static/ueditorPlus/dialogs/video/video.js @@ -8,837 +8,836 @@ (function () { - var video = {}, - uploadVideoList = [], - isModifyUploadVideo = false, - uploadFile; - var editorOpt = {}; - - window.onload = function () { - editorOpt = editor.getOpt('videoConfig'); - $focus($G("videoUrl")); - initTabs(); - initVideo(); - initUpload(); - }; - - /* 初始化tab标签 */ - function initTabs() { - var tabs = $G('tabHeads').children; - for (var i = 0; i < tabs.length; i++) { - domUtils.on(tabs[i], "click", function (e) { - var j, bodyId, target = e.target || e.srcElement; - for (j = 0; j < tabs.length; j++) { - bodyId = tabs[j].getAttribute('data-content-id'); - if (tabs[j] == target) { - domUtils.addClass(tabs[j], 'focus'); - domUtils.addClass($G(bodyId), 'focus'); - } else { - domUtils.removeClasses(tabs[j], 'focus'); - domUtils.removeClasses($G(bodyId), 'focus'); - } - } - }); - } - if (!editorOpt.disableUpload) { - $G('tabHeads').querySelector('[data-content-id="upload"]').style.display = 'inline-block'; - } - if (!!editorOpt.selectCallback) { - $G('videoSelect').style.display = 'inline-block'; - domUtils.on($G('videoSelect'), "click", function (e) { - editorOpt.selectCallback(editor, function (info) { - if (info) { - $G('videoUrl').value = info.path; - createPreviewVideo(info.path); - } - }); - }); + var video = {}, + uploadVideoList = [], + isModifyUploadVideo = false, + uploadFile; + var editorOpt = {}; + + window.onload = function () { + editorOpt = editor.getOpt('videoConfig'); + $focus($G("videoUrl")); + initTabs(); + initVideo(); + initUpload(); + }; + + /* 初始化tab标签 */ + function initTabs () { + var tabs = $G('tabHeads').children; + for (var i = 0; i < tabs.length; i++) { + domUtils.on(tabs[i], "click", function (e) { + var j, bodyId, target = e.target || e.srcElement; + for (j = 0; j < tabs.length; j++) { + bodyId = tabs[j].getAttribute('data-content-id'); + if (tabs[j] == target) { + domUtils.addClass(tabs[j], 'focus'); + domUtils.addClass($G(bodyId), 'focus'); + } else { + domUtils.removeClasses(tabs[j], 'focus'); + domUtils.removeClasses($G(bodyId), 'focus'); + } } + }); } - - function initVideo() { - createAlignButton(["videoFloat", "upload_alignment"]); - addUrlChangeListener($G("videoUrl")); - addOkListener(); - - //编辑视频时初始化相关信息 - (function () { - var img = editor.selection.getRange().getClosedNode(), url; - if (img && img.className) { - var hasFakedClass = (img.className == "edui-faked-video"), - hasUploadClass = img.className.indexOf("edui-upload-video") != -1; - if (hasFakedClass || hasUploadClass) { - $G("videoUrl").value = url = img.getAttribute("_url"); - $G("videoWidth").value = img.width; - $G("videoHeight").value = img.height; - var align = domUtils.getComputedStyle(img, "float"), - parentAlign = domUtils.getComputedStyle(img.parentNode, "text-align"); - updateAlignButton(parentAlign === "center" ? "center" : align); - } - if (hasUploadClass) { - isModifyUploadVideo = true; - } - } - createPreviewVideo(url); - })(); + if (!editorOpt.disableUpload) { + $G('tabHeads').querySelector('[data-content-id="upload"]').style.display = 'inline-block'; } - - /** - * 监听确认和取消两个按钮事件,用户执行插入或者清空正在播放的视频实例操作 - */ - function addOkListener() { - dialog.onok = function () { - $G("preview").innerHTML = ""; - var currentTab = findFocus("tabHeads", "tabSrc"); - switch (currentTab) { - case "video": - return insertSingle(); - break; - case "videoSearch": - return insertSearch("searchList"); - break; - case "upload": - return insertUpload(); - break; - } - }; - dialog.oncancel = function () { - $G("preview").innerHTML = ""; - }; + if (!!editorOpt.selectCallback) { + $G('videoSelect').style.display = 'inline-block'; + domUtils.on($G('videoSelect'), "click", function (e) { + editorOpt.selectCallback(editor, function (info) { + if (info) { + $G('videoUrl').value = info.path; + createPreviewVideo(info.path); + } + }); + }); } - - /** - * 依据传入的align值更新按钮信息 - * @param align - */ - function updateAlignButton(align) { - var aligns = $G("videoFloat").children; - for (var i = 0, ci; ci = aligns[i++];) { - if (ci.getAttribute("name") == align) { - if (ci.className != "focus") { - ci.className = "focus"; - } - } else { - if (ci.className == "focus") { - ci.className = ""; - } - } + } + + function initVideo () { + createAlignButton(["videoFloat", "upload_alignment"]); + addUrlChangeListener($G("videoUrl")); + addOkListener(); + + //编辑视频时初始化相关信息 + (function () { + var img = editor.selection.getRange().getClosedNode(), url; + if (img && img.className) { + var hasFakedClass = (img.className == "edui-faked-video"), + hasUploadClass = img.className.indexOf("edui-upload-video") != -1; + if (hasFakedClass || hasUploadClass) { + $G("videoUrl").value = url = img.getAttribute("_url"); + $G("videoWidth").value = img.width; + $G("videoHeight").value = img.height; + var align = domUtils.getComputedStyle(img, "float"), + parentAlign = domUtils.getComputedStyle(img.parentNode, "text-align"); + updateAlignButton(parentAlign === "center" ? "center" : align); } - } - - /** - * 将单个视频信息插入编辑器中 - */ - function insertSingle() { - var width = $G("videoWidth"), - height = $G("videoHeight"), - url = $G('videoUrl').value, - align = findFocus("videoFloat", "name"); - if (!url) return false; - if (!checkNum([width, height])) return false; - editor.execCommand('insertvideo', { - url: convert_url(url), - width: width.value, - height: height.value, - align: align - }, isModifyUploadVideo ? 'upload' : null); - } - - /** - * 将元素id下的所有代表视频的图片插入编辑器中 - * @param id - */ - function insertSearch(id) { - var imgs = domUtils.getElementsByTagName($G(id), "img"), - videoObjs = []; - for (var i = 0, img; img = imgs[i++];) { - if (img.getAttribute("selected")) { - videoObjs.push({ - url: img.getAttribute("ue_video_url"), - width: 420, - height: 280, - align: "none" - }); - } + if (hasUploadClass) { + isModifyUploadVideo = true; } - editor.execCommand('insertvideo', videoObjs); - } - - /** - * 找到id下具有focus类的节点并返回该节点下的某个属性 - * @param id - * @param returnProperty - */ - function findFocus(id, returnProperty) { - var tabs = $G(id).children, - property; - for (var i = 0, ci; ci = tabs[i++];) { - if (ci.className == "focus") { - property = ci.getAttribute(returnProperty); - break; - } + } + createPreviewVideo(url); + })(); + } + + /** + * 监听确认和取消两个按钮事件,用户执行插入或者清空正在播放的视频实例操作 + */ + function addOkListener () { + dialog.onok = function () { + $G("preview").innerHTML = ""; + var currentTab = findFocus("tabHeads", "tabSrc"); + switch (currentTab) { + case "video": + return insertSingle(); + break; + case "videoSearch": + return insertSearch("searchList"); + break; + case "upload": + return insertUpload(); + break; + } + }; + dialog.oncancel = function () { + $G("preview").innerHTML = ""; + }; + } + + /** + * 依据传入的align值更新按钮信息 + * @param align + */ + function updateAlignButton (align) { + var aligns = $G("videoFloat").children; + for (var i = 0, ci; ci = aligns[i++];) { + if (ci.getAttribute("name") == align) { + if (ci.className != "focus") { + ci.className = "focus"; } - return property; - } - - function convert_url(url) { - if (!url) return ''; - url = utils.trim(url) - .replace(/v\.youku\.com\/v_show\/id_([\w\-=]+)\.html/i, 'player.youku.com/embed/$1') - // .replace(/(www\.)?youtube\.com\/watch\?v=([\w\-]+)/i, "www.youtube.com/v/$2") - // .replace(/youtu.be\/(\w+)$/i, "www.youtube.com/v/$1") - //.replace(/www\.iqiyi\.com\/v_(\w+)\.html/i, "www.youtube.com/v/$1") - // .replace(/v\.ku6\.com\/.+\/([\w\.]+)\.html.*$/i, "player.ku6.com/refer/$1/v.swf") - // .replace(/www\.56\.com\/u\d+\/v_([\w\-]+)\.html/i, "player.56.com/v_$1.swf") - // .replace(/www.56.com\/w\d+\/play_album\-aid\-\d+_vid\-([^.]+)\.html/i, "player.56.com/v_$1.swf") - // .replace(/v\.pps\.tv\/play_([\w]+)\.html.*$/i, "player.pps.tv/player/sid/$1/v.swf") - // .replace(/www\.letv\.com\/ptv\/vplay\/([\d]+)\.html.*$/i, "i7.imgs.letv.com/player/swfPlayer.swf?id=$1&autoplay=0") - // .replace(/www\.tudou\.com\/programs\/view\/([\w\-]+)\/?/i, "www.tudou.com/v/$1") - // https://v.qq.com/x/cover/wagzbx91asjomnu/w05337nxfof.html - // https://v.qq.com/iframe/player.html?vid=w05337nxfof&tiny=0&auto=0 - .replace(/v\.qq\.com\/x\/cover\/[\w]+\/([\w]+)\.html/i, "v.qq.com/iframe/player.html?vid=$1&tiny=0&auto=0") - .replace(/v\.qq\.com\/x\/page\/([\w]+)\.html/i, "v.qq.com/iframe/player.html?vid=$1&tiny=0&auto=0") - .replace(/www\.bilibili\.com\/video\/([a-zA-Z0-9]+)\/?.*$/i, "player.bilibili.com/player.html?bvid=$1") - // .replace(/v\.qq\.com\/cover\/[\w]+\/[\w]+\/([\w]+)\.html/i, "static.video.qq.com/TPout.swf?vid=$1") - // .replace(/v\.qq\.com\/.+[\?\&]vid=([^&]+).*$/i, "static.video.qq.com/TPout.swf?vid=$1") - // .replace(/my\.tv\.sohu\.com\/[\w]+\/[\d]+\/([\d]+)\.shtml.*$/i, "share.vrs.sohu.com/my/v.swf&id=$1") - ; - return url; - } - - /** - * 检测传入的所有input框中输入的长宽是否是正数 - * @param nodes input框集合, - */ - function checkNum(nodes) { - for (var i = 0, ci; ci = nodes[i++];) { - var value = ci.value; - if (!isNumber(value) && value) { - alert(lang.numError); - ci.value = ""; - ci.focus(); - return false; - } + } else { + if (ci.className == "focus") { + ci.className = ""; } - return true; + } } - - /** - * 数字判断 - * @param value - */ - function isNumber(value) { - return /(0|^[1-9]\d*$)/.test(value); + } + + /** + * 将单个视频信息插入编辑器中 + */ + function insertSingle () { + var width = $G("videoWidth"), + height = $G("videoHeight"), + url = $G('videoUrl').value, + align = findFocus("videoFloat", "name"); + if (!url) return false; + if (!checkNum([width, height])) return false; + editor.execCommand('insertvideo', { + url: convert_url(url), + width: width.value, + height: height.value, + align: align + }, isModifyUploadVideo ? 'upload' : null); + } + + /** + * 将元素id下的所有代表视频的图片插入编辑器中 + * @param id + */ + function insertSearch (id) { + var imgs = domUtils.getElementsByTagName($G(id), "img"), + videoObjs = []; + for (var i = 0, img; img = imgs[i++];) { + if (img.getAttribute("selected")) { + videoObjs.push({ + url: img.getAttribute("ue_video_url"), + width: 420, + height: 280, + align: "none" + }); + } } - - /** - * 创建图片浮动选择按钮 - * @param ids - */ - function createAlignButton(ids) { - for (var i = 0, ci; ci = ids[i++];) { - var floatContainer = $G(ci), - nameMaps = { - "none": lang['default'], - "left": lang.floatLeft, - "right": lang.floatRight, - "center": lang.block - }; - for (var j in nameMaps) { - var div = document.createElement("div"); - div.setAttribute("name", j); - if (j == "none") div.className = "focus"; - div.style.cssText = "background:url(images/" + j + "_focus.jpg);"; - div.setAttribute("title", nameMaps[j]); - floatContainer.appendChild(div); - } - switchSelect(ci); - } + editor.execCommand('insertvideo', videoObjs); + } + + /** + * 找到id下具有focus类的节点并返回该节点下的某个属性 + * @param id + * @param returnProperty + */ + function findFocus (id, returnProperty) { + var tabs = $G(id).children, + property; + for (var i = 0, ci; ci = tabs[i++];) { + if (ci.className == "focus") { + property = ci.getAttribute(returnProperty); + break; + } } - - /** - * 选择切换 - * @param selectParentId - */ - function switchSelect(selectParentId) { - var selects = $G(selectParentId).children; - for (var i = 0, ci; ci = selects[i++];) { - domUtils.on(ci, "click", function () { - for (var j = 0, cj; cj = selects[j++];) { - cj.className = ""; - cj.removeAttribute && cj.removeAttribute("class"); - } - this.className = "focus"; - }) - } + return property; + } + + function convert_url (url) { + if (!url) return ''; + url = utils.trim(url) + .replace(/v\.youku\.com\/v_show\/id_([\w\-=]+)\.html/i, 'player.youku.com/embed/$1') + // .replace(/(www\.)?youtube\.com\/watch\?v=([\w\-]+)/i, "www.youtube.com/v/$2") + // .replace(/youtu.be\/(\w+)$/i, "www.youtube.com/v/$1") + //.replace(/www\.iqiyi\.com\/v_(\w+)\.html/i, "www.youtube.com/v/$1") + // .replace(/v\.ku6\.com\/.+\/([\w\.]+)\.html.*$/i, "player.ku6.com/refer/$1/v.swf") + // .replace(/www\.56\.com\/u\d+\/v_([\w\-]+)\.html/i, "player.56.com/v_$1.swf") + // .replace(/www.56.com\/w\d+\/play_album\-aid\-\d+_vid\-([^.]+)\.html/i, "player.56.com/v_$1.swf") + // .replace(/v\.pps\.tv\/play_([\w]+)\.html.*$/i, "player.pps.tv/player/sid/$1/v.swf") + // .replace(/www\.letv\.com\/ptv\/vplay\/([\d]+)\.html.*$/i, "i7.imgs.letv.com/player/swfPlayer.swf?id=$1&autoplay=0") + // .replace(/www\.tudou\.com\/programs\/view\/([\w\-]+)\/?/i, "www.tudou.com/v/$1") + // https://v.qq.com/x/cover/wagzbx91asjomnu/w05337nxfof.html + // https://v.qq.com/iframe/player.html?vid=w05337nxfof&tiny=0&auto=0 + .replace(/v\.qq\.com\/x\/cover\/[\w]+\/([\w]+)\.html/i, "v.qq.com/iframe/player.html?vid=$1&tiny=0&auto=0") + .replace(/v\.qq\.com\/x\/page\/([\w]+)\.html/i, "v.qq.com/iframe/player.html?vid=$1&tiny=0&auto=0") + .replace(/www\.bilibili\.com\/video\/([a-zA-Z0-9]+)\/?.*$/i, "player.bilibili.com/player.html?bvid=$1") + // .replace(/v\.qq\.com\/cover\/[\w]+\/[\w]+\/([\w]+)\.html/i, "static.video.qq.com/TPout.swf?vid=$1") + // .replace(/v\.qq\.com\/.+[\?\&]vid=([^&]+).*$/i, "static.video.qq.com/TPout.swf?vid=$1") + // .replace(/my\.tv\.sohu\.com\/[\w]+\/[\d]+\/([\d]+)\.shtml.*$/i, "share.vrs.sohu.com/my/v.swf&id=$1") + ; + return url; + } + + /** + * 检测传入的所有input框中输入的长宽是否是正数 + * @param nodes input框集合, + */ + function checkNum (nodes) { + for (var i = 0, ci; ci = nodes[i++];) { + var value = ci.value; + if (!isNumber(value) && value) { + alert(lang.numError); + ci.value = ""; + ci.focus(); + return false; + } } - - /** - * 监听url改变事件 - * @param url - */ - function addUrlChangeListener(url) { - if (browser.ie) { - url.onpropertychange = function () { - createPreviewVideo(this.value); - } - } else { - url.addEventListener("input", function () { - createPreviewVideo(this.value); - }, false); - } - } - - /** - * 根据url生成视频预览 - * @param url - */ - function createPreviewVideo(url) { - if (!url) return; - - var conUrl = convert_url(url); - - conUrl = utils.unhtml(conUrl); - - // $G("preview").innerHTML = '
'+lang.urlError+'
'+ - // '' + - // ''; - - $G("preview").innerHTML = '
' + lang.urlError + '
' + - ''; + return true; + } + + /** + * 数字判断 + * @param value + */ + function isNumber (value) { + return /(0|^[1-9]\d*$)/.test(value); + } + + /** + * 创建图片浮动选择按钮 + * @param ids + */ + function createAlignButton (ids) { + for (var i = 0, ci; ci = ids[i++];) { + var floatContainer = $G(ci), + nameMaps = { + "none": lang['default'], + "left": lang.floatLeft, + "right": lang.floatRight, + "center": lang.block + }; + for (var j in nameMaps) { + var div = document.createElement("div"); + div.setAttribute("name", j); + if (j == "none") div.className = "focus"; + div.style.cssText = "background:url(images/" + j + "_focus.jpg);"; + div.setAttribute("title", nameMaps[j]); + floatContainer.appendChild(div); + } + switchSelect(ci); } - - - /* 插入上传视频 */ - function insertUpload() { - var videoObjs = [], - uploadDir = editor.getOpt('videoUrlPrefix'), - width = $G('upload_width').value || 420, - height = $G('upload_height').value || 280, - align = findFocus("upload_alignment", "name") || 'none'; - for (var key in uploadVideoList) { - var file = uploadVideoList[key]; - videoObjs.push({ - url: uploadDir + file.url, - width: width, - height: height, - align: align - }); - } - - var count = uploadFile.getQueueCount(); - if (count) { - $('.info', '#queueList').html('' + '还有2个未上传文件'.replace(/[\d]/, count) + ''); - return false; - } else { - editor.execCommand('insertvideo', videoObjs, 'upload'); + } + + /** + * 选择切换 + * @param selectParentId + */ + function switchSelect (selectParentId) { + var selects = $G(selectParentId).children; + for (var i = 0, ci; ci = selects[i++];) { + domUtils.on(ci, "click", function () { + for (var j = 0, cj; cj = selects[j++];) { + cj.className = ""; + cj.removeAttribute && cj.removeAttribute("class"); } + this.className = "focus"; + }) } - - /*初始化上传标签*/ - function initUpload() { - uploadFile = new UploadFile('queueList'); + } + + /** + * 监听url改变事件 + * @param url + */ + function addUrlChangeListener (url) { + if (browser.ie) { + url.onpropertychange = function () { + createPreviewVideo(this.value); + } + } else { + url.addEventListener("input", function () { + createPreviewVideo(this.value); + }, false); } - - - /* 上传附件 */ - function UploadFile(target) { - this.$wrap = target.constructor == String ? $('#' + target) : $(target); - this.init(); + } + + /** + * 根据url生成视频预览 + * @param url + */ + function createPreviewVideo (url) { + if (!url) return; + + var conUrl = convert_url(url); + + conUrl = utils.unhtml(conUrl); + + // $G("preview").innerHTML = '
'+lang.urlError+'
'+ + // '' + + // ''; + + $G("preview").innerHTML = '
' + lang.urlError + '
' + + ''; + } + + + /* 插入上传视频 */ + function insertUpload () { + var videoObjs = [], + width = $G('upload_width').value || 420, + height = $G('upload_height').value || 280, + align = findFocus("upload_alignment", "name") || 'none'; + for (var key in uploadVideoList) { + var file = uploadVideoList[key]; + videoObjs.push({ + url: file.url, + width: width, + height: height, + align: align + }); } - UploadFile.prototype = { - init: function () { - this.fileList = []; - this.initContainer(); - this.initUploader(); - }, - initContainer: function () { - this.$queue = this.$wrap.find('.filelist'); + var count = uploadFile.getQueueCount(); + if (count) { + $('.info', '#queueList').html('' + '还有2个未上传文件'.replace(/[\d]/, count) + ''); + return false; + } else { + editor.execCommand('insertvideo', videoObjs, 'upload'); + } + } + + /*初始化上传标签*/ + function initUpload () { + uploadFile = new UploadFile('queueList'); + } + + + /* 上传附件 */ + function UploadFile (target) { + this.$wrap = target.constructor == String ? $('#' + target) : $(target); + this.init(); + } + + UploadFile.prototype = { + init: function () { + this.fileList = []; + this.initContainer(); + this.initUploader(); + }, + initContainer: function () { + this.$queue = this.$wrap.find('.filelist'); + }, + /* 初始化容器 */ + initUploader: function () { + var _this = this, + $ = jQuery, // just in case. Make sure it's not an other libaray. + $wrap = _this.$wrap, + // 图片容器 + $queue = $wrap.find('.filelist'), + // 状态栏,包括进度和控制按钮 + $statusBar = $wrap.find('.statusBar'), + // 文件总体选择信息。 + $info = $statusBar.find('.info'), + // 上传按钮 + $upload = $wrap.find('.uploadBtn'), + // 上传按钮 + $filePickerBtn = $wrap.find('.filePickerBtn'), + // 上传按钮 + $filePickerBlock = $wrap.find('.filePickerBlock'), + // 没选择文件之前的内容。 + $placeHolder = $wrap.find('.placeholder'), + // 总体进度条 + $progress = $statusBar.find('.progress').hide(), + // 添加的文件数量 + fileCount = 0, + // 添加的文件总大小 + fileSize = 0, + // 优化retina, 在retina下这个值是2 + ratio = window.devicePixelRatio || 1, + // 缩略图大小 + thumbnailWidth = 113 * ratio, + thumbnailHeight = 113 * ratio, + // 可能有pedding, ready, uploading, confirm, done. + state = '', + // 所有文件的进度信息,key为file id + percentages = {}, + supportTransition = (function () { + var s = document.createElement('p').style, + r = 'transition' in s || + 'WebkitTransition' in s || + 'MozTransition' in s || + 'msTransition' in s || + 'OTransition' in s; + s = null; + return r; + })(), + // WebUploader实例 + uploader, + actionUrl = editor.getActionUrl(editor.getOpt('videoActionName')), + fileMaxSize = editor.getOpt('videoMaxSize'), + acceptExtensions = (editor.getOpt('videoAllowFiles') || []).join('').replace(/\./g, ',').replace(/^[,]/, ''); + ; + + if (!WebUploader.Uploader.support()) { + $('#filePickerReady').after($('
').html(lang.errorNotSupport)).hide(); + return; + } else if (!editor.getOpt('videoActionName')) { + console.log("🚀 ~ actionUrl:", actionUrl, editor, editor.getOpt('videoActionName')) + $('#filePickerReady').after($('
').html(lang.errorLoadConfig)).hide(); + return; + } + + uploader = _this.uploader = WebUploader.create({ + pick: { + id: '#filePickerReady', + label: lang.uploadSelectFile }, - /* 初始化容器 */ - initUploader: function () { - var _this = this, - $ = jQuery, // just in case. Make sure it's not an other libaray. - $wrap = _this.$wrap, - // 图片容器 - $queue = $wrap.find('.filelist'), - // 状态栏,包括进度和控制按钮 - $statusBar = $wrap.find('.statusBar'), - // 文件总体选择信息。 - $info = $statusBar.find('.info'), - // 上传按钮 - $upload = $wrap.find('.uploadBtn'), - // 上传按钮 - $filePickerBtn = $wrap.find('.filePickerBtn'), - // 上传按钮 - $filePickerBlock = $wrap.find('.filePickerBlock'), - // 没选择文件之前的内容。 - $placeHolder = $wrap.find('.placeholder'), - // 总体进度条 - $progress = $statusBar.find('.progress').hide(), - // 添加的文件数量 - fileCount = 0, - // 添加的文件总大小 - fileSize = 0, - // 优化retina, 在retina下这个值是2 - ratio = window.devicePixelRatio || 1, - // 缩略图大小 - thumbnailWidth = 113 * ratio, - thumbnailHeight = 113 * ratio, - // 可能有pedding, ready, uploading, confirm, done. - state = '', - // 所有文件的进度信息,key为file id - percentages = {}, - supportTransition = (function () { - var s = document.createElement('p').style, - r = 'transition' in s || - 'WebkitTransition' in s || - 'MozTransition' in s || - 'msTransition' in s || - 'OTransition' in s; - s = null; - return r; - })(), - // WebUploader实例 - uploader, - actionUrl = editor.getActionUrl(editor.getOpt('videoActionName')), - fileMaxSize = editor.getOpt('videoMaxSize'), - acceptExtensions = (editor.getOpt('videoAllowFiles') || []).join('').replace(/\./g, ',').replace(/^[,]/, ''); - ; - - if (!WebUploader.Uploader.support()) { - $('#filePickerReady').after($('
').html(lang.errorNotSupport)).hide(); - return; - } else if (!editor.getOpt('videoActionName')) { - $('#filePickerReady').after($('
').html(lang.errorLoadConfig)).hide(); - return; - } - - uploader = _this.uploader = WebUploader.create({ - pick: { - id: '#filePickerReady', - label: lang.uploadSelectFile - }, - swf: '../../third-party/webuploader/Uploader.swf', - server: actionUrl, - fileVal: editor.getOpt('videoFieldName'), - duplicate: true, - fileSingleSizeLimit: fileMaxSize, - headers: editor.getOpt('serverHeaders') || {}, - compress: false - }); - uploader.addButton({ - id: '#filePickerBlock' - }); - uploader.addButton({ - id: '#filePickerBtn', - label: lang.uploadAddFile - }); - - setState('pedding'); - - // 当有文件添加进来时执行,负责view的创建 - function addFile(file) { - var $li = $('
  • ' + - '

    ' + file.name + '

    ' + - '

    ' + - '

    ' + - '
  • '), - - $btns = $('
    ' + - '' + lang.uploadDelete + '' + - '' + lang.uploadTurnRight + '' + - '' + lang.uploadTurnLeft + '
    ').appendTo($li), - $prgress = $li.find('p.progress span'), - $wrap = $li.find('p.imgWrap'), - $info = $('

    ').hide().appendTo($li), - - showError = function (code) { - switch (code) { - case 'exceed_size': - text = lang.errorExceedSize; - break; - case 'interrupt': - text = lang.errorInterrupt; - break; - case 'http': - text = lang.errorHttp; - break; - case 'not_allow_type': - text = lang.errorFileType; - break; - default: - text = lang.errorUploadRetry; - break; - } - $info.text(text).show(); - }; - - if (file.getStatus() === 'invalid') { - showError(file.statusText); - } else { - $wrap.text(lang.uploadPreview); - if ('|png|jpg|jpeg|bmp|gif|'.indexOf('|' + file.ext.toLowerCase() + '|') == -1) { - $wrap.empty().addClass('notimage').append('' + - '' + file.name + ''); - } else { - if (browser.ie && browser.version <= 7) { - $wrap.text(lang.uploadNoPreview); - } else { - uploader.makeThumb(file, function (error, src) { - if (error || !src || (/^data:/.test(src) && browser.ie && browser.version <= 7)) { - $wrap.text(lang.uploadNoPreview); - } else { - var $img = $(''); - $wrap.empty().append($img); - $img.on('error', function () { - $wrap.text(lang.uploadNoPreview); - }); - } - }, thumbnailWidth, thumbnailHeight); - } - } - percentages[file.id] = [file.size, 0]; - file.rotation = 0; - - /* 检查文件格式 */ - if (!file.ext || acceptExtensions.indexOf(file.ext.toLowerCase()) == -1) { - showError('not_allow_type'); - uploader.removeFile(file); - } - } - - file.on('statuschange', function (cur, prev) { - if (prev === 'progress') { - $prgress.hide().width(0); - } else if (prev === 'queued') { - $li.off('mouseenter mouseleave'); - $btns.remove(); - } - // 成功 - if (cur === 'error' || cur === 'invalid') { - showError(file.statusText); - percentages[file.id][1] = 1; - } else if (cur === 'interrupt') { - showError('interrupt'); - } else if (cur === 'queued') { - percentages[file.id][1] = 0; - } else if (cur === 'progress') { - $info.hide(); - $prgress.css('display', 'block'); - } else if (cur === 'complete') { - } - - $li.removeClass('state-' + prev).addClass('state-' + cur); - }); - - $li.on('mouseenter', function () { - $btns.stop().animate({height: 30}); - }); - $li.on('mouseleave', function () { - $btns.stop().animate({height: 0}); - }); - - $btns.on('click', 'span', function () { - var index = $(this).index(), - deg; - - switch (index) { - case 0: - uploader.removeFile(file); - return; - case 1: - file.rotation += 90; - break; - case 2: - file.rotation -= 90; - break; - } - - if (supportTransition) { - deg = 'rotate(' + file.rotation + 'deg)'; - $wrap.css({ - '-webkit-transform': deg, - '-mos-transform': deg, - '-o-transform': deg, - 'transform': deg - }); - } else { - $wrap.css('filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation=' + (~~((file.rotation / 90) % 4 + 4) % 4) + ')'); - } - - }); - - $li.insertBefore($filePickerBlock); - } - - // 负责view的销毁 - function removeFile(file) { - var $li = $('#' + file.id); - delete percentages[file.id]; - updateTotalProgress(); - $li.off().find('.file-panel').off().end().remove(); - } - - function updateTotalProgress() { - var loaded = 0, - total = 0, - spans = $progress.children(), - percent; - - $.each(percentages, function (k, v) { - total += v[0]; - loaded += v[0] * v[1]; - }); - - percent = total ? loaded / total : 0; - - spans.eq(0).text(Math.round(percent * 100) + '%'); - spans.eq(1).css('width', Math.round(percent * 100) + '%'); - updateStatus(); + swf: '../../third-party/webuploader/Uploader.swf', + server: actionUrl, + fileVal: editor.getOpt('videoFieldName'), + duplicate: true, + fileSingleSizeLimit: fileMaxSize, + headers: editor.getOpt('serverHeaders') || {}, + compress: false + }); + uploader.addButton({ + id: '#filePickerBlock' + }); + uploader.addButton({ + id: '#filePickerBtn', + label: lang.uploadAddFile + }); + + setState('pedding'); + + // 当有文件添加进来时执行,负责view的创建 + function addFile (file) { + var $li = $('
  • ' + + '

    ' + file.name + '

    ' + + '

    ' + + '

    ' + + '
  • '), + + $btns = $('
    ' + + '' + lang.uploadDelete + '' + + '' + lang.uploadTurnRight + '' + + '' + lang.uploadTurnLeft + '
    ').appendTo($li), + $prgress = $li.find('p.progress span'), + $wrap = $li.find('p.imgWrap'), + $info = $('

    ').hide().appendTo($li), + + showError = function (code) { + switch (code) { + case 'exceed_size': + text = lang.errorExceedSize; + break; + case 'interrupt': + text = lang.errorInterrupt; + break; + case 'http': + text = lang.errorHttp; + break; + case 'not_allow_type': + text = lang.errorFileType; + break; + default: + text = lang.errorUploadRetry; + break; } + $info.text(text).show(); + }; - function setState(val, files) { - - if (val != state) { - - var stats = uploader.getStats(); - - $upload.removeClass('state-' + state); - $upload.addClass('state-' + val); - - switch (val) { - - /* 未选择文件 */ - case 'pedding': - $queue.addClass('element-invisible'); - $statusBar.addClass('element-invisible'); - $placeHolder.removeClass('element-invisible'); - $progress.hide(); - $info.hide(); - uploader.refresh(); - break; - - /* 可以开始上传 */ - case 'ready': - $placeHolder.addClass('element-invisible'); - $queue.removeClass('element-invisible'); - $statusBar.removeClass('element-invisible'); - $progress.hide(); - $info.show(); - $upload.text(lang.uploadStart); - uploader.refresh(); - break; - - /* 上传中 */ - case 'uploading': - $progress.show(); - $info.hide(); - $upload.text(lang.uploadPause); - break; - - /* 暂停上传 */ - case 'paused': - $progress.show(); - $info.hide(); - $upload.text(lang.uploadContinue); - break; - - case 'confirm': - $progress.show(); - $info.hide(); - $upload.text(lang.uploadStart); - - stats = uploader.getStats(); - if (stats.successNum && !stats.uploadFailNum) { - setState('finish'); - return; - } - break; - - case 'finish': - $progress.hide(); - $info.show(); - if (stats.uploadFailNum) { - $upload.text(lang.uploadRetry); - } else { - $upload.text(lang.uploadStart); - } - break; - } - - state = val; - updateStatus(); - - } - - if (!_this.getQueueCount()) { - $upload.addClass('disabled') + if (file.getStatus() === 'invalid') { + showError(file.statusText); + } else { + $wrap.text(lang.uploadPreview); + if ('|png|jpg|jpeg|bmp|gif|'.indexOf('|' + file.ext.toLowerCase() + '|') == -1) { + $wrap.empty().addClass('notimage').append('' + + '' + file.name + ''); + } else { + if (browser.ie && browser.version <= 7) { + $wrap.text(lang.uploadNoPreview); + } else { + uploader.makeThumb(file, function (error, src) { + if (error || !src || (/^data:/.test(src) && browser.ie && browser.version <= 7)) { + $wrap.text(lang.uploadNoPreview); } else { - $upload.removeClass('disabled') + var $img = $(''); + $wrap.empty().append($img); + $img.on('error', function () { + $wrap.text(lang.uploadNoPreview); + }); } - + }, thumbnailWidth, thumbnailHeight); } + } + percentages[file.id] = [file.size, 0]; + file.rotation = 0; + + /* 检查文件格式 */ + if (!file.ext || acceptExtensions.indexOf(file.ext.toLowerCase()) == -1) { + showError('not_allow_type'); + uploader.removeFile(file); + } + } - function updateStatus() { - var text = '', stats; - - if (state === 'ready') { - text = lang.updateStatusReady.replace('_', fileCount).replace('_KB', WebUploader.formatSize(fileSize)); - } else if (state === 'confirm') { - stats = uploader.getStats(); - if (stats.uploadFailNum) { - text = lang.updateStatusConfirm.replace('_', stats.successNum).replace('_', stats.successNum); - } - } else { - stats = uploader.getStats(); - text = lang.updateStatusFinish.replace('_', fileCount).replace('_KB', WebUploader.formatSize(fileSize)).replace('_', stats.successNum); + file.on('statuschange', function (cur, prev) { + if (prev === 'progress') { + $prgress.hide().width(0); + } else if (prev === 'queued') { + $li.off('mouseenter mouseleave'); + $btns.remove(); + } + // 成功 + if (cur === 'error' || cur === 'invalid') { + showError(file.statusText); + percentages[file.id][1] = 1; + } else if (cur === 'interrupt') { + showError('interrupt'); + } else if (cur === 'queued') { + percentages[file.id][1] = 0; + } else if (cur === 'progress') { + $info.hide(); + $prgress.css('display', 'block'); + } else if (cur === 'complete') { + } + + $li.removeClass('state-' + prev).addClass('state-' + cur); + }); + + $li.on('mouseenter', function () { + $btns.stop().animate({ height: 30 }); + }); + $li.on('mouseleave', function () { + $btns.stop().animate({ height: 0 }); + }); + + $btns.on('click', 'span', function () { + var index = $(this).index(), + deg; + + switch (index) { + case 0: + uploader.removeFile(file); + return; + case 1: + file.rotation += 90; + break; + case 2: + file.rotation -= 90; + break; + } + + if (supportTransition) { + deg = 'rotate(' + file.rotation + 'deg)'; + $wrap.css({ + '-webkit-transform': deg, + '-mos-transform': deg, + '-o-transform': deg, + 'transform': deg + }); + } else { + $wrap.css('filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation=' + (~~((file.rotation / 90) % 4 + 4) % 4) + ')'); + } + + }); + + $li.insertBefore($filePickerBlock); + } + + // 负责view的销毁 + function removeFile (file) { + var $li = $('#' + file.id); + delete percentages[file.id]; + updateTotalProgress(); + $li.off().find('.file-panel').off().end().remove(); + } + + function updateTotalProgress () { + var loaded = 0, + total = 0, + spans = $progress.children(), + percent; + + $.each(percentages, function (k, v) { + total += v[0]; + loaded += v[0] * v[1]; + }); + + percent = total ? loaded / total : 0; + + spans.eq(0).text(Math.round(percent * 100) + '%'); + spans.eq(1).css('width', Math.round(percent * 100) + '%'); + updateStatus(); + } + + function setState (val, files) { + + if (val != state) { + + var stats = uploader.getStats(); + + $upload.removeClass('state-' + state); + $upload.addClass('state-' + val); + + switch (val) { + + /* 未选择文件 */ + case 'pedding': + $queue.addClass('element-invisible'); + $statusBar.addClass('element-invisible'); + $placeHolder.removeClass('element-invisible'); + $progress.hide(); + $info.hide(); + uploader.refresh(); + break; + + /* 可以开始上传 */ + case 'ready': + $placeHolder.addClass('element-invisible'); + $queue.removeClass('element-invisible'); + $statusBar.removeClass('element-invisible'); + $progress.hide(); + $info.show(); + $upload.text(lang.uploadStart); + uploader.refresh(); + break; + + /* 上传中 */ + case 'uploading': + $progress.show(); + $info.hide(); + $upload.text(lang.uploadPause); + break; + + /* 暂停上传 */ + case 'paused': + $progress.show(); + $info.hide(); + $upload.text(lang.uploadContinue); + break; + + case 'confirm': + $progress.show(); + $info.hide(); + $upload.text(lang.uploadStart); + + stats = uploader.getStats(); + if (stats.successNum && !stats.uploadFailNum) { + setState('finish'); + return; + } + break; + + case 'finish': + $progress.hide(); + $info.show(); + if (stats.uploadFailNum) { + $upload.text(lang.uploadRetry); + } else { + $upload.text(lang.uploadStart); + } + break; + } + + state = val; + updateStatus(); - if (stats.uploadFailNum) { - text += lang.updateStatusError.replace('_', stats.uploadFailNum); - } - } + } - $info.html(text); - } + if (!_this.getQueueCount()) { + $upload.addClass('disabled') + } else { + $upload.removeClass('disabled') + } - uploader.on('fileQueued', function (file) { - fileCount++; - fileSize += file.size; + } - if (fileCount === 1) { - $placeHolder.addClass('element-invisible'); - $statusBar.show(); - } + function updateStatus () { + var text = '', stats; - addFile(file); - }); + if (state === 'ready') { + text = lang.updateStatusReady.replace('_', fileCount).replace('_KB', WebUploader.formatSize(fileSize)); + } else if (state === 'confirm') { + stats = uploader.getStats(); + if (stats.uploadFailNum) { + text = lang.updateStatusConfirm.replace('_', stats.successNum).replace('_', stats.successNum); + } + } else { + stats = uploader.getStats(); + text = lang.updateStatusFinish.replace('_', fileCount).replace('_KB', WebUploader.formatSize(fileSize)).replace('_', stats.successNum); - uploader.on('fileDequeued', function (file) { - fileCount--; - fileSize -= file.size; + if (stats.uploadFailNum) { + text += lang.updateStatusError.replace('_', stats.uploadFailNum); + } + } - removeFile(file); - updateTotalProgress(); - }); + $info.html(text); + } - uploader.on('filesQueued', function (file) { - if (!uploader.isInProgress() && (state == 'pedding' || state == 'finish' || state == 'confirm' || state == 'ready')) { - setState('ready'); - } - updateTotalProgress(); - }); + uploader.on('fileQueued', function (file) { + fileCount++; + fileSize += file.size; - uploader.on('all', function (type, files) { - switch (type) { - case 'uploadFinished': - setState('confirm', files); - break; - case 'startUpload': - /* 添加额外的GET参数 */ - var params = utils.serializeParam(editor.queryCommandValue('serverparam')) || '', - url = utils.formatUrl(actionUrl + (actionUrl.indexOf('?') == -1 ? '?' : '&') + 'encode=utf-8&' + params); - uploader.option('server', url); - setState('uploading', files); - break; - case 'stopUpload': - setState('paused', files); - break; - } - }); + if (fileCount === 1) { + $placeHolder.addClass('element-invisible'); + $statusBar.show(); + } - uploader.on('uploadBeforeSend', function (file, data, header) { - //这里可以通过data对象添加POST参数 - if (actionUrl.toLowerCase().indexOf('jsp') != -1) { - header['X_Requested_With'] = 'XMLHttpRequest'; - } - }); + addFile(file); + }); - uploader.on('uploadProgress', function (file, percentage) { - var $li = $('#' + file.id), - $percent = $li.find('.progress span'); + uploader.on('fileDequeued', function (file) { + fileCount--; + fileSize -= file.size; - $percent.css('width', percentage * 100 + '%'); - percentages[file.id][1] = percentage; - updateTotalProgress(); - }); + removeFile(file); + updateTotalProgress(); + }); - uploader.on('uploadSuccess', function (file, ret) { - var $file = $('#' + file.id); - try { - var responseText = (ret._raw || ret), - json = utils.str2json(responseText); - json = editor.getOpt('serverResponsePrepare')(json); - if (json.state == 'SUCCESS') { - uploadVideoList.push({ - 'url': json.url, - 'type': json.type, - 'original': json.original - }); - $file.append(''); - // 触发上传视频事件 - editor.fireEvent("uploadsuccess", { - res: json, - type: 'video' - }); - } else { - $file.find('.error').text(json.state).show(); - } - } catch (e) { - $file.find('.error').text(lang.errorServerUpload).show(); - } - }); + uploader.on('filesQueued', function (file) { + if (!uploader.isInProgress() && (state == 'pedding' || state == 'finish' || state == 'confirm' || state == 'ready')) { + setState('ready'); + } + updateTotalProgress(); + }); + + uploader.on('all', function (type, files) { + switch (type) { + case 'uploadFinished': + setState('confirm', files); + break; + case 'startUpload': + /* 添加额外的GET参数 */ + var params = utils.serializeParam(editor.queryCommandValue('serverparam')) || '', + url = utils.formatUrl(actionUrl + (actionUrl.indexOf('?') == -1 ? '?' : '&') + 'encode=utf-8&' + params); + uploader.option('server', url); + setState('uploading', files); + break; + case 'stopUpload': + setState('paused', files); + break; + } + }); - uploader.on('uploadError', function (file, code) { - }); - uploader.on('error', function (code, param1, param2) { - if (code === 'F_EXCEED_SIZE') { - editor.getOpt('tipError')(lang.errorExceedSize + ' ' + (param1 / 1024 / 1024).toFixed(1) + 'MB'); - } else { - console.log('error', code, param1, param2); - } + uploader.on('uploadBeforeSend', function (file, data, header) { + //这里可以通过data对象添加POST参数 + if (actionUrl.toLowerCase().indexOf('jsp') != -1) { + header['X_Requested_With'] = 'XMLHttpRequest'; + } + }); + + uploader.on('uploadProgress', function (file, percentage) { + var $li = $('#' + file.id), + $percent = $li.find('.progress span'); + + $percent.css('width', percentage * 100 + '%'); + percentages[file.id][1] = percentage; + updateTotalProgress(); + }); + + uploader.on('uploadSuccess', function (file, ret) { + var $file = $('#' + file.id); + try { + var responseText = (ret._raw || ret), + json = utils.str2json(responseText); + if (json.state == 'SUCCESS') { + uploadVideoList.push({ + 'url': json.url, + 'type': json.type, + 'original': json.original }); - uploader.on('uploadComplete', function (file, ret) { + $file.append(''); + // 触发上传视频事件 + editor.fireEvent("uploadsuccess", { + res: json, + type: 'video' }); + } else { + $file.find('.error').text(json.state).show(); + } + } catch (e) { + $file.find('.error').text(lang.errorServerUpload).show(); + } + }); - $upload.on('click', function () { - if ($(this).hasClass('disabled')) { - return false; - } + uploader.on('uploadError', function (file, code) { + }); + uploader.on('error', function (code, param1, param2) { + if (code === 'F_EXCEED_SIZE') { + editor.getOpt('tipError')(lang.errorExceedSize + ' ' + (param1 / 1024 / 1024).toFixed(1) + 'MB'); + } else { + console.log('error', code, param1, param2); + } + }); + uploader.on('uploadComplete', function (file, ret) { + }); - if (state === 'ready') { - uploader.upload(); - } else if (state === 'paused') { - uploader.upload(); - } else if (state === 'uploading') { - uploader.stop(); - } - }); + $upload.on('click', function () { + if ($(this).hasClass('disabled')) { + return false; + } - $upload.addClass('state-' + state); - updateTotalProgress(); - }, - getQueueCount: function () { - var file, i, status, readyFile = 0, files = this.uploader.getFiles(); - for (i = 0; file = files[i++];) { - status = file.getStatus(); - if (status == 'queued' || status == 'uploading' || status == 'progress') readyFile++; - } - return readyFile; - }, - refresh: function () { - this.uploader.refresh(); + if (state === 'ready') { + uploader.upload(); + } else if (state === 'paused') { + uploader.upload(); + } else if (state === 'uploading') { + uploader.stop(); } - }; + }); + + $upload.addClass('state-' + state); + updateTotalProgress(); + }, + getQueueCount: function () { + var file, i, status, readyFile = 0, files = this.uploader.getFiles(); + for (i = 0; file = files[i++];) { + status = file.getStatus(); + if (status == 'queued' || status == 'uploading' || status == 'progress') readyFile++; + } + return readyFile; + }, + refresh: function () { + this.uploader.refresh(); + } + }; })(); diff --git a/public/static/ueditorPlus/ueditor.config.js b/public/static/ueditorPlus/ueditor.config.js index 3a2ceda..474f4af 100644 --- a/public/static/ueditorPlus/ueditor.config.js +++ b/public/static/ueditorPlus/ueditor.config.js @@ -49,6 +49,7 @@ UEDITOR_CORS_URL: CORS_URL, + loadConfigFromServer: false, // 服务器统一请求接口路径 serverUrl: "http://192.168.31.51:9000/exam/exam/upload/configAndUpload", imageActionName: "imgUpload", @@ -59,10 +60,12 @@ ".gif", ".bmp" ], + fontfamily: [], //工具栏上的所有的功能按钮和下拉框,可以在new编辑器的实例时选择自己需要的重新定义 + // , "insertvideo" toolbars: [ - ["fullscreen", "source", "|", "bold", "italic", "underline", "forecolor", "fontfamily", "fontsize", "|", "justifyleft", "justifycenter", "justifyright", "justifyjustify", "|", "insertimage", "inserttable", 'formula', "gapfilling", 'combox'] + ["fullscreen", "source", "|", "bold", "italic", "underline", "forecolor", "fontfamily", "fontsize", "|", "link", "unlink", "anchor", "|", "imagenone", "imageleft", "imagecenter", "imageright", "|", "justifyleft", "justifycenter", "justifyright", "justifyjustify", "|", "insertcode", "insertimage", "insertvideo", "inserttable", 'formula', "gapfilling", 'combox'] ] // 公式配置 , formulaConfig: { @@ -95,12 +98,19 @@ // return true; // } } - // 插入图片自定义配置 , imageConfig: { // 禁止本地上传 disableUpload: false, } + , videoConfig: { + disableUpload: false, + selectCallback: null, + } + , videoActionName: 'imgUpload' + , videoAllowFiles: [ + ".mp4", + ] , zIndex: 2000 , fullscreen: false diff --git a/src/pages/testPaper/detail/index.vue b/src/pages/testPaper/detail/index.vue index b570d1d..2f65068 100644 --- a/src/pages/testPaper/detail/index.vue +++ b/src/pages/testPaper/detail/index.vue @@ -141,7 +141,7 @@ {{ questionTypes.find(e => e.id === item.questionType).name }}
    -

    分)

    @@ -627,7 +627,7 @@ export default { let result = stem while ((match = regex.exec(stem)) !== null) { - const newInput = `` + const newInput = `` result = result.replace(match[0], newInput) index++ } @@ -1016,7 +1016,7 @@ export default { } /deep/.score { - width: 70px; + width: 100px; margin: 0 10px; .el-input__inner { @@ -1036,6 +1036,10 @@ export default { border: 1px solid #DCDEE0; border-radius: 2px; + &::placeholder { + color: #cfd1db; + } + &:focus { outline: none; }