给百度UEditor编辑器自定义一个按钮

UEditor编辑器

比如我输入12345,选择该文字后,点加粗按钮(B),则源代码中一定是

12345

同样的,我点击斜体按钮(I),则源代码变成

12345

这些按钮都是编辑器自带的,我现在想自定义一个按钮(C),选中文字后,点击该按钮,则源代码变成:

12345

请问应该怎么修改,我用的是UEditor 1.433 PHP UTF-8版

这个需要自定义开发代码吧

表示只改过kindeditor,因为ueditor封装的地方不好找

第一步:找到ueditor.config.js文件中的toolbars数组,增加一个“hougelou”字符串,然后找到labelMap数组,对应着添加一个labelMap,用于鼠标移上按钮时的提示。
第二步:找到你所引用的ueditor.all.js文件中的btnCmds数组,在其中同样增加一个“hougelou”字符串。

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

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

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

.edui-for-hougelou .edui-icon {
background-position: -700px -40px;
}

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

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