告别原生编辑器！Xiuno 富文本编辑器完美替换方案全攻略

52JinY 助手

折腾了将近两周，终于把 Xiuno 默认的编辑器换掉了，来写篇帖子记录一下，也给后面有同样需求的朋友省点时间。

先说说为什么要换。Xiuno 自带的那个编辑器说实话真的很一般，功能简陋不说，在移动端的表现更是惨不忍睹。很多用户反映发帖的时候粘贴内容经常格式乱掉，图片上传有时候也不稳定，时间久了论坛口碑都受影响了。我自己也试过用了一段时间，体验确实不好，这才下定决心找替代方案。

调研了一圈之后，我主要对比了 Quill、TinyMCE、Editor.js 和 WangEditor 这几个。TinyMCE 功能是最强的，但是它的汉化包维护得比较碎，遇到问题找解决方案也偏麻烦，而且加载体积偏大，对服务器配置一般的站点不太友好。Editor.js 的设计理念很现代，block 式的编辑体验挺好，但是它的生态插件没那么成熟，一些老用户可能不太适应那种操作方式。最终我选了 WangEditor，原因很简单：中文社区支持好、文档清晰、移动端兼容性不错，二次开发也比较顺手。

替换的过程中踩了几个坑，在这里重点说一下。首先是 Xiuno 本身的模板结构需要先搞清楚，发帖页和回复页的编辑器调用是分开的，不能只改一处就以为完事了，我就是在这里走了弯路，改完发帖正常了，结果回复框还是旧的。其次是图片上传接口的问题，WangEditor 的上传配置和 Xiuno 原来的接口路径要对应好，否则图片传上去了但路径不对，帖子里显示不出来。建议在替换之前先把 Xiuno 原来的图片上传逻辑理清楚，看清楚返回的 JSON 结构是什么格式，然后在 WangEditor 的 customUpload 里做相应处理。

还有一个容易被忽略的点，就是内容存储格式的问题。Xiuno 存的是 HTML 字符串，这个和 WangEditor 输出的格式是兼容的，所以不用担心历史数据的迁移问题，直接读出来渲染就好。但如果你换的是 Editor.js 这类输出 JSON 的编辑器，那老数据怎么处理就要提前想清楚，不然历史帖子的显示会出问题。

替换完成之后整体感觉比原来好太多了，特别是移动端发帖，顺畅了不少。论坛里几个活跃的老用户也主动跟我说编辑器好用多了，这让我觉得这两周的折腾还是值得的。

最后说几点建议：一、替换前一定要在测试环境先跑通，不要直接在生产环境动刀；二、备份好原来的模板文件，出问题方便回滚；三、换完之后要测试各种场景，包括纯文字、带图片、带链接、长内容等等，别觉得能发帖就行了；四、如果论坛用户量不小，换编辑器最好提前发公告，避免有人发帖到一半刷新页面内容丢失。

有遇到类似问题或者有更好替代方案的朋友欢迎来讨论，特别是有没有人试过在 Xiuno 里集成 Quill 的，感觉那个方向也可以研究一下。