tiptap extensions 扩展
Tiptap extensions 扩展为某一类功能集合，比如菜单扩展、颜色扩展，你也可以开发自己的扩展。还有一些具有更多功能的扩展，我们称它们为nodes 节点和 marks 标记，它们可以在编辑器中呈现内容。
扩展列表
| 名称 | StarterKit（核心） | 源码 |
|---|---|---|
| BubbleMenu | – | GitHub |
| CharacterCount | – | GitHub |
| Collaboration | – | GitHub |
| CollaborationCursor | – | GitHub |
| Color | – | GitHub |
| Dropcursor | Included | GitHub |
| FloatingMenu | – | GitHub |
| Focus | – | GitHub |
| FontFamily | – | GitHub |
| Gapcursor | Included | GitHub |
| History | Included | GitHub |
| InvisibleCharacters | – | Requires a Tiptap Pro subscription |
| Mathematics | – | Requires a Tiptap Pro subscription |
| Placeholder | – | GitHub |
| StarterKit | – | GitHub |
| TextAlign | – | GitHub |
| Typography | – | GitHub |
| UniqueID | – | Requires a Tiptap Pro subscription |
自定义扩展
import { Extension } from '@tiptap/core'
const CustomExtension = Extension.create({
// Your code here
})
const editor = new Editor({
extensions: [
// Register your custom extension with the editor.
CustomExtension,
// … and don’t forget all other extensions.
Document,
Paragraph,
Text,
// …
],
})请访问这里学习自定义扩展
Color 颜色扩展
Tiptap Color 颜色扩展使能够在编辑器中设置文字的颜色，它依赖TextStyle标记，该标记呈现span 标签。然后将字体颜色应用为内联样式。
点击访问>>Bubble Menu 气泡菜单
Tiptap BubbleMenu 浮动菜单扩展，当选中对象菜单将悬浮在鼠标附近，你可以对选中的标记mark进行操作。
点击访问>>CharacterCount 文字统计
tiptap CharacterCount 扩展将允许的字符数限制为指定的长度，并能够返回字符和单词的数量，中文文字数量统计不准确，需要自己改进。
点击访问>>Collaboration 实时协作
Tiptap Collaboration 扩展可以使一个文档同时多个进行实时协作，实时协作基于 Y.js 实现，本文演示的是webrtc实现协作，webrtc 并不会把数据发送到服务器，而是浏览器间直接进行通讯。
点击访问>>CollaborationCursor 协作光标
Tiptap CollaborationCursor 扩展在多人同时编辑一个文档时可以显示每个用户的昵称和位置，你可以在多个浏览器中打开试试看效果。
点击访问>>Dropcursor 拖动光标
Tiptap Dropcursor 扩展,当你在编辑器里面拖拽一个对象比如图片时，它显示一个光标要拖拽到的位置。
点击访问>>Floating Menu 浮动菜单
Tiptap Floating Menu 浮动菜单扩展，当新启一个空行时可以使用浮动菜单悬浮在这行上面，你可以在这个菜单上面放置需要的功能。
点击访问>>Focus 焦点扩展
Tiptap Focus 扩展当用户选中默个节点时，可以制定一个样式高亮显示让用户知道选中了当前节点。
点击访问>>FontFamily 字体
Tiptap FontFamily 字体扩展，它作用于 TextStyle 标记上，渲染成 Span 标签的内联样式。
点击访问>>Gapcursor 空光标
Tiptap Gapcursor 空光标扩展，当你选择类似图片之类的节点后面又没有节点时，该插件会插入一个空光标。
点击访问>>History 历史记录
Tiptap History 扩展提供历史记录支持,将记录文档的所有操作更改，可以撤回操作也可以重新开始。
点击访问>>Placeholder 占位符
Tiptap Placeholder 占位符扩展，当编辑器内容为空时可以显示你需要提示的文字，也可以在每行显示占位符文字。
点击访问>>StarterKit 核心扩展
Tiptap StarterKit 是最流行的Tiptap扩展的集合，你不需要去一个一个导入这些扩展。
点击访问>>TextAlign 对齐方式
Tiptap TextAlign 对齐方式，你可以设置 left center right justify等对齐方式。
点击访问>>Typography 特殊符号
Tiptap Typography 排版你可以理解成输入某些字符后转换成特殊的字符，比如输入(c)会自动转换成©
点击访问>>下载教程 Demo
本教程Demo的源码点击这里下载，Tiptap Demo，下载完成后运行npm i初始化依赖包。
