抠丁客 抠丁客
项目
编辑 (2024/6/19)

tiptap 输出

引言

你可以将内容存储为 JSON 对象，或者像老式的 HTML 字符串一样。两者都能很好地工作。当然，你也可以将这两种格式传递给编辑器，以便恢复内容。这是一个互动示例，当文档更改时，它会导出内容为 HTML 和 JSON：

导出

选项 1：JSON

JSON 可能更容易遍历，例如查找提及，而且更接近 Tiptap 内部的实现方式。无论怎样，如果你想使用 JSON 存储内容，我们提供了一个方法来获取 JSON 格式的内容：

const json = editor.getJSON();

你可以将这些内容存储在数据库（或发送到 API）中，并在初始时恢复文档：

new Editor({
  content: {
    type: "doc",
    content: [
      // …
    ],
  },
});

如果你需要等待某些操作完成，稍后可以通过编辑器实例进行：

editor.commands.setContent({
  type: "doc",
  content: [
    // …
  ],
});

这里有一个互动示例，展示如何操作：

https://embed.tiptap.dev/preview/GuideContent/ExportJSON?hideSource

选项 2：HTML

HTML 可以轻松地在其他地方渲染，例如电子邮件，并且被广泛使用，因此在某个时候切换编辑器可能更容易。每个编辑器实例都提供从当前文档获取 HTML 的方法：

const html = editor.getHTML();

然后可以用于初始恢复文档：

new Editor({
  content: "<p>示例文本</p>",
});

如果你想稍后恢复内容（例如在 API 调用完成后），也可以这样做：

editor.commands.setContent("<p>示例文本</p>");

使用这个互动示例进行操作：

https://embed.tiptap.dev/preview/GuideContent/ExportHTML?hideSource

选项 3：Y.js

我们的编辑器对 Y.js 支持极佳，这使得实时协作、离线编辑或设备间同步等功能变得非常棒。

内部，Y.js 会存储所有更改的历史记录。可以在浏览器中、服务器上、与其他连接的客户端同步，甚至在 USB 闪存驱动器上。但重要的是要知道，Y.js 需要这些存储的变化。简单的 JSON 文档不足以合并更改。

当然，你可以导入现有的 JSON 文档开始，然后从 Y.js 中获取 JSON，但这更像是导入/导出格式，而不是单一来源。在添加 Y.js 以满足上述某项用途时，这一点很重要。

话虽如此，Y.js 是惊人的，我们即将提供一个出色的后端，使这一切变得简单。

不适用选项：Markdown

不幸的是，Tiptap 不支持 Markdown 作为输入或输出格式。我们考虑过添加支持，但我们决定不这么做，原因如下：

  • 无论是 HTML 还是 JSON，都可以有深度嵌套的结构，而 Markdown 是扁平的。
  • Markdown 标准各不相同。
  • Tiptap 的优势在于定制化，这与 Markdown 不太兼容。
  • 已经有足够的包可以将 HTML 转换为 Markdown，反之亦然。

你应该认真考虑使用 HTML 或 JSON 来存储内容，它们在大多数情况下都非常合适。

如果你仍然认为需要 Markdown，ProseMirror 有一个 处理 Markdown 的示例，Nextcloud Text 使用 Tiptap 1 来处理 Markdown。或许你可以从中学习。如果你正在寻找一个非常好的 Markdown 编辑器，试试 CodeMirror。

尽管如此，Tiptap 支持 Markdown 快捷键，用于格式化内容。你也可以自由地让你的内容看起来像 Markdown，例如在 <h1> 前面加上 #，通过 CSS 实现。

监听更改

如果你想在人们写作时持续存储更新的内容，可以 监听事件。以下是这可能如何实现的一个例子：

const editor = new Editor({
  // 初始内容
  content: "<p>示例内容</p>",

  // 每次更改都会触发
  onUpdate: ({ editor }) => {
    const json = editor.getJSON();
    // 将内容发送到 API 这里
  },
});

渲染

选项 1：只读 Tiptap 实例

要渲染保存的内容，设置编辑器为只读模式。这样就可以实现与编辑器完全相同的渲染效果，而无需复制你的 CSS 和其他代码。

https://embed.tiptap.dev/preview/GuideContent/ReadOnly

选项 2：从 ProseMirror JSON 生成 HTML

如果你需要在服务器端渲染内容，例如生成博客文章的 HTML，该文章是使用 Tiptap 编写的，那么你可能只想这样做，而不需要实际的编辑器实例。

这就是 generateHTML() 的作用。这是一个辅助函数，可以在没有实际编辑器实例的情况下生成 HTML。

https://embed.tiptap.dev/preview/GuideContent/GenerateHTML

顺便说一句，反过来也是可能的。下面的示例展示了如何从 HTML 生成 JSON。

https://embed.tiptap.dev/preview/GuideContent/GenerateJSON

迁移

如果你正在将现有内容迁移到 Tiptap，我们建议将现有的输出转换为 HTML。这可能是将初始内容引入 Tiptap 的最佳格式，因为 ProseMirror 会确保内容没有任何问题。即使有一些标签或属性不符合你的配置（基于你的配置），Tiptap 也会安静地忽略它们。

我们将讨论一些情况，以帮助你处理这个问题，例如我们提供了一个 PHP 包，可以将 HTML 转换为兼容的 JSON 结构：ueberdosis/prosemirror-to-html。

与我们分享你的经验！ 我们想在这里添加更多信息。

安全性

出于安全考虑，选择 JSON 或 HTML 没有任何理由。如果有人想向你的服务器发送恶意内容，那无关乎它是 JSON 还是 HTML，甚至是否使用了 Tiptap。始终应该验证用户输入。

在本文档中