使用 Tiptap 进行输出和内容处理

Editor

您可以将内容存储为 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: [
    // …
  ],
})

这里是一个交互示例，您可以在其中看到这一操作：

选项 2：HTML

HTML 可以轻松地在其他地方渲染，例如在电子邮件中，它被广泛使用，所以在某个时刻切换编辑器可能会更容易。无论如何，每个编辑器实例提供了一种方法，可以从当前文档中获取 HTML：

const html = editor.getHTML()

然后，这可以用于最初恢复文档：

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

或者，如果您想稍后恢复内容（例如，在 API 调用完成后），也可以做到这一点：

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

使用这个交互示例进行实验：

选项 3：Y.js

我们的编辑器对 Y.js 提供了顶级支持，非常适合添加实时协作、离线编辑或设备间同步等功能。

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

当然，您可以导入现有的 JSON 文档以开始，并从 Y.js 中获取 JSON，但这更像是输入/输出格式。它不会成为您的唯一来源。这一点在添加 Y.js 以实现上述用例时非常重要。

话虽如此，Y.js 的功能很强大，我们即将提供一个出色的后端，使所有操作都变得轻而易举。

Markdown

Tiptap 已经为 Markdown 提供了导入、导出和 REST API 转换（包括 GitHub 风格的 Markdown）。这让您可以：

将 .md 或 GFM 文件导入 Tiptap 编辑器，将其转换为 Tiptap JSON
导出 Tiptap JSON 为标准 Markdown 或 GFM，让您将编辑器内容保存或分享为 .md 文件。
集成服务器端（无需编辑器）通过我们的转换 REST API 发送或检索 .md 内容。

有关如何处理其他 Markdown 特性的详细信息，以及编辑器内工作流程和服务器端使用的示例，请参见 Markdown 转换。

Tiptap v3 将深化对 Markdown 的支持。 我们致力于使 Markdown 更加稳健并更易于集成，以满足高级（AI）用例。

如果您希望将 ProseMirror JSON 转换为 Markdown，可以使用 @tiptap/static-renderer 包，该包可以将 ProseMirror JSON 转换为 Markdown。有关更多信息和示例，请参见它的文档。

监听更改

如果您希望在人们写作时持续存储更新的内容，可以挂钩事件。这里是一个可能的示例：

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

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

渲染

选项 1：只读实例的 Tiptap

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

选项 2：从 ProseMirror JSON 生成 HTML

如果您需要在服务器端渲染内容，例如生成已在 Tiptap 中编写的博文的 HTML，您可能希望在没有实际编辑器实例的情况下完成此操作。

这就是 generateHTML() 的用途。它是一个助手函数，可以在没有实际编辑器实例的情况下渲染 HTML。

顺便说一下，另一种方式也是可行的。以下示例展示了如何从 HTML 生成 JSON。

选项 3：静态渲染器

从 ProseMirror JSON 生成 HTML、React 元素或 Markdown

如果您希望以静态方式渲染内容，例如在博文中，可以使用 @tiptap/static-renderer 包。它可以将 ProseMirror JSON 转换为 HTML、React 元素或 Markdown。

npm install @tiptap/static-renderer

要了解有关静态渲染器的更多信息，请查看静态渲染器文档。

迁移

从 Draft.js

如果您正在从 Draft.js 迁移到 Tiptap，您可能已经将内容存储为 JSON。这很好，因为 Tiptap 可以通过 draft-js-to-tiptap 包处理它。有关更多信息和示例，请参见它的文档。

其他

如果您正在将现有内容迁移到 Tiptap，我们建议将您现有的输出转换为 HTML。这可能是将初始内容引入 Tiptap 的最佳格式，因为 ProseMirror 确保其中没有错误。即使有一些不允许的标签或属性（基于您的配置），Tiptap 也会默默地将它们剔除。

我们将逐步提供一些案例以帮助实现这一点，例如我们提供一个 PHP 包来将 HTML 转换为兼容的 JSON 结构：ueberdosis/prosemirror-to-html。

与我们分享您的经验！我们希望在这里添加更多信息。

安全

没有理由因为安全原因而使用其中一种格式。如果有人想向您的服务器发送恶意内容，无论是 JSON 还是 HTML 都无关紧要。您使用 Tiptap 与否都无关紧要。您应该始终验证用户输入。