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: ;

    padding:;

    background-repeat: no-repeat;

    background-image: url(../images/icons.png);

    background-image: url(../images/icons.gif) \;

}

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

.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 == -).active(state == )

    });

    return $btn;

});