需求:
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: 上一下最终完成的效果图:
音频:
~~~
视频:
~~~
好啦~~~~结束。
转载请标明出处:基于UEditor编辑器二次开发
文章来源: 基于UEditor编辑器二次开发