创建自定义节点视图

节点视图就像切片面包以来最棒的事情，至少如果你是一个喜欢自定义（以及面包）的人。通过节点视图，您可以向编辑器添加交互式节点。这实际上可以是任何东西。如果你能用 JavaScript 编写它，就可以在你的编辑器中使用它。

节点视图极大地改善了编辑器内的体验，但也可以在 Tiptap 的只读实例中使用。它们在设计上与输出的 HTML 无关，因此您可以完全控制编辑器内的体验 和 输出。

不同类型的节点视图

根据您想要构建的内容，节点视图的工作方式略有不同，且具有其特定的功能，但也可能存在陷阱。主要问题是：您的自定义节点应该是什么样子的？

可编辑文本

是的，节点视图可以拥有可编辑的文本，就像普通节点一样。这很简单。光标的行为就像您对普通节点的预期一样。现有的命令与这些节点的配合使用良好。

<div class="Prosemirror" contenteditable="true">
  <p>文本</p>
  <node-view>文本</node-view>
  <p>文本</p>
</div>

这就是 TaskItem 节点的工作方式。

不可编辑文本

节点也可以包含不可编辑的文本。光标无法跳入这些文本，您本来也不想要这样。

Tiptap 默认会为这些节点添加 contenteditable="false"。

<div class="Prosemirror" contenteditable="true">
  <p>文本</p>
  <node-view contenteditable="false">文本</node-view>
  <p>文本</p>
</div>

这就是您如何渲染不应可编辑的提及。用户可以添加或删除它们，但不能逐个字符地删除。

Statamic 为他们的 Bard 编辑器使用了这些渲染模块，该模块在 Tiptap 内部渲染复杂的模块，可以有自己的文本输入。

混合内容

您甚至可以混合不可编辑和可编辑的文本。这非常适合构建复杂的内容，同时仍然可以在可编辑内容中使用加粗和斜体等样式。

但，如果节点视图中有其他不可编辑文本的元素，光标可以跳入那里。您可以通过手动为节点视图的特定部分添加 contenteditable="false" 来改善这一点。

<div class="Prosemirror" contenteditable="true">
  <p>文本</p>
  <node-view>
    <div contenteditable="false">不可编辑文本</div>
    <div>可编辑文本</div>
  </node-view>
  <p>文本</p>
</div>

标记

那么，如果您 访问编辑器内容 会发生什么呢？如果您正在处理 HTML，则需要告诉 Tiptap 如何序列化您的节点。

编辑器 不会 导出渲染的 JavaScript 节点，并且在很多使用案例中，您可能也不希望那样。

假设您有一个节点视图，允许用户添加视频播放器并配置外观（自动播放、控件等）。您希望在编辑器中处理该界面，而不是在编辑器的输出中。编辑器的输出可能只应该包含视频播放器。

我知道，我知道，这并不简单。请记住，您完全控制编辑器内部的渲染以及输出。

渲染 HTML

好的，您已经设置了一个交互式节点视图，现在想要控制输出。即使您的节点视图非常复杂，渲染的 HTML 也可以是简单的：

renderHTML({ HTMLAttributes }) {
  return ['my-custom-node', mergeAttributes(HTMLAttributes)]
},

// 输出: <my-custom-node count="1"></my-custom-node>

确保它是可区分的，这样可以更轻松地从 HTML 中恢复内容。如果您只需要类似 <div> 的通用标记，建议添加 data-type="my-custom-node"。

解析 HTML

对于恢复内容，情况也是如此。您可以配置期待的标记，这可以是与节点视图标记完全无关的内容。它只需要包含您想要恢复的所有信息。

如果您通过 addAttributes 注册了属性，则属性会自动恢复。

// 输入: <my-custom-node count="1"></my-custom-node>

parseHTML() {
  return [{
    tag: 'my-custom-node',
  }]
},

渲染 JavaScript/Vue/React

但是如果你想渲染你实际的 JavaScript/Vue/React 代码呢？使用 静态渲染器。这个工具可以让你将内容渲染为 HTML、Markdown 或 React 组件，而无需 Editor 实例。