百度编辑器UMeditor自定义插件

最近项目需要用到富文本编辑器,找了几个对比发现百度的EMeditor不错,这个精简版比原版Editor好用。不过网上的资料比较少,我研究了下载的源码,还是搞出来了,具体如下:

UM.registerUI(‘save’, function( name ){

//该方法里的this指向编辑器实例
var me = this,
//实例化一个UMEDITOR提供的按钮对象
$button = $.eduibutton({
//按钮icon的名字, 在这里会生成一个“edui-icon-save”的className的icon box,
//用户可以重写该className的background样式来更改icon的图标
//覆盖示例见btn.css
‘icon’: ‘save’,
‘title’: me.options.lang === “zh-cn” ? “保存” : “save”,
‘click’: function(){
//在这里处理按钮的点击事件
//点击之后执行save命令
me.execCommand( name );
}
});

//在这里处理保存按钮的状态反射
me.addListener( “selectionchange”, function () {

//检查当前的编辑器状态是否可以使用save命令
var state = this.queryCommandState( name );

//如果状态表示是不可用的( queryCommandState()的返回值为-1 ), 则要禁用该按钮
$button.edui().disabled( state == -1 ).active( state == 1 );

} );

//返回该按钮对象后, 该按钮将会被附加到工具栏上
return $button;

});

//注册一个名为“save”的插件
UM.plugins[‘save’] = function () {

UM.commands[ ‘save’ ] = {

execCommand: function (cmdName) {

//在这里实现具体的命令的行为
//当调用 editor.execCommand(“save”) 时, 该方法就会被调用
//保存功能的实际代码由用户自己实现

alert(“触发保存功能”);

},
queryCommandState: function (cmdName) {

//这里返回只能是 1, 0, -1
//1代表当前命令已经执行过了
//0代表当前命令未执行
//-1代表当前命令不可用

//在这里总是返回0, 这样做可以使保存按钮一直可点击
return 0;
},
//声明该插件不支持“撤销/保存”功能, 这样就不会触发ctrl+z 和ctrl+y的记忆功能
notNeedUndo: 1

};

};

 

之后需要在umeditor.config.js的toolbar里加上这个自定义插件的名字,在css里定义这个按钮的图标就可以了。