改造：Ueditor编辑器插入外链视频支持手机播放和上传本地音乐
今天给大家分享一下关于Ueditor编辑的插入外链视频支持手机播放和上传本地音乐的功能改造。这个功能做了三天了。在网上扒了很久也没有关于这样需求的代码，发现很多人都在求这个，我今天做完了，整理下分享在这里。希望能帮到大家。
首先说 关于视频按钮中插入外链视频并且支持移动端播放的问题。
Ueditor视频按钮本来就可以支持插入外链视频并且能支持pc端的播放，但是用到的是flash。手机并不支持这个播放插件。但是手机支持iframe标签啊。想要解决这个办法我们就要在这里做文章了。注意： 前提是你的Ueditor能支持外链视频的pc端播放哦，因为当你下载这个插件运用的时候。要修改一些地方，这个才能支持pc端的视频播放。（如何修改网上太多了，而且这个我也做了很久了，具体改哪里我也不记得了。这里我就不上教程了。在用我的办法之前请要先做到这些哦！）
步骤 1：找到 dialogs/video/video.html 这个文件。
我直接上图，红色框框里面的代码就是要加的代码，代码：<table><tr><td><label for="phoneUrl" class="url"><var id="phone_video_url"></var></label></td><td><input id="phoneUrl" type="text"></td></tr></table>
然后再找到 lang/zh-cn/zh-ch.js 这个文件 在342处找到insertvideo 中的 static 里面增加 'phone_video_url':"移动端网址",
我把我改的直接上图
红色框框就是要加的代码哦。好了这一不步骤做完了，来看看我的改造后的效果图，
这个红色框框就是我刚刚改了之后的效果。这个输入框里面要填的是视频地址
举个列子：这是优酷视频分享的播放代码<iframe height=498 width=510 src='http://player.youku.com/embed/XMjgyNTM2MzU4OA==' frameborder=0 'allowfullscreen'></iframe> 这样的标签是支持手机播放的，我就在我增加的输入框里面增加http://player.youku.com/embed/XMjgyNTM2MzU4OA== 这个，仔细的朋友发现这就是src包着的地址。第一步就是这样。
步骤 2 ： 找到 dialogs/video/video.js 这个文件 。在117行的方法里面写一点点逻辑。具体的思路我就不说了，相信码农都看得懂 直接上图
代码是 ： function insertSingle() {
var width = $G("videoWidth"),
height = $G("videoHeight"),
url = $G('videoUrl').value,
phoneurl = $G('phoneUrl').value,
phone_html = '<iframe id="phoneURL" src="' + phoneurl + '" frameborder=0 allowfullscreen></iframe> '
align = findFocus("videoFloat", "name");
if (!checkNum([width, height]))
return false;
editor.execCommand('insertHtml', phone_html);
if (url) {
editor.execCommand('insertvideo', {
url: convert_url(url),
width: width.value,
height: height.value,
align: align
}, isModifyUploadVideo ? 'upload' : null);
}
}
到这里，第一个问题就只有两个步骤，是不是很简单咧。
接下来 关于上传本地音乐的问题
其实这个也是在视频的按钮里面做改造。Ueditor中源码的music按钮是有问题的。大家试过之过就知道，根本就用不了，我按照上传本地视频的原理做了改造，其实就是判断了一下。源码中视频按钮中上传本地视频也支持上传音乐文件，因为源码中的视频播放标签用的是video。这个也是支持mp3格式的。上传成功后文本框的提示图是视频图。播放的也是定义的视频的宽和高。这样的用户体验是非常不好的，老板也不会允许这样的bug存在。音乐文件是.mp3格式，只要我们在上传的过程中拿到这个地址，做判断，让它走哪一块逻辑。原理就是这样。
步骤 1： 找到 dialogs/video/video.js 这个文件 。找到 insertUpload（）这个方法。具体的逻辑写法我直接上图，原理很简单，相信大家都看的懂
代码是 ：function insertUpload() {
var videoObjs = [],
uploadDir = editor.getOpt('videoUrlPrefix'),
width = parseInt($G('upload_width').value, 10) || 420,
height = parseInt($G('upload_height').value, 10) || 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('<span style="color:red;">' + '还有2个未上传文件'.replace(/[\d]/, count) + '</span>');
return false;
} else {
upload_url = uploadDir + file.url;
if (upload_url.substr(-4) == '.mp3') {
editor.execCommand('music', {
url: uploadDir + file.url,
width: 400,
height: 95
});
} else {
editor.execCommand('insertvideo', videoObjs, 'upload');
}
}
}
改造这个方法之后，再上传本地音乐文件的时候，成功后就会在文本提示框里提示音乐上传成功的图片。到这里还没完哦，因为我的判段里面调用的是源码的music这个参数。而源码构造的是 <embed>标签，这个标签根本就不显示播放界面，检查代码有有代码，但是页面上一片空白。那我们把<embed>标签换成<audio>标签，这个是H5的标签，也支持手机播放哦。
步骤 2 ： 找到 ueditor.all.js 这个文件 找到 UE.plugin.register 大概在 23652行处 我把改了效果直接上图
红色框框就是我要加的，源代码就是我隐藏的部分。
步骤 3 ： 找到 ueditor.all.min.js 这个文件 改的内容跟步骤2一样。
把源代码： '<embed type="application/x-shockwave-flash" class="edui-faked-music" pluginspage="http://www.macromedia.com/go/getflashplayer" src="'+a+'" width="'+c+'" height="'+d+'" '+(e&&!f?'align="'+e+'"':"")+(f?'style="float:'+f+'"':"")+' wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true" >' 替换成 '<audio class="edui-faked-music" controls="controls" src="'+a+'" width="'+c+'" height="'+d+'" '+(e&&!f?'align="'+e+'"':"")+(f?'style="float:'+f+'"':"")+'>' 这里一定要改哦，而且注意别改错了。参数也不要随意变动。
第二个问题就3个步骤也很简单。大家按照我的步骤做万了之后，在本地测试文件的时候，返回的是服务器错误，那大家就用小于8M的文件测试。线上应该不会有这样的限制文件大小的问题。
请大家尊重我的劳动成果，不要盗用文章，大家都是程序员，知道解决一个问题过程中的心酸。我在这里分享给大家也是希望能快速帮大家解决问题。若是按照上面的步骤没有解决问题。大家可以QQ咨询我（448225790），因为我不长登博客，而且这些是我做完之后再写的，以防有哪些步骤遗漏了。所以有问题留言的话我也不能及时帮到大家，QQ我是随时在线的。