探索 Tiptap V3 的最新功能
Tiptap 中文文档

导出自定义样式到 .docx

Available in Start planBeta

在导出为 DOCX 时，您可以定义将应用于导出文档的自定义样式。这在您想要跨文档保持一致的外观和感觉时非常有用。

// 导入 ExportDocx 扩展
import { ExportDocx } from '@tiptap-pro/extension-export-docx'

const editor = new Editor({
  extensions: [
    // 其他扩展 ...
    ExportDocx.configure({
      onCompleteExport: (result: string | Buffer<ArrayBufferLike> | Blob | Stream) => {}, // 必填
      styleOverrides: { // 样式覆盖
        paragraphStyles: [
          // 标题 1 样式覆盖
          {
            id: 'Heading1',
            name: 'Heading 1',
            basedOn: 'Normal',
            next: 'Normal',
            quickFormat: true,
            run: {
              font: 'Aptos',
              size: pointsToHalfPoints(16),
              bold: true,
              color: 'FF0000',
            },
            paragraph: {
              spacing: {
                before: pointsToTwips(12),
                after: pointsToTwips(6),
                line: lineHeightToDocx(1.15),
              },
            },
          },
        ]
      }
    }),
    // 其他扩展 ...
  ],
  // 其他编辑器设置 ...
})

在上面的示例中 ☝️ 我们正在导出具有自定义 Heading 1 样式的文档。该样式基于 Normal 样式，颜色为红色，并使用 Aptos 字体。段落前的间距设置为 12pt，后为 6pt。行高设置为 1.15。

您还可以为其他元素创建自定义样式，如 Heading 2、Heading 3、List Bullet、List Number 等。paragraphStyles 数组接受具有以下属性的对象数组：

段落样式对象

一个 paragraphStyle 对象接受以下属性：

属性类型描述
idstring样式的唯一标识符。
namestring样式的显示名称。
basedOnstring此样式所基于的基础样式（例如，Normal）。
nextstring要应用于下一个段落的样式。
quickFormatboolean如果为 true，该样式将出现在快速格式菜单中。
runobject定义文本格式（字体、大小、颜色、加粗等）。
paragraphobject定义段落格式（间距、对齐、边框等）。

运行样式属性

paragraphStyle 中的 run 对象接受以下属性：

属性类型描述
fontstring文本的字体系列。
sizenumber字体大小，单位为半点（例如，16点 = 32）。
boldboolean设置为 true 以使文本加粗。
italicsboolean设置为 true 以使用斜体文本。
colorstring文本颜色，十六进制格式（例如，FF0000 代表红色。不需要 #）。
kernnumber调整字符间距，单位为点。
effect可以应用的特殊文本效果。
emphasisMarkstring出现在文本上方或下方的强调标记（如 dot）。
smallCapsboolean设置为 true 以将文本显示为小型大写字母。
allCapsboolean设置为 true 以将文本显示为全大写。
strikeboolean设置为 true 以应用单条删除线。
doubleStrikeboolean设置为 true 以应用双条删除线。
subScriptboolean设置为 true 以使用下标文本。
superScriptboolean设置为 true 以使用上标文本。
highlight高亮颜色（预定义值）。
characterSpacingnumber调整字符之间的间距，单位为 TWIPs（我们知道，TWIPs，对吧？）
shadingobject为文本应用背景阴影。
shading → typeShadingType阴影类型（clear、solid、horizontalStripe 等）。
shading → fillstring阴影填充颜色，十六进制格式（例如，FF0000 代表红色）。
shading → colorstring阴影颜色，十六进制格式（例如，FF0000 代表红色）。
scalenumber调整文本的宽度（以百分比表示）。
underlineobject下划线样式，指定属性如 color 和 type，或为空对象以应用简单下划线。
underline → colorstring下划线颜色，十六进制格式（例如，FF0000 代表红色。不需要 #）。
underline → typeUnderlineType下划线类型（single、double 或 thick）。

有关更高级的样式选项和详细使用信息，您可以参考我们包中公开的 IRunStylePropertiesOptions 类型，或参考 docx 文档。

段落样式属性

paragraphStyle 中的 paragraph 对象接受以下属性：

属性类型描述
spacingobject控制间距：如 before、after 和 line 等属性。
alignmentstring设置段落对齐方式（left、center、right 或 justify）。
borderobject定义段落周围的边框（顶部、底部、左侧、右侧）。
shadingobject为段落应用背景阴影。
indentobject指定缩进（首行、悬挂、左侧、右侧）。
contextualSpacingboolean如果为 true，则减少相同样式段落之间的间距。
keepNextboolean保持此段落与下一个段落在同一页面上。
keepLinesboolean保持段落的所有行在同一页面上。
outlineLevelnumber设置文档组织的轮廓级别（通常为 1-9）。
thematicBreaknumber如果设置为 true，则添加水平线断点。
rightTabStopnumber设置右侧制表符位置，单位为 twips。
leftTabStopnumber设置左侧制表符位置，单位为 twips。
numberingobject控制编号设置（如：引用、级别、自定义格式）。
numbering → referencestring编号样式引用 ID。
numbering → levelnumber编号层级（0 基）。
spacingobject控制段落的间距。
spacing → beforenumber段落之前的间距。
spacing → afternumber段落之后的间距。
spacing → linenumber段落内的行间距。
spacing → lineRuleLineRuleType定义行间距的计算方式。

有关更高级的样式选项和详细使用信息，您可以参考我们包中公开的 IParagraphStylePropertiesOptions 类型，或参考 docx 文档。

Tiptap 的导出默认样式

Tiptap 为导出的文档提供了合理的默认样式，但您可以通过提供自己的自定义样式来覆盖这些样式。这使您能够在文档之间创建一致的外观和感觉。

{
  paragraphStyles: [
    // 正常样式（大多数段落的默认样式）
    {
      id: 'Normal',
      name: 'Normal',
      run: {
        font: 'Aptos',
        size: pointsToHalfPoints(11),
      },
      paragraph: {
        spacing: {
          before: 0,
          after: pointsToTwips(10),
          line: lineHeightToDocx(1.15),
        },
      },
    },
    // 列表段落样式（用于项目符号和编号）
    {
      id: 'ListParagraph',
      name: 'List Paragraph',
      basedOn: 'Normal',
      quickFormat: true,
      run: {
        font: 'Aptos',
        size: pointsToHalfPoints(11),
      },
      paragraph: {
        spacing: {
          before: 0,
          after: pointsToTwips(2),
          line: lineHeightToDocx(1),
        },
      },
    },
    // 标题 1 样式
    {
      id: 'Heading1',
      name: 'Heading 1',
      basedOn: 'Normal',
      next: 'Normal',
      quickFormat: true,
      run: {
        font: 'Aptos Light',
        size: pointsToHalfPoints(16),
        bold: true,
        color: '2E74B5',
      },
      paragraph: {
        spacing: {
          before: pointsToTwips(12),
          after: pointsToTwips(6),
          line: lineHeightToDocx(1.15),
        },
      },
    },
    // 标题 2 样式
    {
      id: 'Heading2',
      name: 'Heading 2',
      basedOn: 'Normal',
      next: 'Normal',
      quickFormat: true,
      run: {
        font: 'Aptos Light',
        size: pointsToHalfPoints(14),
        bold: true,
        color: '2E74B5',
      },
      paragraph: {
        spacing: {
          before: pointsToTwips(12),
          after: pointsToTwips(6),
          line: lineHeightToDocx(1.15),
        },
      },
    },
    // 标题 3 样式
    {
      id: 'Heading3',
      name: 'Heading 3',
      basedOn: 'Normal',
      next: 'Normal',
      quickFormat: true,
      run: {
        font: 'Aptos',
        size: pointsToHalfPoints(13),
        bold: true,
        color: '2E74B5',
      },
      paragraph: {
        spacing: {
          before: pointsToTwips(12),
          after: pointsToTwips(6),
          line: lineHeightToDocx(1.15),
        },
      },
    },
    // 标题 4 样式
    {
      id: 'Heading4',
      name: 'Heading 4',
      basedOn: 'Normal',
      next: 'Normal',
      quickFormat: true,
      run: {
        font: 'Aptos',
        size: pointsToHalfPoints(12),
        bold: true,
        color: '2E74B5',
      },
      paragraph: {
        spacing: {
          before: pointsToTwips(12),
          after: pointsToTwips(6),
          line: lineHeightToDocx(1.15),
        },
      },
    },
    // 标题 5 样式
    {
      id: 'Heading5',
      name: 'Heading 5',
      basedOn: 'Normal',
      next: 'Normal',
      quickFormat: true,
      run: {
        font: 'Aptos',
        size: pointsToHalfPoints(11),
        bold: true,
        color: '2E74B5',
      },
      paragraph: {
        spacing: {
          before: pointsToTwips(12),
          after: pointsToTwips(6),
          line: lineHeightToDocx(1.15),
        },
      },
    },
    // 标题样式
    {
      id: 'Title',
      name: 'Title',
      basedOn: 'Normal',
      next: 'Normal',
      quickFormat: true,
      run: {
        font: 'Aptos Light',
        size: pointsToHalfPoints(22),
        bold: true,
        color: '000000',
      },
      paragraph: {
        alignment: AlignmentType.CENTER,
        spacing: {
          before: 0,
          after: 0,
          line: lineHeightToDocx(1.15),
        },
      },
    },
    // 副标题样式
    {
      id: 'Subtitle',
      name: 'Subtitle',
      basedOn: 'Normal',
      next: 'Normal',
      quickFormat: true,
      run: {
        font: 'Aptos Light',
        size: pointsToHalfPoints(16),
        italics: true,
        color: '666666',
      },
      paragraph: {
        alignment: AlignmentType.CENTER,
        spacing: {
          before: 0,
          after: 0,
          line: lineHeightToDocx(1.15),
        },
      },
    },
    // 引用样式（通常用于缩进的斜体文本）
    {
      id: 'Quote',
      name: 'Quote',
      basedOn: 'Normal',
      quickFormat: true,
      run: {
        font: 'Aptos',
        italics: true,
      },
      paragraph: {
        alignment: AlignmentType.CENTER,
        spacing: {
          before: pointsToTwips(10),
          after: pointsToTwips(10),
          line: lineHeightToDocx(1.15),
        },
      },
    },
    // 强烈引用样式（更明显的缩进）
    {
      id: 'IntenseQuote',
      name: 'Intense Quote',
      basedOn: 'Normal',
      quickFormat: true,
      run: {
        font: 'Aptos',
        italics: true,
        color: '444444',
      },
      paragraph: {
        alignment: AlignmentType.CENTER,
        spacing: {
          before: pointsToTwips(10),
          after: pointsToTwips(10),
          line: lineHeightToDocx(1.15),
        },
      },
    },
    // 无间距样式（段落前后没有额外空间）
    {
      id: 'NoSpacing',
      name: 'No Spacing',
      basedOn: 'Normal',
      quickFormat: true,
      paragraph: {
        spacing: {
          before: 0,
          after: 0,
          line: lineHeightToDocx(1),
        },
      },
    },
    // 超链接样式
    {
      id: 'Hyperlink',
      name: 'Hyperlink',
      basedOn: 'Normal',
      run: {
        color: '0563C1',
        underline: {
          type: 'single',
        },
      },
    },
  ],
}