DOMContentLoaded事件中Trix编辑器unpkg加载失效问题（仅Firefox）

问题概述 #

• 严格遵循官方文档使用Trix的insertString()方法，在Firefox中出现异常：
  • 通过cdnjs加载Trix 1.3.0版本时，insertString()功能完全正常
  • 通过unpkg加载Trix 2.1.3版本时，insertString()完全失效
  • 代码原本放在DOMContentLoaded事件中执行，尝试改用load事件后，插入文本的代码直接无法运行

原因分析 #

1. 版本与加载源的兼容性Bug：unpkg加载的是Trix 2.1.3高版本，而cdnjs用的是1.3.0旧版本，高版本在Firefox中存在初始化时机的兼容性问题——Trix编辑器实例虽然能在DOMContentLoaded触发时被获取，但内部文档结构还未完全就绪，导致调用insertString()无响应。
2. load事件绑定错误：load事件是绑定在window对象上的，代码中绑定到document上的load事件不会被触发，这也是改用load后代码完全不运行的核心原因。

临时解决方案 #

1. 锁定兼容版本：暂时使用cdnjs提供的Trix 1.3.0版本，确保Firefox环境下功能正常。
2. 延迟执行代码：若需使用Trix 2.1.3版本，可通过延迟执行等待编辑器完全初始化：

document.addEventListener("DOMContentLoaded", function(event) {
  setTimeout(() => {
    const element2 = document.querySelector("trix-editor")
    element2.editor.insertString("Hello2")
  }, 100)
})

3. 监听Trix初始化事件：利用Trix原生的trix-initialize事件，确保编辑器完全初始化后再执行操作：

document.addEventListener("trix-initialize", function(event) {
  if (event.target.tagName === "TRIX-EDITOR") {
    event.target.editor.insertString("Hello2")
  }
})

后续处理 #

该问题已在Trix官方仓库提交Bug报告，可关注官方后续修复进展。

内容的提问来源于stack exchange，提问作者Radek