基于UEditor编辑器二次开发

匿名 (未验证) 提交于 2019-12-03 00:22:01

需求:

1、在原有ueditor编辑器的音频上添加标题;


2、在原有ueditor编辑器的视频上添加上传封面图片(ps:就不能后台获取吗。。一定要前端做);


准备资料:(心路历程...)

头儿说:我们的原则是,不能改变他本身的ueditor.all.min.js 或者ueditor.all.js.........不能改变!不能改变!不能改变!

1、我们的后台是.net环境,首先,我去下载了UE的完整包,在这个目录下可以看到他的完整的插件管理代码:


这里的插件代码可以对照着ueditor.all.js里面看,就能大致明白添加插件的流程(如果可以改核心的这个文件,就方便多了.....);

2、http://fex.baidu.com/ueditor/#dev-developer 这个是官方的二次开发文档;

3、http://www.dookay.com/n/12290 这个是网上提供的二次开发的例子;

开始:

1、在原有的引入ueditor的下面加上如下代码,

<script type="text/plain" id="myEditor"> </script>                                         <script src="/js/UE/addTool.js"></script> /*这个页面中放新增的按钮*/

2、addTool.js中的内容如下:

UE.registerUI('lspace filterhtml video audio',function(editor,uiName){     switch (uiName) {         case "audio":             var dialog_audio = new UE.ui.Dialog({                 editor:editor,                 name:uiName,                 title:"音频",                 cssRules:"width:560px;height:200px;",                 //对话框也可以嵌入iframe:                 iframeUrl:'../../js/UE/dialogs/newaudio/audio.html',                 buttons:[                 {                     className:'edui-okbutton',                     label:'确定',                     onclick:function () {                         var _iframe = document.getElementById(dialog_audio.id+'_iframe').contentWindow;                          var _audioUrl = _iframe.document.getElementById('audioUrl').value;                         var _audioTitle = _iframe.document.getElementById('audioTitle').value;                         var _s = '<audio controls="controls" title="'+_audioTitle+'" preload="preload" type="application/x-shockwave-flash" class="edui-faked-music"  src="'+ _audioUrl +'" width="200" height="50" align="none" wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true"></audio>';                         console.log(_s)                         editor.focus();                           editor.execCommand('inserthtml',_s);                         dialog_audio.close(true);                         }                     },                    {                         className:'edui-cancelbutton',                         label:'取消',                         onclick:function () {                             dialog_audio.close(false);                         }                    }                 ]});             var btn = new UE.ui.Button({                 title:'音频',                 name:'myFirst'+uiName,                 cssRules :'background-position: -700px -400px;',                 onclick:function () {                     //渲染对话框并弹出                     dialog_audio.render();                     dialog_audio.open();                 }             });             return btn;             break;         default:             return ;             break;     }     },[34]);  // 实例化ueditor UE.getEditor('myEditor', {     toolbars:[['video']] });

audio.html 文件就是弹层页面;

最下面的34代表新增按钮放置在ueditor上的位置(可随意)

这里我就贴了audio的添加方式,视频也是一样的。

ps: 上一下最终完成的效果图:

音频:


~~~


视频:


~~~


好啦~~~~结束。

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!