Skip to main content

Tiptap 在服务器端进行内容格式转换

在 NestJS 服务端将 Tiptap 的 JSON 内容转换为 Markdown，有两种推荐方式，使用官方 @tiptap/markdown 扩展。

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

先确保安装：

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

然后在 Service 中创建 MarkdownManager 实例：

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 或其他地方）：

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，也可以这样：

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（支持表格、任务列表等），配置： 
    Markdown.configure({
      markedOptions: { gfm: true },
    })
  • 自定义扩展需要实现 renderMarkdown 来正确序列化（参考官方文档）。
  • 避免先转 HTML 再转 Markdown（容易丢失格式，如表格），直接用以上方式最准确。

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