文档
高级
粘贴处理

粘贴处理

BlockNote 默认尝试按以下顺序粘贴内容：

  • VS Code 兼容内容
  • 文件
  • BlockNote HTML
  • Markdown
  • HTML
  • 纯文本

在某些情况下，BlockNote 会尝试检测剪贴板中的 Markdown 并将其作为富文本粘贴到编辑器中。

您可以通过提供自定义粘贴处理器来更改默认的粘贴行为，从而完全控制粘贴内容如何插入到编辑器中。

pasteHandler 选项

pasteHandler 选项是一个函数，接收以下参数：

type PasteHandler = (context: {
    event: ClipboardEvent;
    editor: BlockNoteEditor;
    defaultPasteHandler: (context?: {
        prioritizeMarkdownOverHTML?: boolean;
        plainTextAsMarkdown?: boolean;
    }) => boolean;
}) => boolean;
  • event：粘贴事件。
  • editor：当前的编辑器实例。
  • defaultPasteHandler：默认的粘贴处理器。如果您只需稍微自定义粘贴行为，可以调用默认的粘贴处理器作为回退。

defaultPasteHandler 函数可以接受以下选项：

  • prioritizeMarkdownOverHTML：是否在从剪贴板粘贴时优先考虑 text/plain 中的 Markdown 内容，而非 text/html。
  • plainTextAsMarkdown：是否将纯文本视为 Markdown 并以富文本形式粘贴，或直接将文本粘贴到编辑器中。

自定义粘贴处理器

您也可以通过向 pasteHandler 选项提供一个函数来自定义粘贴处理器。

在下面的示例中，如果剪贴板数据包含 text/my-custom-format，我们将处理粘贴事件。如果不处理该事件，则调用默认粘贴处理器执行默认行为。

const editor = new BlockNoteEditor({
  pasteHandler: ({ event, editor, defaultPasteHandler }) => {
    if (event.clipboardData?.types.includes("text/my-custom-format")) {
      // 这里可以执行任何自定义逻辑，例如在粘贴前转换剪贴板数据
      const markdown = customToMarkdown(event.clipboardData.getData("text/my-custom-format"));
      
      // 编辑器能够粘贴 markdown（`pasteMarkdown`），HTML（`pasteHTML`）或纯文本（`pasteText`）
      editor.pasteMarkdown(markdown);
      // 我们已经处理了粘贴事件，返回 true，返回 false 将取消粘贴事件
      return true;
    }
 
    // 如果未处理粘贴事件，则调用默认粘贴处理器执行默认行为
    return defaultPasteHandler();
  },
});

请参阅此示例的 自定义粘贴处理器 示例。

无需 React 的使用方法（纯 JavaScript）网格建议菜单