内置区块
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 的 LaTeX 数学块和行内数学——在编辑器中渲染为公式,并可导出为 Markdown、PDF、DOCX、ODT 和电子邮件
图表
BlockNote 的 Mermaid 图表块——在编辑器中渲染为图表,并可导出为 Markdown、PDF、DOCX、ODT 和电子邮件
行内容
如何在 BlockNote 中使用行内容。
自定义
如何在 BlockNote 中创建自定义块、内联内容和样式。