页面间隙与背景

寻找显式分页?

本页介绍页面之间的视觉样式(背景颜色和间距)。如需在文档中插入显式分页符,请参阅 PageBreak 节点 文档。

从 pageBreakBackground 重命名

pageBreakBackground 选项和 setPageBreakBackground 命令已重命名为 pageGapBackgroundsetPageGapBackground,以避免与新的 PageBreak 节点 混淆。请相应地更新您的代码。

pageGapBackgroundpageGap 选项允许您更改页面之间的区域背景颜色以及页面之间的间距。这有助于在视觉上分隔页面,或匹配您应用的背景颜色设计。

如何设置页面间距背景

页面间距背景的初始编辑器配置可以在 .configure() 扩展级别完成:

Pages.configure({
  pageGapBackground: '#f8f8f8', // 页面之间的浅灰色
})

然后,在任何时候,您都可以使用公开的编辑器命令 setPageGapBackground(color: string) 来更改页面间距颜色:

editor.commands.setPageGapBackground(pageGapBackground)
// 您还应该执行此操作!
document.body.style.backgroundColor = pageGapBackground

有用提示

您还应该将 body(或编辑器容器)的背景颜色更改为与页面间距背景相匹配,因为页面间距背景仅应用于页面间距本身,而不是整个文档或 Tiptap 编辑器。

页面间距

  • 设置每个页面之间的空间。
  • 默认值:50(像素)

初始配置

Pages.configure({
  pageGap: 20, // 以像素为单位
})

编辑器命令

editor.commands.setPageGap(20) // 以像素为单位

提示

pageGap 属性仅影响页面之间的空间,而不影响页面本身。