tiptap parseHTML renderHTML 使用

要在 Tiptap 中使用 parseHTML 和 renderHTML，可以通过创建自定义扩展来解析和渲染自定义的 HTML 元素。这两个方法允许你定义如何将 HTML 解析为 ProseMirror 文档节点以及如何将 ProseMirror 的文档节点渲染为 HTML。

1. parseHTML

parseHTML 用于将 HTML 元素解析为 ProseMirror 节点。在自定义扩展中，你可以定义如何将特定的 HTML 元素解析为 Tiptap 的文档节点。

2. renderHTML

renderHTML 用于将 ProseMirror 节点渲染回 HTML。你可以在自定义扩展中定义如何将 ProseMirror 节点渲染为 HTML 标签。

以下是一个简单的示例，展示了如何创建一个自定义扩展来解析和渲染一个自定义的 figure 元素：

import { Node, mergeAttributes } from '@tiptap/core';

const FigureNode = Node.create({
  name: 'figure',

  group: 'block',

  content: 'inline*',

  // 使用 parseHTML 解析 HTML
  parseHTML() {
    return [
      {
        tag: 'figure',
      },
    ];
  },

  // 使用 renderHTML 渲染回 HTML
  renderHTML({ HTMLAttributes }) {
    return ['figure', mergeAttributes(HTMLAttributes), 0];
  },

  // 定义 ProseMirror schema
  addAttributes() {
    return {
      class: {
        default: null,
      },
    };
  },

  // 定义编辑器中的样式
  addNodeView() {
    return ({ node, HTMLAttributes }) => {
      const dom = document.createElement('figure');
      dom.classList.add(node.attrs.class);
      return {
        dom,
      };
    };
  },
});

export default FigureNode;

要使用这个扩展，需要在 Tiptap 的编辑器配置中注册这个自定义节点：

import { Editor } from '@tiptap/core';
import StarterKit from '@tiptap/starter-kit';
import FigureNode from './FigureNode';

const editor = new Editor({
  element: document.querySelector('#editor'),
  extensions: [
    StarterKit,
    FigureNode,
  ],
  content: '
Hello World!
',
});

解析和渲染

• 解析 HTML:
  当 Tiptap 编辑器加载带有

  标签的内容时，它会使用 parseHTML 方法来解析它，并将其转换为ProseMirror 的节点。

• 渲染 HTML:
  当你将 ProseMirror 文档节点导出为 HTML 时，Tiptap 会调用 renderHTML 方法来生成最终的 HTML。

parseHTML 配置说明

parseHTML() {
  return [
    {
      tag: 'figure',
    },
  ];
}

这里的 tag: ‘figure’ 告诉 Tiptap 当它在编辑器中遇到

标签时，应当将其解析为自定义的 ProseMirror 节点。

HTML 内容加载/粘贴: 当你将一段包含

标签的 HTML 内容加载到 Tiptap 编辑器中时，Tiptap 的解析器会检查所有的 parseHTML 配置。

匹配标签: 如果在 parseHTML 中找到了与 HTML 内容匹配的标签（如

），Tiptap 会使用该配置将该 HTML 标签解析为自定义节点（如 FigureNode）。

生成节点: Tiptap 会生成相应的 ProseMirror 节点，这些节点会存储在编辑器的文档结构中，并以内部的方式表示和操作。

例如，假设你在编辑器中粘贴以下 HTML：

<figure class="image">
  <img src="image.jpg" alt="An image">
</figure>

由于 parseHTML 方法配置了 tag: ‘figure’，Tiptap 会识别

标签，并将其解析为相应的 ProseMirror 节点。这意味着在编辑器内部，这段 HTML 会被表示为一个包含 img 的 figure 节点。

高级配置
还可以为 parseHTML 返回的对象添加其他条件，例如根据特定的属性或类名进行匹配：

parseHTML() {
  return [
    {
      tag: 'figure.image',
      getAttrs: node => node.classList.contains('image') && null,
    },
  ];
}

在上面的例子中，Tiptap 只会在

标签上有 .image 类名时才解析它。

总结

parseHTML 中返回的对象在 HTML 内容解析过程中扮演着识别器的角色，Tiptap 通过这些对象来确定哪些 HTML 标签应该被转换为 ProseMirror 节点。这个过程使得你能够扩展和定制 Tiptap 编辑器，以支持特定的 HTML 结构和标签。