🚀 BlockNote AI is here! Access the early preview.
BlockNote Docs/Editor Reference/粘贴处理

粘贴处理

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();
  },
});

请参阅 自定义粘贴处理器 示例了解用法。