Tiptap 是一个非常原始的编辑器，但这是一件好事。你对编辑器的外观有完全的控制权。

当我们说完全控制时，我们的意思就是，你可以（并且必须）自己构建菜单，尽管 Tiptap 会帮助你将一切连接起来。

菜单

编辑器提供了一个流畅的 API 来触发命令和添加激活状态。你可以使用任何你喜欢的标记。为了简化菜单定位，Tiptap 提供了一些实用工具和组件。让我们逐一了解最常见的用例。

固定菜单

固定菜单是指永久位于某个位置的菜单。例如，将固定菜单放置在编辑器上方是很常见的。Tiptap 并没有提供固定菜单，但你可以通过创建一个 <div> 元素，并用 <button> 元素填充它来构建一个。查看下文了解如何让这些按钮触发编辑器中的 命令，例如加粗或斜体化文本。

气泡菜单

气泡菜单是在选择文本时出现的菜单。标记和样式完全由你决定。

浮动菜单

浮动菜单是当你将光标放置在空白行上时，在编辑器中出现的菜单。再次强调，标记和样式完全由你决定。

斜杠命令（进行中）

尽管目前还没有官方扩展，但有一个实验，允许你使用“斜杠命令”。通过斜杠命令，在新行开始时输入 / 将显示一个弹出菜单。

按钮

好了，你已经有了菜单。那么如何将它们连接起来呢？

命令

你已经运行了编辑器并想添加你的第一个按钮。你需要一个 <button> HTML 标签和一个点击处理函数。根据你的设置，可能如下所示：

  1. <button onclick="editor.chain().focus().toggleBold().run()">加粗</button>

哦，这个命令有点长，对吧？实际上，这是一个命令链。让我们逐一解析：

  1. editor.chain().focus().toggleBold().run()
  1. editor 应该是 Tiptap 实例，
  2. chain() 用于告诉编辑器你想执行多个命令，
  3. focus() 将焦点设置回编辑器，
  4. toggleBold() 将选中的文本加粗。如果文本已经是加粗的，它将取消加粗。
  5. run() 将执行这个命令链。

换句话说：这将是一个典型的 加粗 按钮，适用于你的文本编辑器。

可用的命令取决于注册到编辑器中的扩展。大多数扩展都提供了 set…()、unset…() 和 toggle…() 命令。阅读扩展文档，查看实际提供了哪些命令，或者在代码编辑器中使用自动补全查看。

保持焦点

你已经在上面的示例中看到了 focus() 命令。当你点击按钮时，浏览器会将焦点设置到该 DOM 元素上，编辑器会失去焦点。你很可能希望将 focus() 添加到所有菜单按钮中，这样就不会打断用户的写作流程。

激活状态

编辑器提供了 isActive() 方法来检查选中文本是否已经应用了某个属性。在 Vue.js 中，你可以借助这个函数来切换 CSS 类：

  1. <button
  2.   :class="{ 'is-active': editor.isActive('bold') }"
  3.   @click="editor.chain().focus().toggleBold().run()"
  4. >
  5.   加粗
  6. </button>

这会切换节点和标记的 .is-active 类。你甚至可以检查特定的属性。以下是一个使用 Highlight 标记的示例，它会忽略不同的属性：

  1. editor.isActive('highlight')

还有一个示例，比较给定的属性：

  1. editor.isActive('highlight', { color: '#ffa8a8' })

甚至支持正则表达式：

  1. editor.isActive('textStyle', { color: /.*/ })

你甚至可以只检查节点和标记的属性。以下是一个使用 TextAlign 扩展的示例：

  1. editor.isActive({ textAlign: 'right' })

如果你的选区跨越多个节点或标记，或者只有部分选区有标记，isActive() 会返回 false，表示没有任何东西处于激活状态。这种行为是故意的，因为它允许用户立即将新节点或标记应用到选区。

用户体验

在设计良好的用户体验时，你应该考虑以下几个方面。

可访问性

图标

大多数编辑器菜单使用图标作为按钮。在我们的一些演示中，我们使用了开源图标集 Remix Icon。然而，你可以使用任何你喜欢的图标集。以下是一些建议：