vue实现选区插入元素

实现选区插入元素的基本思路

在Vue中实现选区插入元素，核心是利用浏览器的Selection和Range API获取当前光标位置或选区，再动态插入DOM节点。以下是具体实现方法：

获取当前选区对象

通过window.getSelection()获取Selection对象，判断是否有选中内容：

const selection = window.getSelection()
if (selection.rangeCount > 0) {
  const range = selection.getRangeAt(0)
}

创建可插入的Vue组件

需要将Vue组件转换为DOM节点。使用Vue的createApp和mount方法：

const component = {
  template: '<div class="inserted-element">插入内容</div>'
}
const app = createApp(component)
const div = document.createElement('div')
const mounted = app.mount(div)

在选区位置插入节点

获取Range对象后，先删除原有选区内容（如果有），再插入新节点：

range.deleteContents()
range.insertNode(mounted.$el)

处理光标定位

插入元素后需要恢复光标位置，可创建新的Range并设置光标：

const newRange = document.createRange()
newRange.setStartAfter(mounted.$el)
newRange.collapse(true)

selection.removeAllRanges()
selection.addRange(newRange)

完整示例代码

export default {
  methods: {
    insertElement() {
      const selection = window.getSelection()
      if (selection.rangeCount === 0) return

      const range = selection.getRangeAt(0)
      range.deleteContents()

      // 创建Vue组件实例
      const app = createApp({
        template: '<span class="dynamic-insert">✅</span>'
      })
      const container = document.createElement('span')
      const mounted = app.mount(container)

      // 插入节点
      range.insertNode(mounted.$el)

      // 移动光标到插入元素之后
      const newRange = document.createRange()
      newRange.setStartAfter(mounted.$el)
      newRange.collapse(true)
      selection.removeAllRanges()
      selection.addRange(newRange)
    }
  }
}

处理内容可编辑区域

如果是在contenteditable区域实现，需要额外处理事件冒泡：

<div 
  contenteditable 
  @click="handleClick"
  v-html="content"
></div>

使用自定义指令优化

可以封装为自定义指令简化使用：

Vue.directive('insertable', {
  inserted(el, binding) {
    el.addEventListener('click', () => {
      // 插入逻辑
    })
  }
})

注意事项

浏览器兼容性方面需注意：

• IE9及以下版本需要使用document.selection替代
• 移动端设备选区处理可能有差异

动态插入的Vue组件需要妥善管理生命周期，避免内存泄漏。对于复杂场景，建议结合Vue的Portal或Teleport特性实现。