UMEditor 二次开发技术实践

许多项目都会或多或少的结合许多第三的组件，恰好，遇到了UMeditor富文本组件，因为它及其精简，功能强大，有专业团队维护，所以，我选择了它，而且它出色的完成项目中的全部功能的需求，对此，我说一下，二次开发的技巧总结：

1.创建一个富文本编辑器UMEditor，“closeIDE”就是要增加的一个按钮

var ue = UM.getEditor('myEditorList', {
            toolbar: [
            ' source  | undo redo | bold italic underline strikethrough | superscript subscript | forecolor backcolor |removeformat | ',
            ' fontfamily fontsize',
            '| justifyleft justifycenter justifyright justifyjustify |',
            'link unlink ',
              'formula  ', 'closeIDE'
            ]
        });

2.在\ueditor\lang\en\en.js中添加closeIDE，及其汉语提示

 'closeIDE':'关闭编辑器' 

3.在\themes\default\css\umeditor.css 这个是请求一张PNG图片（包含工具箱所有的图标）

.edui-btn-toolbar .edui-btn .edui-icon{
    width: 20px;
    height: 20px;
    margin: 0;
    padding:0;
    background-repeat: no-repeat;
    background-image: url(../images/icons.png);
    background-image: url(../images/icons.gif) \9;
}

然后给新添的按钮设置图标，我这里还是用的上述图片里的

 .edui-btn-toolbar .edui-btn .edui-icon-closeIDE{ background-position:-360px -40px; } 

上述步骤完成之后，主要的开始了，就是注册该按钮

UM.registerUI('closeIDE', function (name) {
    //注册按钮执行时的command命令，使用命令默认就会带有回退操作
    var me = this;
    var options = me.options;
    var $btn = $.eduibutton({
        icon: name,
        click: function () {
            UM.getEditor('myEditorList').setHide();
            $("#" + options.type).val(ue.getContent().replace("<p>", "").replace("</p>", "").replace("<br/>", ""));
        },
        title: this.getLang('labelMap')[name] || '',
    });

    this.addListener('selectionchange', function () {
        var state = this.queryCommandState(name);
        $btn.edui().disabled(state == -1).active(state == 1)
    });
    return $btn;
});

此处可以很简单理解：click事件：可以用来实现自己的逻辑，这也是我比较关心的，其过程就是初始化一个按钮

效果图：

参考资料：http://ueditor.baidu.com/website/document.html