蚌埠市网站建设_网站建设公司_UI设计_seo优化
2026/1/16 20:15:12 网站建设 项目流程

在 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(容易丢失格式,如表格),直接用以上方式最准确。

这样就能在 NestJS 服务端安全地将 Tiptap JSON 转换为 Markdown 了。更多细节见官方文档:https://tiptap.dev/docs/editor/markdown

需要专业的网站建设服务?

联系我们获取免费的网站建设咨询和方案报价,让我们帮助您实现业务目标

立即咨询