文档
编辑器基础
默认模式

默认内容类型

BlockNote 支持许多内置的块、内联内容类型和样式，这些内容默认包含在编辑器中。这称为默认架构。要创建您自己的内容类型，请参阅自定义架构。

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

默认块

BlockNote 的内置块从基本段落到表格和图片应有尽有。

参考

让我们更深入地了解默认块及其支持的属性：

段落

类型与属性

type ParagraphBlock = {
  id: string;
  type: "paragraph";
  props: DefaultProps;
  content: InlineContent[];
  children: Block[];
};

标题

类型与属性

type HeadingBlock = {
  id: string;
  type: "heading";
  props: {
    level: 1 | 2 | 3 = 1;
  } & DefaultProps;
  content: InlineContent[];
  children: Block[];
};

level: 标题等级，表示标题（level: 1），副标题（level: 2）和子标题（level: 3）。

引用

类型与属性

type QuoteBlock = {
  id: string;
  type: "quote";
  props: DefaultProps;
  content: InlineContent[];
  children: Block[];
};

无序列表项

类型与属性

type BulletListItemBlock = {
  id: string;
  type: "bulletListItem";
  props: DefaultProps;
  content: InlineContent[];
  children: Block[];
};

有序列表项

类型与属性

type NumberedListItemBlock = {
  id: string;
  type: "numberedListItem";
  props: DefaultProps;
  content: InlineContent[];
  children: Block[];
};

图片

类型与属性

type ImageBlock = {
  id: string;
  type: "image";
  props: {
    url: string = "";
    caption: string = "";
    previewWidth: number = 512;
  } & DefaultProps;
  content: undefined;
  children: Block[];
};

url: 图片 URL。

caption: 图片说明。

previewWidth: 图片预览宽度，单位为像素。

表格

类型与属性

type TableBlock = {
  id: string;
  type: "table";
  props: DefaultProps;
  content: TableContent;
  children: Block[];
};

默认块属性

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

type DefaultProps = {
  backgroundColor: string = "default";
  textColor: string = "default";
  textAlignment: "left" | "center" | "right" | "justify" = "left";
};

backgroundColor: 块的背景颜色，也适用于嵌套块。

textColor: 块的文本颜色，也适用于嵌套块。

textAlignment: 块的文本对齐方式。

默认内联内容

默认情况下，BlockNote 中的 InlineContent（如段落等文本块的内容）可以是 StyledText 或 Link 对象。

参考

下面是所有默认内联内容及其支持的属性概览：

样式文本

StyledText 是一种用于显示带样式文本片段的 InlineContent 类型：

type StyledText = {
  type: "text";
  text: string;
  styles: Styles;
};

链接

Link 对象表示指向 URL 的链接：

type Link = {
  type: "link";
  content: StyledText[];
  href: string;
};

默认样式

BlockNote 中的默认文本格式选项由默认架构中的 Styles 表示：

type Styles = {
  bold: boolean;
  italic: boolean;
  underline: boolean;
  strike: boolean;
  textColor: string;
  backgroundColor: string;
};

创建新的块或内联内容类型

您也可以通过 React 扩展您的编辑器，创建自己的块、内联内容或样式。 跳转到自定义架构（高级）了解如何操作。

文档结构编辑器 API