在 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(支持表格、任务列表等),配置:
typescriptMarkdown.configure({ markedOptions: { gfm: true }, }) -
自定义扩展需要实现
renderMarkdown来正确序列化(参考官方文档)。 -
避免先转 HTML 再转 Markdown(容易丢失格式,如表格),直接用以上方式最准确。
这样就能在 NestJS 服务端安全地将 Tiptap JSON 转换为 Markdown 了。更多细节见官方文档:https://tiptap.dev/docs/editor/markdown