使用editor自定义按钮

   第一步：找到editor_config.js文件中的toolbars参数，增加一个“showmsg”字符串，对应着添加一个labelMap，用于鼠标移上按钮时的提示。

1. toolbars:[
   
2.     [..., 'searchreplace','help','showmsg']
   
3. ],
   
4. labelMap:{
   
5.     'anchor':'', 'undo':'','showmsg':'简单按钮'
   
6. }

复制代码

   
    第二步：找到ui/editorui.js文件中的btnCmds数组，在其中同样增加一个“showmsg”字符串。

1. var btnCmds = [..., 'mergecells', 'deletetable', 'showmsg'];

复制代码

   
    第三步：清空缓存刷新下页面吧！工具栏的对应位置是否出现了一个自己定义的按钮呢？如下图所示：

2013-4-24 11:04 上传

下载附件(8.05 KB)
简单按钮1

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

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

1. .edui-for-showmsg .edui-icon {
   
2.     background-position: -640px -40px;
   
3. }

复制代码

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

2013-4-24 11:05 上传

下载附件(9.77 KB)
简单按钮2

   
    第五步：到此为止，在UI层面已经完成了一个工具栏图标的显示和各种状态变化的逻辑，但是我们发现点击按钮之后毫无反应。那是必然的，我们还必须为该按钮绑定属于它自己的事件处理方法。
    实质上，此时一个默认的事件处理方法已经被UEditor绑定到按钮上了，只不过由于我们还没有定义该方法的具体内容，所以点击之后无任何变化。
    下面我们就来定义该方法的具体内容：
    找到plugins目录，在该目录中添加一个showmsg.js文件，然后在该文件中输入如下代码：

1. UE.commands['showmsg'] = {
   
2.     execCommand : function(){
   
3.         alert("Hello,UE developer!");
   
4.     }
   
5. };

复制代码

然后将该文件引入UEditor：打开_examples/editor_api.js文件，在paths数组中的适当位置（一般是指默认提供的插件部分地址的最后）增加一条记录：

1. 'plugins/webapp.js',
   
2. 'plugins/showmsg.js',
   
3. 'ui/ui.js',

复制代码

    再次刷新页面点击一下按钮吧！