react-quill-with-table中如何允许JavaScript代码不被自动清理

问题背景 #

react-quill-with-table默认会清理编辑器内容，当输入包含<script>标签的内容时，Quill会自动将其替换为<p>标签。

示例代码：

import Quill from 'quill';
import ReactQuill from 'react-quill-with-table'
import 'react-quill-with-table/dist/quill.snow.css';

const ele = useRef('editor');
const content = '<table><tr><td>Hello,</td><td>World!</td></tr><tr><td>Hi</td><td>Welcome</td></tr></table><script>alert("test");</script>';

const modules = {
    toolbar: {
        container: '#toolbar',
        handlers: {
            // 自定义工具栏处理函数
        }
    },
    clipboard: {
      matchVisual: false
    },
    sanitize: false,
};

return (
    <div className="editor" style={{ backgroundColor: '#fff', minHeight: '300px' }}>
      <ReactQuill
          ref={ele}
          theme="snow"
          value={content}
          modules={modules}
        />
    </div>
);

上述代码中的<script>标签最终会被转换为：

<p>alert("test");</p>

已尝试无效的方法 #

• 在modules中设置sanitize: false
• 自定义sanitize模块，尝试允许<script>标签

有效解决方案 #

Quill基于Delta内容模型，默认不识别<script>这类非语义标签，必须通过自定义Parchment Blot让Quill支持该标签。

步骤1：注册自定义Script Blot #

import Quill from 'quill';
// 继承基础Block Blot的行为
const Block = Quill.import('blots/block');

class ScriptBlot extends Block {
  // 定义Quill内部识别的Blot名称
  static blotName = 'script';
  // 绑定对应的HTML标签
  static tagName = 'SCRIPT';

  // 创建DOM节点时，将内容写入script标签的textContent
  static create(value) {
    const node = super.create(value);
    node.textContent = value;
    return node;
  }

  // 从DOM节点中提取内容值
  static value(node) {
    return node.textContent;
  }
}

// 注册Blot，第二个参数true表示覆盖已有配置（若存在）
Quill.register(ScriptBlot, true);

步骤2：配置编辑器模块 #

确保禁用默认的内容清理规则，并关闭剪贴板的视觉匹配：

const modules = {
  toolbar: {
    container: '#toolbar',
    handlers: {
      // 自定义工具栏逻辑
    }
  },
  clipboard: {
    matchVisual: false
  },
  sanitize: false, // 必须禁用默认清理
};

步骤3：内容处理注意事项 #

• 设置编辑器value时，确保传入的HTML中<script>标签格式正确
• 获取编辑器内容时，可使用quillInstance.getHTML()方法（需确认版本支持），或自定义Delta转HTML的逻辑，确保<script>标签被完整保留

注意：保留<script>标签存在XSS安全风险，仅在内容来源完全可信的场景下使用。

内容的提问来源于stack exchange，提问作者moh sajid khan