HTML 实用工具

HTML 实用工具可以帮助将 JSON 内容渲染为 HTML，并在没有编辑器实例的情况下从 HTML 生成 JSON，适合服务器端操作。所需的仅仅是 JSON 或 HTML 字符串，以及扩展列表。

从 JSON 生成 HTML

给定一个 JSON 对象，表示一个 prosemirror 文档，generateHTML 函数将返回一个 string 对象，表示 JSON 内容。该函数接受两个参数：JSON 对象和扩展列表。

/* 仅限浏览器使用 - 请参见下面的服务器端兼容包 */
import { generateHTML } from '@tiptap/core'

// 从 JSON 生成 HTML
generateHTML(
  {
    type: 'doc',
    content: [{ type: 'paragraph', content: [{ type: 'text', text: '仅在浏览器上' }] }],
  },
  [
    Document,
    Paragraph,
    Text,
    Bold,
    // 其他扩展 …
  ],
)
// `<p>仅在浏览器上</p>`

/* 服务器或浏览器使用 - 请参见上面浏览器专用兼容包 (更少的 JS) */
import { generateHTML } from '@tiptap/html'

// 从 JSON 生成 HTML
generateHTML(
  {
    type: 'doc',
    content: [
      { type: 'paragraph', content: [{ type: 'text', text: '在服务器上，或在浏览器上' }] },
    ],
  },
  [
    Document,
    Paragraph,
    Text,
    Bold,
    // 其他扩展 …
  ],
)
// `<p>在服务器上，或在浏览器上</p>`

注意

有两个可用的导出：来自 @tiptap/core 的 generateHTML 和来自 @tiptap/html 的 generateHTML。前者仅供浏览器使用，后者可以在服务器或浏览器上使用。确保根据您的用例使用正确的一个。在服务器端，使用虚拟 DOM 来生成 HTML。因此，使用 @tiptap/core 可以减少代码量，如果您不需要服务器端功能。

从 HTML 生成 JSON

给定一个 HTML 字符串，generateJSON 函数将返回一个 JSON 对象，表示 HTML 内容作为 prosemirror 文档。该函数接受两个参数：HTML 字符串和扩展列表。

/* 仅限浏览器使用 - 请参见下面的服务器端兼容包 */
import { generateJSON } from '@tiptap/core'

// 从 HTML 生成 JSON
generateJSON(`<p>仅在浏览器上</p>`, [
  Document,
  Paragraph,
  Text,
  Bold,
  // 其他扩展 …
])
// { type: 'doc', content: [{ type: 'paragraph', content: [{ type: 'text', text: '仅在浏览器上' }] }] }

/* 服务器或浏览器使用 - 请参见上面浏览器专用兼容包 (更少的 JS) */
import { generateJSON } from '@tiptap/html'

// 从 HTML 生成 JSON
generateJSON(`<p>在服务器上，或在浏览器上</p>`, [
  Document,
  Paragraph,
  Text,
  Bold,
  // 其他扩展 …
])
// { type: 'doc', content: [{ type: 'paragraph', content: [{ type: 'text', text: '在服务器上，或在浏览器上' }] }] }

注意

有两个可用的导出：来自 @tiptap/core 的 generateJSON 和来自 @tiptap/html 的 generateJSON。前者仅供浏览器使用，后者可以在服务器或浏览器上使用。确保根据您的用例使用正确的一个。在服务器端，使用虚拟 DOM 来生成 HTML。因此，使用 @tiptap/core 可以减少代码量，如果您不需要服务器端功能。

源代码

packages/html/