【element-tiptap】Tiptap编辑器焦点概念----内容、扩展与词汇 ...

前言：本篇文章继续来讲Tiptap编辑器的焦点概念，主要是内容、扩展、词汇相干的概念
（一）内容

文档内容被存储在编辑器实例的 state 属性中。所有的修改都会以变乱 transaction 的形式应用于 state。state 详细介绍了当前的内容、光标的位置和选区等内容。Tiptap 提供了很多可以挂载的变乱，比方可以用于在应用变乱之前改变变乱。
可挂载的变乱列表

变乱名形貌beforeCreate编辑器视图创建之前create编辑器初始化完成update内容有修改selectionUpdate编辑器的选区有修改transaction创建和实行变乱focus监听编辑器聚焦blur监听编辑器失焦destroy监听编辑器实例销毁onPaste监听粘贴变乱onDrop监听内容拖拽到编辑器中contentError内容不符合 schema 制定的规则时触发 注册变乱监听器

有三个方式注册变乱监听器
① 通过配置项的方式
新创建的编辑器可以利用配置项的方式增加监听函数

1. const editor = new Editor({
2.   onBeforeCreate({ editor }) {
3.     // Before the view is created.
4.   },
5.   onCreate({ editor }) {
6.     // The editor is ready.
7.   },
8. })

复制代码

② 通过绑定的方式
正在运行的编辑器可以通过 on() 方法监听

1. editor.on('beforeCreate', ({ editor }) => {
2.   // Before the view is created.
3. })
5. editor.on('create', ({ editor }) => {
6.   // The editor is ready.
7. })
9. editor.on('update', ({ editor }) => {
10.   // The content has changed.
11. })

复制代码

如果后续要解绑的话，需要利用定名函数

1. const onUpdate = () => {
2.   // The content has changed.
3. }
5. // Bind …
6. editor.on('update', onUpdate)
8. // … and unbind.
9. editor.off('update', onUpdate)

复制代码

③ 给扩展增加监听器

1. import { Extension } from '@tiptap/core'
3. const CustomExtension = Extension.create({
4.   onBeforeCreate({ editor }) {
5.     // Before the view is created.
6.   },
7.   onCreate({ editor }) {
8.     // The editor is ready.
9.   },
10. })

复制代码

（二）扩展

扩展向编辑器中添加节点、标志、功能等。
扩展里面的内容有一丢丢多哇，等我后面专门写几篇文章介绍吧