当前位置：首页 > news >正文

【Tiptap】在服务器端使用 Tiptap 内容格式转换

news 2026/3/26 23:19:35

在 Node.js 环境将 Tiptap 的 JSON 内容转换为 Markdown，有两种推荐方式，使用官方@tiptap/markdown扩展（最新版本支持良好）。

推荐方式 1：使用 MarkdownManager（无需创建完整 Editor 实例，最适合纯服务端转换）

先确保安装：

npminstall@tiptap/markdown @tiptap/starter-kit# 如果有其他扩展（如 Image、Table 等），一并安装

然后在 Service 中创建 MarkdownManager 实例：

import{Injectable}from'@nestjs/common';import{MarkdownManager}from'@tiptap/markdown';importStarterKitfrom'@tiptap/starter-kit';import{Markdown}from'@tiptap/markdown';// 需要导入 Markdown 扩展本身// 导入其他扩展...// import Image from '@tiptap/extension-image';// import Table from '@tiptap/extension-table';// 等constextensions=[StarterKit,Markdown,// 必须包含 Markdown 扩展来启用序列化// Image,// Table,// 其他扩展...];constmarkdownManager=newMarkdownManager({extensions,// 传递所有 extensions，包括 Markdown});@Injectable()exportclassTiptapService{// JSON → MarkdownjsonToMarkdown(json:any):string{returnmarkdownManager.serialize(json);}// 额外：如果需要 Markdown → JSONmarkdownToJson(markdown:string):any{returnmarkdownManager.parse(markdown);}}

使用示例（在 Controller 或其他地方）：

constjsonFromDB={type:'doc',content:[...]};// 从数据库取的 Tiptap JSONconstmarkdown=this.tiptapService.jsonToMarkdown(jsonFromDB);// markdown 就是字符串，如 "# Title\n\n**Bold** text"

这种方式完全服务端兼容、无 DOM 依赖、最轻量高效。

推荐方式 2：创建 headless Editor 实例（兼容性好，editor.getMarkdown()）

如果你已经在其他地方用了 Editor，也可以这样：

import{Editor}from'@tiptap/core';importStarterKitfrom'@tiptap/starter-kit';import{Markdown}from'@tiptap/markdown';// 其他扩展...constextensions=[StarterKit,Markdown,// 必须包含// 其他...];@Injectable()exportclassTiptapService{jsonToMarkdown(json:any):string{consteditor=newEditor({extensions,content:json,// 直接传入 JSONelement:null,// 关键：服务端不绑定 DOM});constmarkdown=editor.getMarkdown();editor.destroy();// 用完销毁，避免内存泄漏returnmarkdown;}}

注意事项：

必须在 extensions 中包含Markdown扩展，否则getMarkdown()或serialize()不生效。
如果需要 GitHub Flavored Markdown（支持表格、任务列表等），配置：
```
Markdown.configure({markedOptions:{gfm:true},})
```
自定义扩展需要实现renderMarkdown来正确序列化（参考官方文档）。
避免先转 HTML 再转 Markdown（容易丢失格式，如表格），直接用以上方式最准确。