BlockNote Docs参考概览

BlockNote API 概览

BlockNote 编辑器 API 是一套功能全面的函数和方法,允许您与编辑器进行交互并操作其内容。

可编辑性

编辑器默认是可编辑的,但您可以通过将 isEditable 属性设置为 false 来使其只读。

editor.isEditable = false;

聚焦

您可以使用 focus 方法来聚焦编辑器。

editor.focus();

检查编辑器是否拥有焦点。

const isFocused = editor.isFocused();

撤销/重做

您可以使用 undo 方法撤销上一次操作。

editor.undo();

使用 redo 方法重做上一次撤销的操作。

editor.redo();

事件

要了解更多关于事件的信息,请参阅 事件 参考文档。

文档操作

要了解更多关于区块操作的信息,请参阅 区块操作 参考文档。
要了解更多关于行内内容操作的信息,请参阅 行内内容操作 参考文档。

事务

BlockNote 支持事务,允许您将多个更改合并为一个操作。这对于提升用户体验非常有用,因为撤销/重做操作会更加自然。

// ✅ 推荐 - 这是单次撤销/重做操作
editor.transact(() => {
  editor.insertBlocks([{ type: "paragraph", content: "Hello, world!" }], "abc");
  editor.replaceBlocks([{ id: "123" }], {
    type: "paragraph",
    content: "Hello, world!",
  });
});

// ❌ 避免 - 这是两次独立的撤销/重做操作
editor.insertBlocks([{ type: "paragraph", content: "Hello, world!" }], "abc");
editor.replaceBlocks([{ id: "123" }], {
  type: "paragraph",
  content: "Hello, world!",
});

光标与选区

要了解更多关于光标和选区操作的信息,请参阅 光标与选区 参考文档。

粘贴操作

粘贴 HTML

将 HTML 内容粘贴到编辑器中。

// 粘贴并转换为 BlockNote 格式(默认)
editor.pasteHTML("<p>Hello, world!</p>");

// 以原生 HTML 格式粘贴
editor.pasteHTML("<p>Hello, world!</p>", true);

粘贴文本

将文本内容粘贴到编辑器中。

editor.pasteText("Hello, world!");

粘贴 Markdown

将 Markdown 内容粘贴到编辑器中。

editor.pasteMarkdown("# Hello\n\nThis is **bold** text.");

选项

使用 BlockNoteEditor.create 创建编辑器时,可以配置以下选项:

YJS 工具

BlockNote 提供了用于处理 YJS 协作文档的工具。这些工具允许您以编程方式在 BlockNote 区块与 YJS 文档之间进行转换。

要了解更多关于 YJS 工具的信息,请参阅 YJS 工具 参考文档。

相关文档

以下是有关特定领域的详细信息: