事件
引言
编辑器会触发一些事件,你可以通过这些事件来定制其行为。让我们先来看看可用的所有事件。
可用事件列表
beforeCreate
在视图创建之前。
create
编辑器已准备好。
update
内容已更改。
selectionUpdate
选择范围已更改。
transaction
编辑器状态已改变。
focus
编辑器获得焦点。
blur
编辑器失去焦点。
destroy
编辑器正在销毁。
contentError
内容不符合模式。
注册事件监听器
方法 1:配置
可以直接在新的编辑器实例上定义事件监听器:
const editor = new Editor({
onBeforeCreate({ editor }) {
// 在视图创建之前。
},
onCreate({ editor }) {
// 编辑器已准备好。
},
onUpdate({ editor }) {
// 内容已更改。
},
onSelectionUpdate({ editor }) {
// 选择范围已更改。
},
onTransaction({ editor, transaction }) {
// 编辑器状态已改变。
},
onFocus({ editor, event }) {
// 编辑器获得焦点。
},
onBlur({ editor, event }) {
// 编辑器失去焦点。
},
onDestroy() {
// 编辑器正在销毁。
},
onContentError({ editor, error, disableCollaboration }) {
// 内容不符合模式。
},
});
方法 2:绑定
或者你可以在运行中的编辑器实例上注册事件监听器:
绑定事件监听器
editor.on("beforeCreate", ({ editor }) => {
// 在视图创建之前。
});
editor.on("create", ({ editor }) => {
// 编辑器已准备好。
});
editor.on("update", ({ editor }) => {
// 内容已更改。
});
editor.on("selectionUpdate", ({ editor }) => {
// 选择范围已更改。
});
editor.on("transaction", ({ editor, transaction }) => {
// 编辑器状态已改变。
});
editor.on("focus", ({ editor, event }) => {
// 编辑器获得焦点。
});
editor.on("blur", ({ editor, event }) => {
// 编辑器失去焦点。
});
editor.on("destroy", () => {
// 编辑器正在销毁。
});
editor.on("contentError", ({ editor, error, disableCollaboration }) => {
// 内容不符合模式。
});
解绑事件监听器
如果需要在某个时刻移除这些事件监听器,你应该使用 .on()
注册,然后用 .off()
来解绑。
const onUpdate = () => {
// 内容已更改。
};
// 绑定 ...
editor.on("update", onUpdate);
// ... 并解绑。
editor.off("update", onUpdate);
方法 3:扩展
你也可以将事件监听器移动到自定义扩展(或节点、标记)中。这看起来像这样:
import { Extension } from "@tiptap/core";
const CustomExtension = Extension.create({
onBeforeCreate({ editor }) {
// 在视图创建之前。
},
onCreate({ editor }) {
// 编辑器已准备好。
},
onUpdate({ editor }) {
// 内容已更改。
},
onSelectionUpdate({ editor }) {
// 选择范围已更改。
},
onTransaction({ editor, transaction }) {
// 编辑器状态已改变。
},
onFocus({ editor, event }) {
// 编辑器获得焦点。
},
onBlur({ editor, event }) {
// 编辑器失去焦点。
},
onDestroy() {
// 编辑器正在销毁。
},
onContentError({ editor, error, disableCollaboration }) {
// 内容不符合模式。
},
});