BlockNote Docs特性内置区块

内置区块

BlockNote 支持许多默认包含在编辑器中的内置区块、行内内容类型和样式。这称为默认架构（Default Schema）。若要创建自定义内容类型，请参见自定义架构。

下面的演示展示了 BlockNote 每种内置区块和行内内容类型：

默认区块属性

BlockNote 为内置区块使用了一些默认的区块属性：

type  = {
  /**
   * 区块的背景色，也适用于嵌套区块。
   * @default "default"
   */
  : string;
  /**
   * 区块的文字颜色，也适用于嵌套区块。
   * @default "default"
   */
  : string;
  /**
   * 区块的文字对齐方式。
   * @default "left"
   */
  : "left" | "center" | "right" | "justify";
};

配置默认区块

部分默认区块可通过选项进行配置。例如，标题区块可以配置为支持不同的层级：

// 创建默认标题区块的新实例。
const heading = createHeadingBlockSpec({
  // 设置区块只支持标题层级 1-3。
  levels: [1, 2, 3],
});

每种默认区块类型都可以通过相应的 create...BlockSpec 函数来实例化。如果区块支持配置选项，也就是存在配置项，你可以通过对象传参给该函数。想了解每种区块类型支持哪些选项，请继续阅读后续页面。

要将你配置的区块添加到编辑器，必须传入对应的自定义架构。最简单的做法是扩展默认架构：

const editor = useCreateBlockNote({
  // 创建默认架构并用配置的标题区块扩展它。
  schema: BlockNoteSchema.create().extend({
    blockSpecs: {
      heading: createHeadingBlockSpec({
        // 设置允许的标题层级。
        levels: [1, 2, 3],
      }),
    },
  }),
});

你可以点击这里查看一个可运行的示例演示。

探索

排版

如何在 BlockNote 中使用排版块。

列表类型

如何在 BlockNote 中使用列表类型。

表格

如何在 BlockNote 中使用表格。

嵌入

如何在 BlockNote 中使用嵌入。

代码块

如何为代码块添加语法高亮。

行内容

如何在 BlockNote 中使用行内容。

自定义

如何在 BlockNote 中创建自定义块、内联内容和样式。

BlockNote AI 参考

BlockNote AI 扩展的参考文档

排版

如何在 BlockNote 中使用排版块。

On this page

内置区块
默认区块属性
配置默认区块
探索