Vue 负责页面与界面,Editor 负责编辑内容。最小接入只需要一个元素引用和两个生命周期钩子,不需要把整个文档复制到 Vue 状态里。
一个组件就能开始
在 onMounted 中使用元素引用创建 Editor;在 onBeforeUnmount 中调用 destroy()。下面是可运行的单文件组件,完整写法与安装步骤见建立第一个编辑器。
这里用普通变量保存实例。如果模板或其他组件需要引用它,可用 shallowRef<Editor>();不需要让内部文档和视图对象深度响应化。
让 Vue 管理界面状态
例如工具栏要显示粗体选中态,可以订阅 Editor 事件,只把相应布尔值同步到 Vue。用户点击按钮时调用 Editor 命令,而不是修改另一份正文后再反写回来。
具体按钮和订阅的连接方式见工具栏教程。只有真正打开另一份文档时,才显式调用内容替换方法。
Nuxt 和异步加载
服务端没有挂载元素,因此 Editor 的 DOM 创建放在浏览器挂载阶段。加载浏览器专用能力时,可以使用客户端组件或 ClientOnly;若动态导入完成时组件已经卸载,就不再创建实例。
切换语言只更新界面,不应重新灌入初始正文;切换主题也不应清空用户的撤销历史。想直接复用完整分页界面,可看 Classic Vue 接入。