Xiuno 富文本编辑器深度改造：自定义工具栏全攻略

52JinY 助手

折腾 Xiuno 也有好几年了，最近终于下定决心把默认的编辑器换掉，顺手记录一下过程，希望对同样在纠结这个问题的朋友有点参考价值。

Xiuno BBS 自带的编辑器说实话一直是我的心病。功能不算少，但用起来总感觉差点意思，尤其是工具栏的排列逻辑很奇怪，很多我常用的功能要多点几下才能找到，而一些基本上没人用的按钮却占着显眼位置。移动端体验就更不用说了，点起来经常偏移，图片上传也时不时抽风。用户反馈也一直说发帖体验不好，我自己测试的时候确实感同身受。

于是我开始考虑替换方案。市面上常见的开源富文本编辑器我基本都试了一遍，包括 Quill、wangEditor、TinyMCE、还有 UEditor。TinyMCE 功能最强，但汉化和主题适配要花不少时间，而且体积偏大，加载速度在低配服务器上有点拖后腿。UEditor 是百度出的，文档齐全，国内用户熟悉，但已经好几年没有更新维护了，对新版浏览器的兼容性存在一些隐患，长期来看不太放心。最后我选了 wangEditor，版本用的是 v5，理由很简单：轻量、文档清晰、国人开发维护积极，遇到问题搜中文资料也比较顺手。

替换的思路是在 Xiuno 的发帖模板里把原来的编辑器初始化代码注释掉，然后引入 wangEditor 的 CSS 和 JS 文件，重新绑定到对应的 textarea 元素上。这里有个坑要注意，Xiuno 发帖时表单提交走的是自己封装的 AJAX，如果直接 submit 会发现内容拿不到，原因是富文本编辑器的内容存在编辑器实例里，并没有实时同步到原始的 textarea。解决方法是在表单提交前手动把编辑器的 HTML 内容赋值给 textarea，加一行监听逻辑就能搞定，不复杂。

自定义工具栏是我比较花时间的地方。wangEditor v5 的工具栏配置很灵活，可以通过 toolbarConfig 来指定显示哪些按钮、排列顺序是什么。我把不需要的功能全部移除了，比如表格、视频嵌入这些在我论坛场景里基本没人用，留下了加粗、斜体、链接、有序列表、无序列表、插入图片、代码块、字体颜色这几个核心功能。精简之后工具栏看起来清爽很多，移动端也能正常展示，不会挤成一团。

图片上传是另一个需要单独处理的环节。wangEditor 支持自定义上传接口，只需要在 editorConfig 里配置好 MENU_CONF 中的图片上传参数，指向 Xiuno 本身的附件上传接口即可，返回格式对一下就行。这里建议先用 Postman 或者浏览器开发者工具把 Xiuno 原生的上传请求抓一遍，搞清楚参数格式和响应结构，再去写适配代码，省得瞎猜。

整体替换下来大概花了一个周末，其中真正写代码的时间可能也就三四个小时，剩下的都是在调样式和测试各种边界情况。上线之后用户反应还不错，发帖流程顺畅多了，图片上传的报错也基本消失了。如果你的论坛也在用 Xiuno，默认编辑器又一直让你头疼，不妨考虑换一换，成本其实没有想象中那么高。有具体问题欢迎在帖子下面交流，能帮上的我尽量回。