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

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提供了一些实用程序和组件使菜单的定位更容易。

Tiptap编辑器是建立在ProseMirror之上的，ProseMirror有非常强大的API。Tiptap提供了@tiptap/pm包与之匹配，你无需手动安装这些包。

Tiptap 编辑器的配置相关的知识，包含了如何初始化、扩展的配置及使用方法等，我们也将配合在线例子进行说明。

在实际应用场景中，需要从外部比如开发工具的工具栏，拖入到画布（布局）中，vue3-drr-grid-layout 并不能直接实现这个功能，需要我们自己去实现，本文案例将演示该功能。

vue3-drr-grid-layout 的单元格有move拖动中和moved拖动完成事件，通过拖动事件我们可以获取最新的 vue3-drr-grid-layout布局并保存起来。

在vue3-drr-grid-layout中我们可以通过is-resizable属性设置为true允许用户缩放单元格的大小，并通过resize和resized事件来获取单元格是否进行了缩放。

vue3-drr-grid-layout 不像 vue-grid-layout 一样设置drag-allow-from属性就可以指定某个元素才能拖动单元格，但是我们可以通过is-draggable属性来实现同样的功能，我们将来样式只能点单元格中的SPAN标签才能通过单元格。

vue3-drr-grid-layout is-mirrored属性设置镜像反转,就是从左向右还是从右到左对齐。

vue3-drr-grid-layout 响应式布局，设置responsive和breakpoints可以根据屏幕大小调整布局以达到设配各种屏幕的效果。

vue3-drr-grid-layou 设置 prevent-collision 属性可以防止单元格碰撞，就是拖动A1单元格移动到A2单元格时，不会改变A2单元格的位置，拖动时无法改变其他元素的位置。

vue3-drr-grid-layout 添加删除单元格只需要对 vue3-drr-grid-layout 的数据源进行添加删除就可以实现单元格的新增和删除功能。