第一步：在ueditor.config.js文件中找到toolbars数组，添加一个“hougelou”字符串，然后找到labelMap数组，对应添加一个labelMap，当鼠标上移按钮时进行提示。

复制代码如下：//工具栏上的所有功能按钮和下拉框，创建新编辑器实例时可以选择需要的新定义。工具栏： [['全屏'，' Source '，' | '，' Undo '，' Redo '，' | '，' Bold '，' Italic '，'下划线'，' fontborder '，'删除线'，'下标'，' removeformat '，' formatmatch '，' hougelou '，' autotypeset '，' blockquote '，' pasteplain '，' | '，' forecolor '，' backcolor '，' insertorderedlist '，' insertunorderedlist '，' selectall '，' cleardoc '，' | '，' rowspacingtop '，' rowspacingbottom '，' inserttable '，' deletetable '，' insertparagraphbeforetable '，' insertrow '，' deleterow '，' insertcol '，' deletecol '，' mergecells '，' mergeright '，' mergedown '，' splittorows '，' splittocols '，' | '，' print '，' preview '，' searchreplace '，' Help ']//将鼠标放在工具栏上时显示的工具提示留空，支持自动多语言配置，否则以配置值为准。 标签地图： { '后格楼' : '你好，后阁楼' }。

第二步：在文件ueditor.all.js中找到btnCmds数组，并在其中添加一个字符串“hougelou”。

第三步：清空缓存，刷新下一页！工具栏的对应位置是否有自己定义的按钮？如下图所示：

由于此时没有设置相应按钮的图片样式，将显示默认的“b”字符。如果您想要以您需要的图标样式显示它，请按照以下步骤操作。

第四步：找到themes/default/css/ueditor.css文件，添加一个：的样式定义。

复制的代码如下： edui-for-Hou gelou . edui-icon { background-position :-700 px-40px；}

这里的样式定义了showmsg Icon在UEditor默认向导图标图片(主题/默认/图像/图标. png)中的位置偏移。要更改为另一个图标，只需将图标添加到图片文件并设置偏移值。

第五步：到目前为止，在UI层面已经完成了一个工具栏图标的显示和各种状态变化的逻辑，但是我们发现点击按钮后并没有反应。这是不可避免的，我们还必须用它自己的事件处理方法绑定按钮。

本质上，在这个时候，一个默认的事件处理方法已经被UEditor绑定到了按钮上，但是由于我们还没有定义这个方法的具体内容，所以点击之后就没有变化了。

我们来定义一下这个方法的具体内容：

初始化编辑器时，添加您自己的事件处理(插入图片)，如下所示：

复制代码代码如下： ueditor=UE。geteditor(' txt content '，{ 'initialFrameHeight': '200 '，工具栏s 3360['全屏'，' source '，' hougelou '，' bold '，' italic '，'下划线，' fontborder '，'删除线，' blockquote '，' pasteplain '，' | '，' forecolor '，' backcolor '，' insertorderedlist '，' insertunorderedlist '，' selectall '，' cleardoc '，' | '，' rowspacingtop '，' rowspacingbottom//回车的时候用换行不用段落标签//实现插件的功能代码百度。编辑。命令[' Hou gelou ']={ exec command : function(){ this。exec命令(' insert HTMl '，' img src=' http://www。XXX。com/images/logo。png '/')；返回真；}，queryCommandState:函数(){ } };

目标

-

在images.ashx里发现百度编辑器返回图片路径是用分隔符" ue_separate_ue "连起来的。