Grammarly Chrome扩展如何在tinyMCE、CKE等编辑器下划线？求实现思路

核心原理：为何普通CSS行不通 #

像tinyMCE、CKEditor这类富文本编辑器大多用iframe封装内容，或是有独立的DOM隔离机制，全局CSS无法穿透；同时编辑器会自行管理内容渲染与同步，直接添加的样式会被其内部逻辑覆盖，所以必须用更灵活的DOM操作或分层渲染方案。

具体实现技术建议 #

• 文本节点拆分+内联标记注入
  遍历编辑器内的文本节点，将需要标记的词汇拆分为独立节点，插入自定义内联元素（比如<span class="custom-underline">）并赋予下划线样式。需要监听编辑器的输入/内容变更事件，实时重新解析文本。注意要在编辑器导出内容时移除这些临时标记，避免污染原始内容。

• Overlay覆盖层渲染
  不修改编辑器原始DOM，在编辑器容器上方创建一个透明的绝对定位覆盖层。通过Range API获取目标词汇的getBoundingClientRect()坐标，转换为覆盖层内的相对位置后，绘制对应样式的下划线。这种方式完全不干扰编辑器内部逻辑，但需要处理滚动、窗口 resize、内容变更时的位置重计算，还要适配不同编辑器的滚动容器。

• 编辑器原生API适配
  针对不同编辑器调用其官方API实现适配：

  • tinyMCE：通过tinymce.activeEditor.on('input', callback)监听输入，用editor.selection.getRng()获取文本范围，插入带样式的内联元素。
  • CKEditor：利用editor.model.document.on('change:data', callback)监听内容变化，通过editor.model.insertContent()插入编辑器支持的样式化节点，避免自定义元素被过滤。

• Shadow DOM权限访问
  对于采用Shadow DOM封装的编辑器，Chrome扩展可利用自身特权直接访问shadowRoot内部DOM，进行文本解析与标记注入；也可通过::slotted()等CSS选择器实现样式穿透，但前者的灵活性更高。

开发注意事项 #

• 性能优化：避免全量文本解析，只对变更的内容做增量处理，减少DOM操作次数。
• 兼容性适配：不同编辑器的DOM结构、API差异大，需编写适配层针对每个编辑器做特定处理。
• 内容纯净性：确保临时标记不会被编辑器保存到输出内容中，在提交前清理所有注入的元素。
• 权限配置：Chrome扩展需申请activeTab或<all_urls>权限，才能访问页面内的编辑器DOM（包括Shadow DOM）。

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