tiptap api 列表

TiptapProseMirror 的封装, Tiptap 封装 ProseMirror  大部分的复杂 api , 如果你想了解更多高级用法,你可以访问  ProseMirror Api 文档

Structure 结构

ProseMirror 使用严格的 Schema,文档由标题、段落和其他元素(node 节点)组成的树,而mark 标记可以附加到节点上。

Content 文档

文档存储在state状态下,而所有文档更改都作为事务应用于state状态,该状态包含当前内容、光标位置和选择的段落。你也可以hooks自己的事件。

Extensions 扩展

Extensions 扩展为 Tiptap 编辑器添加node 节点、mark 标记或功能,就是某些功能的集合组件,比如上传图片扩展。

名词解释

名称说明
Schema配置内容的结构
Document编辑器中的实际内容
State描述当前编辑器的 content 和selection的状态比如当前光标位置
Transaction事务对状态的更改(更新选择,内容…)
Extension编辑器扩展
Node内容类型,比如标题或段落。
Mark可以应用于节点,比如文字颜色、大小
Command用与更改文档的状态,比如加粗文字命令
DecorationStyling on top of the document, for example to highlight mistakes.

tiptap 方法

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

点击访问>>

tiptap 属性

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

点击访问>>

titap 配置

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

点击访问>>

commands 命令

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

点击访问>>

nodes 节点

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

点击访问>>

marks 标记

tiptap marks 可以对 node 节点应用一个或多个标记,比如添加内联样式(粗体、斜体)或其他附加信息。

点击访问>>

extensions 扩展

Tiptap extensions 扩展为某一类功能集合,比如菜单扩展、颜色扩展,你也可以开发自己的扩展。还有一些具有更多功能的扩展,我们称它们为nodes 节点和 marks 标记,它们可以在编辑器中呈现内容。

点击访问>>

下载教程 Demo

本教程Demo的源码点击这里下载,Tiptap Demo,下载完成后运行npm i初始化依赖包。