今天发现用UEditor默认的添加视频,在微信内置浏览器里无法正常显示。估计是微信屏蔽了UEditor使用的<embeded>标签。插入iframe形式的通用代码则能正常显示。
用百度UEditor可以插入iframe,流程如下:
1.找到视频的“通用代码”,比如腾讯的
2.在通用代码里找到src="xxxxxxxxxxxxx",把这个双引号里面的内容复制下来
3.打开文章编辑器,点“插入iframe”按钮
然后在地址栏右键粘贴,并输入宽度高度,最后点击确定
那么问题来了,作为一个懂点html的码农,看懂这一段iframe代码,从中找出src属性内容,都是最最基本的技能,跟吃饭一样。但是对于使用这个编辑器的用户来说,他肯定要说“什么?还要学html?WTF!”。
那么动手做点小小的改动,让UEditor支持直接插入通用视频代码吧
闲话少说,上代码:
主要就是改ueditor/dialogs/video/video.js
再具体一点,就是改其中的两个function
/** * 将单个视频信息插入编辑器中 * 修改:处理通用视频代码iframe BY oceanking 20150309 */ 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; url = utils.trim(url); if(/^<iframe/.test(url)){ var conUrl = ''; if(/src=\"[^\s"]+/i.test(url)){ conUrl = url.match(/src=\"[^\s"]+/i)[0].substr(5); } var newIframe = editor.document.createElement("iframe"); var div; newIframe.setAttribute("src",/http:\/\/|https:\/\//ig.test(conUrl) ? conUrl : "http://"+conUrl); /^[1-9]+[.]?\d*$/g.test( width.value ) ? newIframe.setAttribute("width",width.value) : ""; /^[1-9]+[.]?\d*$/g.test( height.value ) ? newIframe.setAttribute("height",height.value) : ""; //newIframe.setAttribute("scrolling","no"); newIframe.setAttribute("frameborder","0",0); newIframe.setAttribute("allowfullscreen","allowfullscreen"); newIframe.setAttribute("align",align); div = editor.document.createElement("div"); div.appendChild(newIframe); console.log(div.innerHTML); editor.execCommand("inserthtml",div.innerHTML); } else { editor.execCommand('insertvideo', { url: convert_url(url), width: width.value, height: height.value, align: align }, isModifyUploadVideo ? 'upload':null); } } /** * 根据url生成视频预览 * 修改:处理通用视频代码iframe BY oceanking 20150309 * @param url */ function createPreviewVideo(url){ if ( !url )return; url = utils.trim(url); if(/^<iframe/.test(url)){ var conUrl = ''; if(/src=\"[^\s"]+/i.test(url)){ conUrl = url.match(/src=\"[^\s"]+/i)[0].substr(5); } $G("preview").innerHTML = '<div class="previewMsg"><span>'+lang.urlError+'</span></div>'+ '<iframe class="previewVideo"' + ' src="' + conUrl + '"' + ' width="' + 420 + '"' + ' height="' + 280 + '"' + ' frameborder=0 allowfullscreen>' + '</iframe>'; } else { var conUrl = convert_url(url); $G("preview").innerHTML = '<div class="previewMsg"><span>'+lang.urlError+'</span></div>'+ '<embed class="previewVideo" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"' + ' src="' + conUrl + '"' + ' width="' + 420 + '"' + ' height="' + 280 + '"' + ' wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true" >' + '</embed>'; } }