一个页面通常创建一个 Editor 实例,直到用户离开这个页面。编辑器处理每次输入,应用通过事件读取变化,不需要反复创建实例。
创建、挂载与退出
Vue 中在 onMounted 后创建带视图的 Editor;组件退出时调用 destroy()。它会释放编辑视图和扩展资源。应用自己创建的订阅和异步任务,也应在退出时释放或取消。
完整单组件示例见 Vue 接入。如果先创建无视图的实例,后续也可以通过 mount() 挂载;unmount() 保留正文,destroy() 则结束整个实例。
beforeCreate 与 create 在构造期间同步发生。需要观察创建时机时,通过创建选项的 onCreate({ editor }) 注册,使用参数里的实例;构造结束后才 on('create', ...) 会错过这次事件。View 准备好以后发出 mount,释放时发出 unmount;切换模式也会经过这两个阶段。
选择合适的事件
| 你关心什么 | 订阅什么 | 常见用途 |
|---|---|---|
| 正文改变 | update | 标记未保存修改 |
| 选区改变 | selectionUpdate | 更新选区相关界面 |
| 接受一次事务 | transaction | 统一刷新工具栏状态 |
| 焦点进入或离开 | focus / blur | 聚焦样式与界面显示 |
| 主视图挂载或释放 | mount / unmount | 绑定和清理与该视图有关的资源 |
只订阅当前功能需要的事件。光标移动并不等于正文变化,也不需要立即序列化和保存全文。
保留监听函数以便释放
import type { QuireEditorUpdateEvent } from '@quirekit/core'
const onUpdate = ({ editor, previousState }: QuireEditorUpdateEvent) => {
if (!previousState.doc.eq(editor.state.doc)) dirty = true
}
editor.on('update', onUpdate)
// 页面退出时移除应用自己的监听:
editor.off('update', onUpdate)
这里的 dirty 是应用维护的“有未保存修改”状态。setEditable() 默认也会发出 update,因此先比较文档,避免只读切换被当成编辑。emitUpdate: false 的内容替换不会触发它,恢复流程需自行设置基线。不要在 update 中无条件 setContent(),否则会反复替换用户正在编辑的内容。
transaction 包含根事务与 appendedTransactions,回调中的 editor.state 是接受插件追加事务后的状态。只看根事务的 docChanged 会漏掉追加事务中的修改;也不能把每个事务都当作需要保存的正文变化。完整事件表见配置与事件参考。
异步结果也有生命周期
加载插件、文件或保存结果返回时,先检查页面和对应任务是否仍有效。较早的结果不能覆盖新草稿,也不能在组件卸载后重新创建实例。
Classic 的产品配置更新与 Core 的内容 update 不是同一件事,复用产品时另见 Classic 配置。