tiptap HardBreak 换行节点

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

tiptap Document 节点

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

tiptap CodeBlockLowlight 代码高亮

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

tiptap CodeBlock 代码块扩展

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

tiptap BulletList 无序序列扩展

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

tiptap Blockquote 引用扩展

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

nodes 节点

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

tiptap 自定义扩展

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

tiptap selection 命令

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

tiptap lists 命令

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

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