富文本编辑器在WEB开发中经常用到,个人比较喜欢用百度出的ueditor这款,ueditor这款本身支持插件扩展的,但是ueditor的mini版本 umeditor 就没有那么方便了,不过找了很多资料根据这些资料琢磨出了如果给umeditor添加插件,这个案例中将实现增加代码和附件插入.
准备工作:
1.umeditor下载:
https://github.com/fex-team/umeditor/releases
2.插件弹窗使用的是 layer:
?alone
如何创建插件?
第一步:我们在编辑器umeditor目录下创建一个plugins的文件夹,这里用来存放我们自定义的插件,如上图,我们定义了一个代码(code)以及附件(attachment)插件
第二步:创建plugins.js文件,这里用来封装我们插件的信息,代码如下
//定义插件容器 var plugins = new Array(); //注册插件 function registerPlugins() { //添加代码插件 plugins['code'] = new function () { //注册界面事件 var result = new Object(); result.CodeObj = {}; //注册指定事件 UM.registerUI('code', function (name) { var me = this; var $btn = $.eduibutton({ icon: 'source', click: function () { var layIndex = layer.open({ type: 2, title: '源代码', maxmin: false, shadeClose: true, //点击遮罩关闭层 area: ['620px', '380px'], content: '/lib/umeditor/plugins/code/code.html', btn: ['确定', '取消'], btn1: function (index) { if (result.CodeObj.codeContent != '') { //把内容插入编辑器 var html = '<pre><code>' + result.CodeObj.codeContent + '</code></pre>'; me.execCommand('insertHtml', html); } //关闭弹窗并且清空当次内容 layer.close(layIndex); result.CodeObj = {}; //UM.getEditor('container').setContent(html, true); }, btn2: function (index) { //关闭当前弹窗 并且清空当前数据容器 layer.close(layIndex); result.CodeObj = {}; } }); }, title: '源代码' }); me.addListener('selectionchange', function () { //切换为不可编辑时，把自己变灰 var state = this.queryCommandState(name); $btn.edui().disabled(state == -1).active(state == 1) }); return $btn; } ); return result; }; //添加代码插件 plugins['attachment'] = new function () { //注册界面事件 var result = new Object(); result.DataObj = {}; //注册指定事件 UM.registerUI('attachment', function (name) { var me = this; var $btn = $.eduibutton({ icon: 'attachment', click: function () { var layIndex = layer.open({ type: 2, title: '附件', maxmin: false, shadeClose: true, //点击遮罩关闭层 area: ['600px', '320px'], content: '/lib/umeditor/plugins/attachment/attachment.html', btn: ['确定', '取消'], btn1: function (index) { if (result.DataObj.title != "" && result.DataObj.url != "") { var html = '<div>'; html += '<div style = "margin-top:10px;padding-left: 0px;">'; html += '<div>'; html += '<img src="http://www.likecs.com/images/download.png" />'; html += '</div>'; html += '<div>'; html += '<div>'; html += result.DataObj.title; html += '</div>'; html += '<div>'; html += '提取密码:<strong>' + (result.DataObj.password != "" ? result.DataObj.password:"")+'</strong>'; html += '</div>'; html += '</div>'; html += '<div>'; html += '<a href="' + result.DataObj.url + '" _href="' + result.DataObj.url + '" target="_blank"> <i></i></a>'; html += '</div>'; html += '</div>'; html += '</div>'; me.execCommand('insertHtml', html); } //关闭当前弹窗 并且清空当前数据容器 layer.close(layIndex); result.DataObj = {}; }, btn2: function (index) { //关闭当前弹窗 并且清空当前数据容器 layer.close(layIndex); result.DataObj = {}; } }); }, title: '附件' }); me.addListener('selectionchange', function () { //切换为不可编辑时，把自己变灰 var state = this.queryCommandState(name); $btn.edui().disabled(state == -1).active(state == 1) }); return $btn; } ); return result; }; }