Shadow DOM环境下ReactQuill编辑器格式按钮失效问题求助

问题根源 #

Quill编辑器的默认实现依赖全局document对象的选区API（如document.getSelection()），而Shadow DOM的封装特性会导致外部无法直接获取内部元素的选区，同时工具栏的默认事件处理无法穿透Shadow边界，最终出现选中文本后点击格式按钮无法生效、链接按钮完全失效的情况。

解决方案步骤 #

1. 用React Portal正确挂载到Shadow DOM：确保ReactQuill的DOM元素真正处于ShadowRoot上下文内，而非仅包裹在Shadow DOM容器外。
2. 注入Quill样式到Shadow DOM：Shadow DOM会隔离外部样式，需手动将Quill的主题样式注入到ShadowRoot中。
3. 自定义工具栏事件处理：绕过默认的选区获取逻辑，直接在Shadow DOM内获取选区并调用Quill的格式API。

修改后的完整代码示例 #

import React, { useEffect, useRef, useState } from 'react';
import ReactDOM from 'react-dom';
import ReactQuill from 'react-quill';
import quillSnowCss from 'react-quill/dist/quill.snow.css';

const ShadowWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const wrapperRef = useRef<HTMLDivElement>(null);
  const [shadowRoot, setShadowRoot] = useState<ShadowRoot | null>(null);

  useEffect(() => {
    if (!wrapperRef.current || shadowRoot) return;
    
    // 创建Shadow DOM并注入样式
    const root = wrapperRef.current.attachShadow({ mode: 'open' });
    const styleEl = document.createElement('style');
    styleEl.textContent = quillSnowCss;
    root.appendChild(styleEl);
    
    setShadowRoot(root);
  }, []);

  return (
    <div ref={wrapperRef}>
      {shadowRoot && ReactDOM.createPortal(children, shadowRoot)}
    </div>
  );
};

const App = () => {
  const [value, setValue] = useState('');
  const quillRef = useRef<ReactQuill>(null);

  // 自定义工具栏点击处理函数
  const handleToolbarAction = (format: string) => {
    const quillInstance = quillRef.current?.getEditor();
    if (!quillInstance) return;

    // 获取Shadow DOM内的选区
    const shadowRoot = quillInstance.root.getRootNode() as ShadowRoot;
    const selection = shadowRoot.getSelection();
    if (!selection || selection.rangeCount === 0) return;

    const currentRange = quillInstance.getSelection();
    if (!currentRange) return;

    if (format === 'link') {
      const url = prompt('输入链接地址:');
      if (url) {
        quillInstance.format('link', url, 'user');
      }
    } else {
      // 切换格式状态（如加粗/取消加粗）
      const currentFormat = quillInstance.getFormat()[format];
      quillInstance.format(format, !currentFormat, 'user');
    }
  };

  return (
    <ShadowWrapper>
      <ReactQuill
        ref={quillRef}
        theme="snow"
        value={value}
        onChange={setValue}
        modules={{
          toolbar: {
            container: [
              ['bold', 'italic', 'underline', 'strike'],
              ['link']
            ],
            handlers: {
              bold: () => handleToolbarAction('bold'),
              italic: () => handleToolbarAction('italic'),
              underline: () => handleToolbarAction('underline'),
              strike: () => handleToolbarAction('strike'),
              link: () => handleToolbarAction('link')
            }
          }
        }}
      />
    </ShadowWrapper>
  );
};

export default App;

关键说明 #

• React Portal：通过ReactDOM.createPortal将ReactQuill渲染到ShadowRoot内，确保编辑器的DOM节点完全处于Shadow DOM上下文。
• 样式注入：将quill.snow.css的内容直接注入到ShadowRoot，避免样式隔离导致编辑器样式失效。
• 自定义工具栏处理：手动获取Shadow DOM内的选区，调用Quill的format方法直接操作格式，绕过默认的全局选区依赖。

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