IT小书童 - 为程序员提供优质教程和文档

HardBreak 节点功能相当于 html 里面的 br 标签。

Document 是 tiptap 编辑器的根节点，任何节点都在该节点下面，就像 html 的 body 标签。

使用 CodeBlockLowlight 代码高亮扩展，你可以在文档中显示源代码而不被浏览器解析，代码包裹在HTML标记的 pre 和code 标签中，并且可以让代码高亮。

使用 CodeBlock 代码块扩展，你可以在文档中显示源代码而不被浏览器解析，代码包裹在HTML标记的 pre 和code 标签中。

tiptap BulletList 扩展可以在编辑器中使用符号列表，它们被呈现为 HTML的 ul 标记。

本文讲解的Blockquote扩展够在tiptap编辑器中使用html的blockquote标签，在新行开头输入箭头，它将神奇地转换为blockquote标签。

如果将编辑器document文档比喻成一棵树tree，那么nodes节点就是树中的一种内容,paragraphs、headings或code blocks都是节点.，但节点不一定是块。它们也可以与文本内联呈现，例如@mentions 扩展。

我们在使用web编辑器时往往需要 extensions 自定义扩展，因为如何一款web编辑器自带的扩展都不可能满足场景的需求，tiptap 可以这种个性化的需求有两种方法，一是按照官方的方法实现扩展，一种是自己写vue组件调用tiptap命令，这样也可以非常方便的集成到tiptap。

tiptap selection 相关的命令focus、selectAll、deleteSelection等和焦点相关的命令、选择相关的命令。

tiptap lists 命令相关的命令列表以及对应的用法，比如liftListItem 提升列的项、sinkListItem 降级列的项、splitListItem 拆分列的项等等。

tiptap nodes节点 & marks标记的命令大全，比如deleteNode删除文档节点命令、创建setMark 标记命令等总计20多个相关命令。

tiptap content 文档命令包含clearContent 清除文档、insertContent 插入内容、insertContentAt 插入制定位置内容、setContent 设置新的内容等核心命令。

tiptap编辑器提供了大量命令Commands，可以添加或更改内容、更改选择。如果你想用好tiptap编辑器，你需要掌握这些命令。

本文将讲解如何配置 tiptap 编辑器，其中包括如何初始化、加载配置扩展、样式的配置方法。

tiptap 拥有 isEditable 和 isEmpty 两个属性，一个表示是否可编辑一个表示编辑器是否有内容。

tiptap 编辑器的 editor 方法的可以返回任何内容，请勿与commands命令混淆，commands 用于更改编辑器的状态（内容、选择内容等），并且仅返回true/false。

tiptap 支持实时协作、让不同设备之间的同步和离线工作。通过与 Y.js 配合使用无需多少代码即可实现多人在线实时协作，不过在大部分的实践工作中，实时协作并不是一个强需求。

Titpap Output 支持输出JSON对象或Html字符串存储编辑器的内容，我们将来在下面的例子演示如何使用这两种格式。

Titpap 编辑器由于是 headless 所以它没有提供任何样式，这意味我们可以完全控制 Titap 的样式，我们可以通过作用域内或全局 CSS 来控制样式也可以自定义 class 来定制样式。

tiptap 编辑器非常简洁，你可以完全的定制它的外观，菜单也一样。tiptap提供的 API 来触发命令和添加活动状态，tiptap提供了一些实用程序和组件使菜单的定位更容易。