如何在ProseMirror富文本编辑器中触发程序化粘贴操作？

核心问题分析 #

你之前尝试的方法都无法触发ProseMirror的粘贴处理逻辑：

• 直接修改innerText/innerHTML：跳过了ProseMirror的内部文档模型和内容转换流程，编辑器不会识别这些修改，也无法自动格式化表格。
• document.execCommand("insertText")：该API已被废弃，且ProseMirror不依赖它处理输入，而是通过监听原生剪贴板事件实现内容解析。
• 发送KeyboardEvent：浏览器出于安全限制，仅触发Ctrl+V键盘事件不会执行实际粘贴操作，必须传递真实的剪贴板数据。

正确实现步骤 #

要模拟手动粘贴的完整效果，需要构造包含真实剪贴板数据的ClipboardEvent并分发到编辑器元素，具体实现如下：

1. 配置扩展权限 #

在manifest.json中添加必要的剪贴板读取权限：

{
  "permissions": ["clipboardRead", "activeTab"]
}

2. 模拟粘贴事件的核心代码 #

// 获取ProseMirror编辑器元素并聚焦
const editorEl = document.querySelector('[contenteditable="true"]');
if (!editorEl) return;
editorEl.focus();

// 读取剪贴板中的所有数据（文本、HTML、图片等）
navigator.clipboard.read().then(async (items) => {
  const clipboardData = new DataTransfer();

  // 遍历剪贴板中的每个数据项，添加到DataTransfer对象
  for (const item of items) {
    // 处理HTML内容（如表格）
    if (item.types.includes('text/html')) {
      const htmlContent = await item.getType('text/html');
      clipboardData.setData('text/html', htmlContent);
    }
    // 处理纯文本内容
    if (item.types.includes('text/plain')) {
      const textContent = await item.getType('text/plain');
      clipboardData.setData('text/plain', textContent);
    }
    // 处理图片内容
    const imageType = item.types.find(type => type.startsWith('image/'));
    if (imageType) {
      const imageBlob = await item.getType(imageType);
      clipboardData.items.add(new File([imageBlob], 'pasted-image.png', { type: imageType }));
    }
  }

  // 构造粘贴事件，确保事件冒泡且可取消
  const pasteEvent = new ClipboardEvent('paste', {
    clipboardData: clipboardData,
    bubbles: true,
    cancelable: true
  });

  // 向编辑器分发粘贴事件，触发ProseMirror的原生处理逻辑
  editorEl.dispatchEvent(pasteEvent);
}).catch(error => {
  console.error('读取剪贴板失败:', error);
});

关键说明 #

• DataTransfer对象：用于模拟真实剪贴板中的数据结构，包含文本、HTML、文件等多种类型数据，ProseMirror会通过这个对象读取粘贴内容并执行格式化（如表格美化）和图片上传逻辑。
• 事件分发：将构造好的paste事件分发到编辑器元素，而非document，确保ProseMirror的事件监听器能捕获到该事件。
• 内容脚本执行：代码需要通过Chrome扩展的content script注入到目标页面，而非后台脚本，这样才能访问页面DOM和编辑器元素。

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