ueditor 增加自定义按钮

来源：互联网发布：经营网络棋牌室赚钱吗编辑：程序博客网时间：2024/05/27 09:47

为什么要增加这个自定义按钮呢？原因就不详述了，相信大家都懂！

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代码中用的都是取的位置。

这里写图片描述

上图中最下面一行最右面的那个按钮就是添加上去的（icon是自己拿ps做的，哎）

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());                  }            }        }    }       });

到此为止呢，我的这个自定义按钮就已经完成了。

关于这个自定义按钮的方法，可以自行参考文档说明：

http://ueditor.baidu.com/doc/

1 0