type
status
date
slug
summary
tags
category
icon
password
Tiptap使用
近日，公司计划开发一款AI编辑器，反复对比过一些开源编辑器，最终打算使用Tiptap，下边是使用过程的一点心得
开始
因为 tiptap 的内核非常简单，干净，所有的功能都可以依靠插件实现，并且tiptap因为是基于prosemirror再封装而来，所以理论上也可是使用prosemirror的插件系统。
我们应该迅速从一个基础模版开始封装我们的编辑器，好在tiptap提供官方的模版供我们开始使用。
在线体验：
模版代码需要注册才可以使用：
构建一个自定义的插件
- 扩展现有
每个扩展都有一个
extend() 方法，它接受一个对象，用于更改或添加扩展的各个方面。- 存储
- 渲染 HTML
如果一个扩展没有定义这个，使用editor.getHTML()会报错
- 解析HTMl
- 命令
- 键盘快捷键
大多数核心扩展都提供了合理的键盘快捷键。不过，根据你想要构建的功能，你可能希望更改它们。通过
addKeyboardShortcuts() 方法，你可以覆盖预定义的快捷键映射：…
ProseMirror 插件（高级）
最后，Tiptap 是基于 ProseMirror 构建的，而 ProseMirror 也有一个非常强大的插件 API。要直接访问它，请使用
addProseMirrorPlugins() 。节点（node），标记（mark），扩展（extension）
- 节点：
如果你将文档视为一棵树，那么节点就是这棵树中的一种内容类型。可以从学习诸如 Paragraph、Heading 或CodeBlock 这样的例子开始
- 标记：
一个或多个标记可以应用于节点，例如添加内联格式。可以从学习 Bold、Italic 和 Highlight 这样的例子开始
- 扩展
扩展为 Tiptap 添加新功能，你可能会经常看到“扩展”这个词，即使对于节点和标记也是如此。但也有真正的扩展。它们不能像节点和标记那样添加到模式（schema），但可以添加功能或改变编辑器的行为
- 作者:chenglong
- 链接:https://www.cl96.top//article/tipap
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
