UEditor文本编辑器自定义工具按钮的详细教程

UEditor文本编辑器中文版是百度Web前端研发部开发的，能够获得所见即所得的富文本在线编辑器。该编辑器中能够提供可定制、轻量，以及注重用户体验等等特点。UEditor文本编辑器功能非常强大，开源基于BSD协议，并且该编辑器的设计界面非常的简洁清晰，设计得很人性化，能够为用户提供更加方便快捷的操作，Ueditor中文版允许互联网开发者自由传播和使用代码，使开发者可以根据实际应用和需求自由定制。并且能够帮助更多的网站开发者解决各项问题，节约用户在使用过程中的花费时间，更加有效的降低了各大企业的开发成本等等，有需要的用户可以在本站直接进行下载！

UEditor文本编辑器图一

1. 用户体验：支持多种浏览器的使用，能够屏蔽各种浏览器之间的差异，提供良好的文本编辑体验。

2. 定制下载：通过细粒度拆分核心代码，能够为用户提供可视化的功能选择和自定义文件下载。

3. 开源免费：编辑器中的开源基于MIT协议，完美的支持商业和非商业用户的免费使用和任意修改。

4. 功能全面：UEditor文本编辑器中涵盖有流行的富文本编辑器特色功能，拥有独创多种全新编辑操作模式。

5. 专业稳定：该软件由百度专业QA团队持续跟进，通过上千自动化测试案例，能够为用户带来良好的使用体验。

如果用户在该编辑器中想要使用自定义工具的按钮，首先需要进行自定义的参数设置，在软件中需要加入按钮UI，然后再对UI进行更改，接下来为UI添加事件。但是很多用户却不知道具体的操作方法，接下来小编就给大家来详细介绍一下自定义工具按钮UI的具体使用流程，帮助小伙伴们更快的上手使用该软件，一起来详细了解一下吧！

第一步：打开软件之后，我们需要找到editor_config.js，或者是ueditor.config.js)文件中的toolbars参数，并且需要增加“camnpr”字符串，根据对应事项将labelMap进行添加，可以用于鼠标上按钮时的提示功能。

UEditor文本编辑器图二

第二步：接下来找到ui/editorui.js文件中的btnCmds数组，同样的方法需要增加一个“camnpr”字符串。如果找不到editorui.js文件的话，可以直接在ueditor.all.js文件里搜索var btnCmds = [，找到此位置就能看到。

UEditor文本编辑器图三

第三步：在这里我们需要添加一个'camnpr': '~/dialogs/emotion1/camnpr.html'。这个camnpr.html页面时自定义的页面，如果你要点击此按钮弹出这个页面，还需要加入如下代码。先在ueditor.all.js页面找到 editorui["emotion"] = function 在这段代码下边加入即可。

UEditor文本编辑器图四

如果是需要这项功能的用户，在这里就不用添加代码了，就可以直接进行操作啦！

UEditor文本编辑器图五