Vue.js 实现可编辑区域中动态插入下拉框与文本的混合内容编辑器

本文介绍如何在 vue.js 中构建一个支持光标定位插入下拉选择框（``）并保留文本内容的可编辑区域，解决手动操作 dom 导致的选中值丢失问题，采用响应式数据驱动方式替代原生 dom 操作。

在 Vue 开发中，直接操作 contenteditable 区域并动态插入原生 元素（如通过 appendChild）会绕过 Vue 的响应式系统，导致组件状态与 DOM 状态脱节——这正是你遇到“始终返回第一个选项”的根本原因：this.dropdowns 中的 selectedOption 未与真实 DOM 的 select.value 同步更新，且每次 getDataModel 时读取的是初始快照而非当前用户选择。

✅ 正确做法是 放弃手动 DOM 插入，转而使用 Vue 原生指令（如 v-model + v-for）管理下拉框生命周期与状态。所有交互必须通过响应式数据驱动，确保视图与模型严格一致。

以下是一个结构清晰、可扩展的实现方案：

✅ 推荐实现：纯响应式混合内容编辑器（支持文本 + 下拉）

虽然 Vue 本身不直接支持在 contenteditable 中嵌入受控组件（如 ），但我们可以采用「分层设计」：

• 文本层：使用普通 处理自由输入（仅用于纯文本）；
• 组件层：将下拉框作为独立、受控的 Vue 组件，通过逻辑位置（如索引或插槽标记）与文本流协同；
• 数据模型层：用数组描述内容序列，例如：[{ type: 'text', value: 'Hello' }, { type: 'dropdown', value: 'option2', options: [...] }]

但为兼顾简洁性与可行性，我们推荐更实用的折中方案——将整个编辑区域交由 Vue 渲染控制（非 contenteditable），通过 v-for 动态生成文本片段与下拉框，并提供「插入文本」和「插入下拉」按钮模拟光标定位行为（实际可通过 ref + focus() + document.execCommand 扩展，本文聚焦核心逻辑）。