RoosterJS编辑器在Shadow DOM中格式化功能失效问题求助

核心原因 #

RoosterJS默认依赖主文档（document）进行DOM查询、命令执行和样式注入，而Shadow DOM的隔离特性导致这些操作无法作用到内部的编辑器元素上。

具体修复步骤 #

1. 执行格式化前让编辑器获取焦点

点击按钮时焦点会转移到按钮上，导致RoosterJS内部依赖的document.execCommand无法作用于编辑器。修改按钮点击逻辑，先让编辑器获取焦点：

const boldButton = createButton('Bold', () => {
  if (editor) {
    editor.focus();
    toggleBold(editor);
  }
});

const italicButton = createButton('Italic', () => {
  if (editor) {
    editor.focus();
    toggleItalic(editor);
  }
});

const bulletButton = createButton('Bullet', () => {
  if (editor) {
    editor.focus();
    toggleBullet(editor);
  }
});

2. 配置Editor绑定Shadow DOM上下文

初始化Editor时，通过EditorOptions指定getDocument方法，让RoosterJS使用编辑器所在的文档上下文：

// Initialize RoosterJS 
editor = new Editor(editorDiv, {
  getDocument: () => editorDiv.ownerDocument,
});

3. 手动注入RoosterJS样式到Shadow DOM

RoosterJS默认会将样式注入主文档的<head>，但Shadow DOM无法访问这些样式，需要手动提取样式并注入：

function initializeEditor() {
  // ... 原有创建shadowRoot、wrapper等代码 ...

  // 注入RoosterJS样式到Shadow DOM
  const style = document.createElement('style');
  // 复制node_modules/roosterjs/dist/roosterjs.css中的全部样式内容到此处
  style.textContent = `
    .rooster-editor {
      /* RoosterJS默认样式 */
    }
    /* 其他RoosterJS相关样式 */
  `;
  shadowRoot.appendChild(style);

  // ... 初始化Editor代码 ...
}

替代方案 #

如果上述调整仍无法解决问题，可考虑：

• 更换原生支持Shadow DOM的富文本编辑器（如Slate、ProseMirror，这类编辑器的设计更适配组件化隔离场景）
• 将编辑器移出Shadow DOM，改用CSS Modules、Scoped CSS等方案实现样式隔离

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