Vue.js 如何渲染无根节点HTML且不覆盖既有子元素、支持contenteditable编辑

之前的实现踩了两个核心的坑：

• 把需要保留的固定删除块写在模板的子节点里，同时依赖v-html渲染用户内容时，v-html会直接覆盖整个元素的innerHTML，导致虚拟DOM中记录的固定块被实际的innerHTML替换，最终固定块丢失。
• 自定义的RenderString组件将多节点无外层的HTML字符串直接作为组件模板，违反Vue2的组件单根渲染要求，不仅会触发模板编译报错，独立组件本身也会生成额外的包裹层，违背“不增加额外外层标签”的要求。

核心思路是把固定块的HTML内容和用户传入的HTML字符串拼接为完整的innerHTML，统一通过v-html渲染到动态根元素上，从根源上避免覆盖问题；所有交互逻辑和响应式同步都纳入Vue的渲染流程，不使用脱离体系的原生DOM操作。

实现代码 #

1. 组件模板部分（移除原本的固定块DOM、移除RenderString组件）：

<template>
  <component
    :is="element.tag"
    contenteditable="true"
    v-html="fullInnerHtml"
    @input="handleContentSync"
  />
</template>

2. 组件逻辑部分：

export default {
  name: "VElement",
  props: {
    element: {
      type: Object,
      required: true,
      // 预期结构：{ id: 数字, tag: 标签名, content: 包含HTML的字符串 }
      default: () => ({})
    }
  },
  computed: {
    // 拼接完整的根元素innerHTML：固定非可编辑块 + 用户传入的内容
    fullInnerHtml() {
      // 给固定块加唯一类名，方便后续精准定位
      const fixedBlock = `
        <div class="fixed-toolbar" contenteditable="false">
          <span class="delete-obj" id="delete${this.element.id}">delete</span>
        </div>
      `
      // 拼接时不增加任何额外包裹标签，保证结构符合预期
      return fixedBlock + this.element.content
    }
  },
  mounted() {
    this.bindDeleteEvent()
  },
  updated() {
    // v-html更新后DOM会重建，需要重新绑定事件
    this.bindDeleteEvent()
  },
  methods: {
    // 绑定删除按钮的点击事件
    bindDeleteEvent() {
      const deleteBtn = this.$el.querySelector('.delete-obj')
      // 加标记避免重复绑定
      if (deleteBtn && !deleteBtn.__eventBound) {
        deleteBtn.__eventBound = true
        deleteBtn.addEventListener('click', () => {
          this.$emit('delete', this.element.id)
        })
      }
    },
    // 同步contenteditable的编辑内容到prop
    handleContentSync() {
      // 克隆当前DOM，不修改原渲染结构
      const clonedRoot = this.$el.cloneNode(true)
      // 精准移除我们自己加的固定块，不影响用户自定义的内容
      const fixedBlock = clonedRoot.querySelector('.fixed-toolbar')
      if (fixedBlock) {
        fixedBlock.remove()
      }
      // 提取剩下的用户编辑内容，同步给父组件
      const userContent = clonedRoot.innerHTML
      this.$emit('update:element', {
        ...this.element,
        content: userContent
      })
    }
  }
}

• 动态根元素绑定contenteditable=true，用户输入时通过input事件实时同步content到prop，保持响应式。
• 固定的非可编辑块通过contenteditable=false属性设置，浏览器会阻止用户选中、删除、编辑这块内容，完全保留交互能力。
• 渲染用户传入的HTML字符串时，直接拼接到固定块后面，没有任何额外外层包裹，最终DOM结构完全和预期一致：

  <div contenteditable="true">
    <div class="fixed-toolbar" contenteditable="false">
      <span class="delete-obj" id="delete1">delete</span>
    </div>
    hello<b>hey</b>
  </div>
  

• 所有逻辑都在Vue的渲染生命周期内完成，没有脱离响应式体系的手动DOM操作。

• 固定块必须加上唯一类名标识，在同步用户内容时，只移除这个类名对应的节点，避免误删用户自己写的带contenteditable=false属性的自定义内容。
• 删除按钮绑定时要加标记位，防止v-html重建DOM后重复绑定事件，导致一次点击触发多次回调。

内容的提问来源于stack exchange，提问作者Girl Codes