跳到正文
QuireKit
Core 开发文档
Alpha · API 持续演进

Vue 接入

让 Vue 提供容器,在挂载与卸载时创建和释放 Editor。

Vue 负责页面与界面,Editor 负责编辑内容。最小接入只需要一个元素引用和两个生命周期钩子,不需要把整个文档复制到 Vue 状态里。

一个组件就能开始

在 onMounted 中使用元素引用创建 Editor;在 onBeforeUnmount 中调用 destroy()。下面是可运行的单文件组件,完整写法与安装步骤见建立第一个编辑器。

正在准备示例…

这里用普通变量保存实例。如果模板或其他组件需要引用它,可用 shallowRef<Editor>();不需要让内部文档和视图对象深度响应化。

让 Vue 管理界面状态

例如工具栏要显示粗体选中态,可以订阅 Editor 事件,只把相应布尔值同步到 Vue。用户点击按钮时调用 Editor 命令,而不是修改另一份正文后再反写回来。

具体按钮和订阅的连接方式见工具栏教程。只有真正打开另一份文档时,才显式调用内容替换方法。

Nuxt 和异步加载

服务端没有挂载元素,因此 Editor 的 DOM 创建放在浏览器挂载阶段。加载浏览器专用能力时,可以使用客户端组件或 ClientOnly;若动态导入完成时组件已经卸载,就不再创建实例。

切换语言只更新界面,不应重新灌入初始正文;切换主题也不应清空用户的撤销历史。想直接复用完整分页界面,可看 Classic Vue 接入。

QuireKitQuireKit · Core、插件与 Classic 文档