tiptap nodes & marks 命令大全

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

tiptap content 文档命令

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

tiptap commands 命令介绍

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

titap 配置

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

tiptap 属性

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

tiptap editor 方法

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

tiptap collaborative 实时协作

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

Titpap Output 输出格式

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

Styling Titpap 样式

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

tiptap menus 菜单

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

ProseMirror API

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

Tiptap 编辑器 Configuration 配置

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

vue3-drr-grid-layout 从外部拖入单元格

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

vue3-drr-grid-layout 单元格拖动事件

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

vue3-drr-grid-layout 单元格调整大小

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

vue3-drr-grid-layout 制定拖拽元素

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

vue3-drr-grid-layout 镜像反转

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

vue3-drr-grid-layout 响应式布局

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

vue3-drr-grid-layout 防止碰撞

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

vue3-drr-grid-layout 动态添加删除单元格

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