改造：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> 这样的标签是支持手机播放的，我就在我增加的输入框里面增加[b]http://player.youku.com/embed/XMjgyNTM2MzU4OA== 这个，仔细的朋友发现这就是src包着的地址。第一步就是这样。[/b]

步骤 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

           
4000
    });

            } 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我是随时在线的。