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,
// …
],
})
请访问这里学习自定义扩展
Tiptap Color 颜色扩展使能够在编辑器中设置文字的颜色,它依赖TextStyle标记,该标记呈现span 标签。然后将字体颜色应用为内联样式。
点击访问>>Tiptap BubbleMenu 浮动菜单扩展,当选中对象菜单将悬浮在鼠标附近,你可以对选中的标记mark进行操作。
点击访问>>tiptap CharacterCount 扩展将允许的字符数限制为指定的长度,并能够返回字符和单词的数量,中文文字数量统计不准确,需要自己改进。
点击访问>>Tiptap Collaboration 扩展可以使一个文档同时多个进行实时协作,实时协作基于 Y.js 实现,本文演示的是webrtc实现协作,webrtc 并不会把数据发送到服务器,而是浏览器间直接进行通讯。
点击访问>>Tiptap CollaborationCursor 扩展在多人同时编辑一个文档时可以显示每个用户的昵称和位置,你可以在多个浏览器中打开试试看效果。
点击访问>>Tiptap Dropcursor 扩展,当你在编辑器里面拖拽一个对象比如图片时,它显示一个光标要拖拽到的位置。
点击访问>>Tiptap Floating Menu 浮动菜单扩展,当新启一个空行时可以使用浮动菜单悬浮在这行上面,你可以在这个菜单上面放置需要的功能。
点击访问>>Tiptap Focus 扩展当用户选中默个节点时,可以制定一个样式高亮显示让用户知道选中了当前节点。
点击访问>>Tiptap FontFamily 字体扩展,它作用于 TextStyle 标记上,渲染成 Span 标签的内联样式。
点击访问>>Tiptap Gapcursor 空光标扩展,当你选择类似图片之类的节点后面又没有节点时,该插件会插入一个空光标。
点击访问>>Tiptap History 扩展提供历史记录支持,将记录文档的所有操作更改,可以撤回操作也可以重新开始。
点击访问>>Tiptap Placeholder 占位符扩展,当编辑器内容为空时可以显示你需要提示的文字,也可以在每行显示占位符文字。
点击访问>>Tiptap StarterKit 是最流行的Tiptap扩展的集合,你不需要去一个一个导入这些扩展。
点击访问>>Tiptap TextAlign 对齐方式,你可以设置 left center right justify等对齐方式。
点击访问>>Tiptap Typography 排版你可以理解成输入某些字符后转换成特殊的字符,比如输入(c)会自动转换成©
点击访问>>