需求:
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: 上一下最终完成的效果图:
音频:
~~~
视频:
~~~
好啦~~~~结束。
版权声明:本文为u013723348原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。