Tiptap 是一个基于 ProseMirror 的富文本编辑器,允许开发者通过扩展(extensions)来定义编辑器的功能、行为和内容。下面是一个关于如何编写一个 Tiptap 扩展的简单介绍,以及它的工作原理。
Tiptap Extensions 简介
在 Tiptap 中,扩展是指对编辑器功能的增强,比如添加新的节点、标记或命令。每个扩展都是一个 JavaScript 类,通常继承自 Extension 类,并定义一些属性和方法。
工作原理
1、节点(Nodes)和标记(Marks):
Tiptap 允许创建自定义的节点和标记。节点通常用于定义文档的结构(如段落、标题、列表等),而标记则用于定义文本的样式(如粗体、斜体等)。
2、命令(Commands):
扩展可定义命令,用于处理用户输入,比如添加、删除或修改内容。
3、样式(Styles):
可通过 CSS 对节点和标记进行样式化,使其在编辑器中以特定的方式呈现。
4、事件(Events):
Tiptap 允许监听编辑器的各种事件,扩展可以基于这些事件执行特定的操作。
创建一个简单的 Tiptap 扩展
下面是一个创建自定义扩展的基本示例:
javascript">import { Extension } from '@tiptap/core'
const CustomExtension = Extension.create({
name: 'customExtension',
// 定义节点
addNode() {
return {
// 自定义节点的名称
group: 'block',
content: 'inline*',
// 其他属性
defining: true,
// 自定义节点可以被渲染成什么样子
parseDOM: [{
tag: 'div.custom-node', // DOM 中的标签
getAttrs: node => ({
// 从 DOM 节点获取属性
class: node.className
}),
}],
toDOM: node => {
return ['div', { class: 'custom-node' }, 0] // 将节点渲染为 DOM
},
}
},
// 定义命令
addCommands() {
return {
// 添加命令来插入自定义节点
insertCustomNode: () => ({ commands }) => {
return commands.insertContent({
type: this.type.name, // 指向定义的节点类型
})
},
}
},
})
export default CustomExtension
使用扩展
创建完扩展后,在Tiptap 编辑器实例中使用它:
javascript">import { Editor } from '@tiptap/core'
import CustomExtension from './CustomExtension'
const editor = new Editor({
extensions: [
CustomExtension,
],
})
editor.commands.insertCustomNode()