UEditor百度编辑器，工具栏添加一个普通按钮

Posted 2020-08-20 James的博客园

 

根据网上前辈提供的，还真的不错，下面也整理一下

 

添加一个名叫“macros”的普通按钮在工具栏上：

第一步：找到ueditor.config.js文件中的toolbars数组，增加一个“macros”字符串，

              然后找到labelMap数组，对应着添加一个labelMap，用于鼠标移上按钮时的提示。

//工具栏上的所有的功能按钮和下拉框，可以在new编辑器的实例时选择自己需要的从新定义
        , toolbars:[
            [\'fullscreen\', \'source\', \'|\', \'undo\', \'redo\', \'|\',
                \'bold\', \'italic\', \'underline\', \'fontborder\', \'strikethrough\', \'superscript\', \'subscript\', \'removeformat\', \'formatmatch\', \'autotypeset\', \'blockquote\', \'pasteplain\', \'|\', \'forecolor\', \'backcolor\', \'insertorderedlist\', \'insertunorderedlist\', \'selectall\', \'cleardoc\', \'|\',
                \'rowspacingtop\', \'rowspacingbottom\', \'lineheight\', \'|\',
                \'customstyle\', \'paragraph\', \'fontfamily\', \'fontsize\', \'|\',
                \'directionalityltr\', \'directionalityrtl\', \'indent\', \'|\',
                \'justifyleft\', \'justifycenter\', \'justifyright\', \'justifyjustify\', \'|\', \'touppercase\', \'tolowercase\', \'|\',
                \'link\', \'unlink\', \'anchor\', \'|\', \'imagenone\', \'imageleft\', \'imageright\', \'imagecenter\', \'|\',
                \'insertimage\', \'emotion\', \'scrawl\', \'insertvideo\', \'music\', \'attachment\', \'map\', \'gmap\', \'insertframe\',\'insertcode\', \'webapp\', \'pagebreak\', \'template\', \'background\', \'|\',
                \'horizontal\', \'date\', \'time\', \'spechars\', \'snapscreen\', \'wordimage\', \'|\',
                \'inserttable\', \'deletetable\', \'insertparagraphbeforetable\', \'insertrow\', \'deleterow\', \'insertcol\', \'deletecol\', \'mergecells\', \'mergeright\', \'mergedown\', \'splittocells\', \'splittorows\', \'splittocols\', \'|\',
                \'print\', \'preview\', \'searchreplace\', \'help\', \'macros\',

] ] 

//当鼠标放在工具栏上时显示的tooltip提示,留空支持自动多语言配置，否则以配置值为准 
,labelMap:{ \'macros\': \'hello\' }

第二步：找到你所引用的ueditor.all.js文件中的btnCmds数组，在其中同样增加一个“macros”字符串。

第三步：清空缓存或刷新，工具栏的对应位置是否出现了一个自己定义的按钮呢

由于此时未设置对应按钮的图片样式，所以会显示默认的“B”字符。要想让其显示成自己需要的图标样式，接着按照下面的步骤动手吧。

第四步：找到themes/default/css/ueditor.css文件，增加一条样式定义:

.edui-for-macros .edui-icon {
    background-position: -680px -40px;
}

 此处的样式定义了showmsg图标在UEditor默认的精灵Icon图片（themes/default/images/icons.png）中的位置偏移。如需更改成另外图标，只需添加图标到该图片文件中，然后设置偏移值即可。

 

第五步：到此为止，在UI层面已经完成了一个工具栏图标的显示和各种状态变化的逻辑，但是我们发现点击按钮之后毫无反应。那是必然的，我们还必须为该按钮绑定属于它自己的事件处理方法。

实质上，此时一个默认的事件处理方法已经被UEditor绑定到按钮上了，只不过由于我们还没有定义该方法的具体内容，所以点击之后无任何变化。

 

下面我们就来定义该方法的具体内容：

在初始化编辑器的时候，加上自己的事件处理（插入一张图片），如下代码：

var ue = UE.getEditor(\'editor\');
ue.commands[\'macros\'] = { 
          execCommand: function() {
            this.execCommand(\'inserthtml\', "<img src=\'https://www.baidu.com/img/bd_logo1.png\' />"); 
            return true; 
          }, 
          queryCommandState: function() { } 
        };

点击执行动作代码和效果图片：
exec:function () {
    this.execCommand(\'insertHtml\', "<input type=\'button\' class=\'M_scrawl\' value=\'联系人称谓\'>");
    return true;
}

 

 

 附： 百度编辑器官方也提供有接口，功能是可以，体验不好，如：1. 不能自定义工具栏toolbars数组配置显示；2. 源码编辑时还能点