项目中使用的富文本编辑器为 UEditor,但该组件已停止社区更新,维护活跃度极低。此前单实例使用时未出现明显问题,近期因业务场景扩展需要支持多实例,引发了一系列功能异常。由于暂不考虑替换组件,故针对遇到的问题进行了专项修复,特此记录。
问题1:编辑器初始化太慢
解决方案 :初始化慢的原因和编辑器内容强相关,这个慢不是挂载慢,而是初始化渲染器内容比较慢,最多只能从加载脚本的方向优化一下,但是提效很微弱
此处有一点注意:⚠️脚本可以异步加载,但是编辑器有两个脚本:config.js和min.js,configJs一定要先于min.js加载,如果两个都是异步加载的话,可能会出现出完成顺序不一致,导致编辑器无法使用的情况
问题2:多实例命名冲突
问题表现 :多实例部署时,编辑器内部 iframe 的 ID 无法实现正确递增(如预期生成 ueditor_0
、ueditor_1
等唯一 ID,实际多次出现重复的 ueditor_
未带序号的情况),导致多个编辑器实例无法被正确区分,偶发功能异常。
原因 :从ueditor.all.min.js分析,编辑器初始化过程中,iframe 的 ID 赋值(b.uid)没有正确递增。在多实例并发初始化场景下,ID 生成与 DOM 挂载的时序未做好控制,导致后续实例复用了前序实例的 ID 命名,引发冲突。
解决方案
采用异步初始化策略,在编辑器实例化阶段,通过 setTimeout
函数将 iframe 的 ID 赋值与初始化逻辑改为异步执行。
异步处理可确保b.uid正确递增,避免重复命名,从而实现 iframe ID 的有序递增(如 ueditorInstant1
对应 editor_1
),彻底解决多实例命名冲突问题。
问题三:页面中交互发生组件重新渲染,但编辑器无法工作
场景 :tabs进行切换的时候,destroyInactiveTabPane 会触发组件重新渲染,但是编辑器无法显示,即使你已经在卸载钩子里进行销毁实例了,但是发现仍然无法正常work,
原因 :因为富文本编辑器使用相同的容器 ID,当tab切换的时候react为了避免 DOM 中间态的空白或闪烁会先挂新组件、再卸旧组件 ,
所以其实每次在挂载新组件的时候,UEditor 的 render 方法只会通过 document.getElementById 定位容器,每次都会返回定位到的第一个容器,但是其实当前态中,你的期望的容器可能是另一个
解决方案: (二选一)
1.在挂载钩子里通过.then()
把初始化任务pend到微任务队列里,这样可以等同步代码走完(新组件挂载->旧组件卸载)后进行调用。
2.把销毁逻辑卸载每次的挂载里,可以通过遍历window.UE.instants
查看是否有当前实例,如果有则先销毁,再进行初始化