Tiptap 是 ProseMirror 的封装, Tiptap 封装 ProseMirror 大部分的复杂 api , 如果你想了解更多高级用法,你可以访问 ProseMirror Api 文档。
ProseMirror 使用严格的 Schema,文档由标题、段落和其他元素(node 节点)组成的树,而mark 标记可以附加到节点上。
文档存储在state状态下,而所有文档更改都作为事务应用于state状态,该状态包含当前内容、光标位置和选择的段落。你也可以hooks自己的事件。
Extensions 扩展为 Tiptap 编辑器添加node 节点、mark 标记或功能,就是某些功能的集合组件,比如上传图片扩展。
名称 | 说明 |
---|---|
Schema | 配置内容的结构 |
Document | 编辑器中的实际内容 |
State | 描述当前编辑器的 content 和selection的状态比如当前光标位置 |
Transaction | 事务对状态的更改(更新选择,内容…) |
Extension | 编辑器扩展 |
Node | 内容类型,比如标题或段落。 |
Mark | 可以应用于节点,比如文字颜色、大小 |
Command | 用与更改文档的状态,比如加粗文字命令 |
Decoration | Styling on top of the document, for example to highlight mistakes. |
tiptap 编辑器的 editor 方法的可以返回任何内容,请勿与commands命令混淆,commands 用于更改编辑器的状态(内容、选择内容等),并且仅返回true/false。
点击访问>>tiptap 拥有 isEditable 和 isEmpty 两个属性,一个表示是否可编辑一个表示编辑器是否有内容。
点击访问>>本文将讲解如何配置 tiptap 编辑器,其中包括如何初始化、加载配置扩展、样式的配置方法。
点击访问>>tiptap编辑器提供了大量命令 Commands,可以添加或更改内容、更改选择。如果你想用好tiptap编辑器,你需要掌握这些命令。
点击访问>>如果将编辑器document文档比喻成一棵树tree,那么nodes节点就是树中的一种内容,paragraphs、headings或code blocks都是节点.,但节点不一定是块。它们也可以与文本内联呈现,例如@mentions 扩展。
点击访问>>tiptap marks 可以对 node 节点应用一个或多个标记,比如添加内联样式(粗体、斜体)或其他附加信息。
点击访问>>Tiptap extensions 扩展为某一类功能集合,比如菜单扩展、颜色扩展,你也可以开发自己的扩展。还有一些具有更多功能的扩展,我们称它们为nodes 节点和 marks 标记,它们可以在编辑器中呈现内容。
点击访问>>