ueditor二次开发系统:扩展工具栏增加自定义按钮

1.需要一张小的png的icon,然后将这个icon放在themes文件夹中的default中的images文件夹中。

2.在config.js中加上这个按钮的名称，在toolbaars的数组中，如图

对应还需要添加一个labelMap，用于鼠标移上按钮时的提示。

还需要在ueditor.all.js中增加按钮

我加的这个功能，是图片的描述样式按钮，为了统一文章中所有图片的描述文字，特意增加的这个按钮。

3.在css中 将按钮对应的样式添加上去，就是将对应的icon设置一下：

.edui-default  .edui-for-imagedes  .edui-icon {

    background: url( ../images/imageDes.png ) no-repeat 2px 3px!important;

}

然后就可以看到自己在编辑器中增加的这个按钮了

由于编辑器中的图片大多是图片精灵，所以在css代码中用的都是取的位置。

上图中最下面一行最右面的那个按钮就是添加上去的

button 已经显示出来了，接下来是功能的实现。其实我这个功能也是比较简单，就是改变一下字体的颜色，位置这些样式。

接下来该实现功能了，当然不同的按钮，功能的实现肯定是不一样的

下面是在再 ueditor.all.js 中定义的图片描述样式按钮的功能

UE.plugin.register('imagedes', function(){

    return {

        commands:{

            'imagedes':{

                execCommand:function(){

                    var me = this;

                    var text=me.selection.getText();                

                    var obj=me.selection.getStart();

                    var range = me.selection.getRange();

                    range.deleteContents();

                    var node = new UE.uNode({

                        type:'element',

                        tagName:'p',

                        attrs:{class:'imageDes'}

                    }); 

                    node.innerText(text);                                me.execCommand('inserthtml',node.toHtml());  

                }

            }

        }

    }       

});