EditorJS粘贴Google Docs内容携带多余HTML标签问题求助

可能的问题原因 #

• Google Docs复制输出的HTML结构更新：旧版本EditorJS的粘贴解析逻辑刚好适配当时Google Docs的输出结构，现在Google Docs的复制内容包含更多样式标签和嵌套结构，导致新版本（甚至降级后的核心）无法正确过滤。
• 新增工具的干扰：你新增的工具可能自带格式识别逻辑，在粘贴时主动解析Google Docs的格式标签并转换为编辑器内的格式，即使降级了EditorJS核心，这些工具的处理逻辑依然生效。
• 浏览器粘贴API或环境变化：不同浏览器对粘贴事件的处理有差异，或者你的项目依赖的其他DOM处理类库更新，导致原本的sanitization逻辑失效。

解决方法 #

1. 自定义粘贴拦截器，强制插入纯文本 #

通过重写EditorJS的onPaste钩子，直接提取剪贴板的纯文本内容，跳过HTML解析：

const editor = new EditorJS({
  holder: 'editorjs-container',
  tools: {
    paragraph: {
      class: Paragraph,
    },
    // 其他新增工具配置...
  },
  onPaste: (event) => {
    // 获取纯文本内容
    const plainText = (event.clipboardData || window.clipboardData).getData('text/plain');
    // 阻止默认粘贴行为
    event.preventDefault();
    // 手动插入纯文本段落
    editor.blocks.insert('paragraph', { text: plainText.trim() });
  }
});

2. 强化工具的Sanitizer配置 #

针对Paragraph工具和其他文本类工具，配置严格的sanitizer规则，过滤所有样式属性和非必要标签：

paragraph: {
  class: Paragraph,
  config: {
    sanitizer: {
      // 只允许p标签和br标签
      p: true,
      br: true,
      // 移除所有元素的样式、类、ID及自定义属性
      '*': {
        style: false,
        class: false,
        id: false,
        'data-*': false
      }
    }
  }
}

3. 清理Google Docs特定的HTML格式 #

如果需要保留部分基础格式（比如加粗、斜体），可以编写自定义解析逻辑，过滤Google Docs的冗余标签：

function cleanGoogleDocsHtml(html) {
  // 替换Google Docs的容器div为p标签
  html = html.replace(/<div[^>]+class="c[^"]+"[^>]*>/g, '<p>');
  html = html.replace(/<\/div>/g, '</p>');
  // 移除带样式的span标签
  html = html.replace(/<span style="[^"]+">/g, '');
  html = html.replace(/<\/span>/g, '');
  // 如需保留基础格式，可转换b/i为EditorJS支持的标记
  // html = html.replace(/<b>/g, '<strong>');
  // html = html.replace(/<\/b>/g, '</strong>');
  return html;
}

// 在onPaste中应用清理逻辑
onPaste: (event) => {
  const html = (event.clipboardData || window.clipboardData).getData('text/html');
  const cleanedHtml = cleanGoogleDocsHtml(html);
  // 解析清理后的HTML为纯文本
  const parser = new DOMParser();
  const doc = parser.parseFromString(cleanedHtml, 'text/html');
  const text = doc.body.textContent.trim();
  
  event.preventDefault();
  editor.blocks.insert('paragraph', { text });
}

4. 排查新增工具的粘贴逻辑 #

检查你新增的工具（比如加粗、列表等）是否有自动识别粘贴格式的逻辑，如果有，关闭相关配置或修改其sanitizer规则，避免它们解析Google Docs的格式标签。

5. 特定段落错误的处理 #

特定段落出错通常是因为包含EditorJS不支持的嵌套结构（比如表格、复杂列表）或特殊字符，你可以在粘贴时检测这类内容：要么直接过滤掉不支持的结构，要么转换为编辑器兼容的纯文本形式，也可以提示用户手动调整后再粘贴。

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