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 中嵌入受控组件（如 ），但我们可以采用「分层设计」：

Tana

“节点式”AI智能笔记工具，支持超级标签。

下载

立即学习“前端免费学习笔记（深入）”；

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

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

<template>
  <div class="editor">
    <!-- 工具栏 -->
    <div class="toolbar">
      <button @click="insertText">插入文本</button>
      <button @click="addDropdown">插入下拉框</button>
      <button @click="getDataModel">获取数据模型</button>
    </div>

    <!-- 可编辑内容区（Vue 驱动渲染） -->
    <div class="content-area">
      <template v-for="(item, index) in contentItems" :key="index">
        <span v-if="item.type === 'text'" class="text-item">
          {{ item.value }}
        </span>
        <select
          v-else-if="item.type === 'dropdown'"
          v-model="item.selectedValue"
          class="dropdown-item"
        >
          <option
            v-for="opt in item.options"
            :key="opt.value"
            :value="opt.value"
          >
            {{ opt.label }}
          </option>
        </select>
      </template>
    </div>

    <!-- 输出结果 -->
    <div class="output">
      <strong>数据模型：</strong>
      <pre class="brush:php;toolbar:false;">{{ JSON.stringify(dataModel, null, 2) }}