vue组件缓存导致富文本编辑器光标丢失等问题，根源在于编辑器实例与vue响应式系统不同步；应将编辑器实例托管至组件外部，通过activated/deactivated钩子同步焦点、手动保存恢复光标位置，并避免响应式数据触发重渲染。
Vue 组件缓存（<keep-alive></keep-alive>）确实能提升体验，但对富文本编辑器这类强状态、强 DOM 交互的组件，直接包裹会导致光标丢失、内容错乱甚至工具栏失效。问题根源在于：编辑器实例（如 Quill 或 TinyMCE）在组件被缓存时并未真正“冻结”，其内部 DOM 状态、Selection 范围、事件监听器与 Vue 的响应式系统不同步；当组件从缓存中激活时，Vue 复用旧 DOM，但编辑器未感知到重新挂载，光标位置信息已失效。
保留编辑器实例，避免销毁重建
关键不是禁用 <keep-alive></keep-alive>，而是让编辑器“活”在缓存生命周期之外。最稳妥的做法是将编辑器实例托管到组件外部（如父组件或组合式 API 的 ref 中），使其不随组件卸载而销毁。
- 在父组件中用
ref创建并持有 Quill 实例，子组件仅负责渲染容器和绑定事件 - 子组件通过
defineExpose暴露必要的操作方法（如getContent、setFocus），但不管理实例本身 - 利用
activated和deactivated钩子同步焦点状态：进入激活时调用quill.focus()，必要时用quill.setSelection(lastIndex)恢复光标
手动保存并恢复光标位置
即使组件被缓存，只要编辑器实例仍在，就可以在切换前记录光标，切换后还原。Quill 提供了精确的 Selection API：
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- 在
beforeUnmount或deactivated中调用quill.getSelection()，保存{ index, length }到局部 ref 或 sessionStorage（若需跨会话） - 在
activated或mounted后延时执行（如nextTick），再调用quill.setSelection(savedIndex, savedLength) - 注意：必须确保编辑器已就绪（
quill.root.innerHTML不为空且可编辑），否则设置无效
避免依赖响应式数据触发重渲染
很多光标丢失实际由副作用引起——比如编辑器内容绑定到一个 ref，而该 ref 在缓存切换时被意外重置或更新，导致 Vue 强制刷新整个编辑器区域。
- 编辑器内容应只通过编辑器自身 API 读写（如
quill.getContents()/quill.setContents()），不要用v-model直接双向绑定到响应式变量 - 若需同步内容，使用
text-change或editor-change事件，在回调中更新变量，而非反向驱动 DOM - 确保编辑器容器元素的
key属性稳定（例如固定为"editor-root"），防止 Vue 错误复用或替换节点
特殊处理不可编辑内联元素（如表情、图片）
当编辑器内含 contenteditable="false" 的块（如自定义 emoji wrapper），它们会打断光标连续性，缓存后更容易出现“点不进去”或跳转到顶部的问题。
- 给这些元素添加
tabindex="-1"并监听click，手动触发quill.setSelection(index)定位到其前后位置 - CSS 上确保
user-select: none仅作用于视觉，不影响光标逻辑；避免pointer-events: none，否则无法触发点击定位 - Quill 中可通过
formats自定义 blot，在blot.insertInto后主动维护光标偏移量，防止插入后光标漂移
核心思路是把编辑器当成一个“外部服务”，而不是普通 Vue 组件去对待。缓存的是 UI 壳，不是编辑器大脑。只要实例存活、位置可记、DOM 不乱，光标就不会丢。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
