edui 富文本编辑_百度umeditor富文本编辑器插件扩展

富文本编辑器在WEB开发中经常用到,个人比较喜欢用百度出的ueditor这款,ueditor这款本身支持插件扩展的,但是ueditor的mini版本 umeditor 就没有那么方便了,不过找了很多资料根据这些资料琢磨出了如果给umeditor添加插件,这个案例中将实现增加代码和附件插入.

准备工作:

1.umeditor下载:

https://github.com/fex-team/umeditor/releases

2.插件弹窗使用的是 layer:

http://layer.layui.com/?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 = '

' + result.CodeObj.codeContent + '

';

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;

};

//添加代码插件