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

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

推荐方式 1:使用 MarkdownManager(无需创建完整 Editor 实例,最适合纯服务端转换)

先确保安装:

bash 复制代码
npm install @tiptap/markdown @tiptap/starter-kit
# 如果有其他扩展(如 Image、Table 等),一并安装

然后在 Service 中创建 MarkdownManager 实例:

typescript 复制代码
import { Injectable } from '@nestjs/common';
import { MarkdownManager } from '@tiptap/markdown';
import StarterKit from '@tiptap/starter-kit';
import { Markdown } from '@tiptap/markdown'; // 需要导入 Markdown 扩展本身
// 导入其他扩展...
// import Image from '@tiptap/extension-image';
// import Table from '@tiptap/extension-table';
// 等

const extensions = [
  StarterKit,
  Markdown, // 必须包含 Markdown 扩展来启用序列化
  // Image,
  // Table,
  // 其他扩展...
];

const markdownManager = new MarkdownManager({
  extensions, // 传递所有 extensions,包括 Markdown
});

@Injectable()
export class TiptapService {
  // JSON → Markdown
  jsonToMarkdown(json: any): string {
    return markdownManager.serialize(json);
  }

  // 额外:如果需要 Markdown → JSON
  markdownToJson(markdown: string): any {
    return markdownManager.parse(markdown);
  }
}

使用示例(在 Controller 或其他地方):

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

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

推荐方式 2:创建 headless Editor 实例(兼容性好,editor.getMarkdown())

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

typescript 复制代码
import { Editor } from '@tiptap/core';
import StarterKit from '@tiptap/starter-kit';
import { Markdown } from '@tiptap/markdown';
// 其他扩展...

const extensions = [
  StarterKit,
  Markdown, // 必须包含
  // 其他...
];

@Injectable()
export class TiptapService {
  jsonToMarkdown(json: any): string {
    const editor = new Editor({
      extensions,
      content: json, // 直接传入 JSON
      element: null, // 关键:服务端不绑定 DOM
    });

    const markdown = editor.getMarkdown();

    editor.destroy(); // 用完销毁,避免内存泄漏

    return markdown;
  }
}

注意事项

  • 必须在 extensions 中包含 Markdown 扩展,否则 getMarkdown()serialize() 不生效。

  • 如果需要 GitHub Flavored Markdown(支持表格、任务列表等),配置:

    typescript 复制代码
    Markdown.configure({
      markedOptions: { gfm: true },
    })
  • 自定义扩展需要实现 renderMarkdown 来正确序列化(参考官方文档)。

  • 避免先转 HTML 再转 Markdown(容易丢失格式,如表格),直接用以上方式最准确。

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

相关推荐
亮子AI25 天前
【Tiptap】Tiptap 和 ProseMirror 选哪个?
tiptap
亮子AI1 个月前
【Tiptap】如何使用 ordered list?
数据结构·list·tiptap
亮子AI1 个月前
【Tiptap】怎样高效存储内容?
tiptap
亮子AI1 个月前
【Tiptap】怎样输入/粘贴 Markdown 到编辑器里?
编辑器·tiptap
亮子AI1 个月前
【Tiptap】如何实现增量更新?
tiptap
HBR666_3 个月前
AI编辑器(FIM补全,AI扩写)简介
前端·ai·编辑器·fim·tiptap
HBR666_3 个月前
AI编辑器(二) ---调用模型的fim功能
前端·ai·编辑器·fim·tiptap
不老刘5 个月前
Tiptap(基于 Prosemirror)vs TinyMCE:哪个更适合你的技术栈?
编辑器·tinymce·tiptap·prosemirror