UMEditor 二次开发技术实践

最新推荐文章于 2021-11-26 18:28:05 发布

weixin_34266504

最新推荐文章于 2021-11-26 18:28:05 发布

阅读量118

点赞数

原文链接：http://www.cnblogs.com/meiCode/p/5454483.html

版权

许多项目都会或多或少的结合许多第三的组件，恰好，遇到了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;
});