Vue富文本编辑器撤销功能导致光标位置错乱怎么办？

你这问题核心是两块：光标跳动和内存卡顿，得分开处理。

光标跳到开头是因为你每次直接用 v-html 重写整个 DOM，浏览器自然会把光标重置到开头，这个没得商量。要保留光标位置，必须在撤销前先保存当前光标位置，撤销后再手动恢复。

内存卡顿是因为你存的是 innerHTML 字符串，每次 input 都 push 一整段 HTML，频繁操作后数组越来越大，哪怕你只保留 20 个快照，每个快照可能几百 KB，内存还是吃不消。

正确的做法是：只存操作指令，不存整个 DOM，也就是用 Operational Transformation（操作转换）的思想，或者更简单点，用「指令快照」——比如记录每次插入/删除的文本、位置、是否包含格式等。

不过如果你不想搞太复杂，可以退而求其次：
- 用 selection API 保存光标 range
- 快照里只存当前 DOM 的结构，但用 deep clone 的方式缓存，避免重复引用
- 更关键的是：别在 input 事件里直接存 innerHTML，这玩意触发太频繁，输入法还没确认呢你就存了

给个能跑的简化方案：

export default {

  data() {

    return {

      content: '<p>初始内容</p>',

      history: [],

      historyIndex: -1

    }

  },

  methods: {

    saveState() {

      // 先保存当前光标位置

      const range = window.getSelection().getRangeAt(0)

      const preCursor = {

        startContainer: range.startContainer,

        startOffset: range.startOffset,

        endContainer: range.endContainer,

        endOffset: range.endOffset

      }



      // 只保留当前索引之后的快照（避免 undo 后再输入时历史被覆盖）

      if (this.historyIndex < this.history.length - 1) {

        this.history = this.history.slice(0, this.historyIndex + 1)

      }



      // 深拷贝当前 DOM 结构，不是 innerHTML 字符串

      const snapshot = {

        html: this.$el.innerHTML,

        cursor: preCursor

      }



      this.history.push(snapshot)

      this.historyIndex = this.history.length - 1



      // 限制长度，但别用 slice(-20)，会丢掉索引指向的位置

      if (this.history.length > 50) {

        this.history.shift()

        this.historyIndex--

      }

    },

    undo() {

      if (this.historyIndex <= 0) return



      this.historyIndex--

      const snapshot = this.history[this.historyIndex]



      // 先恢复 DOM

      this.$el.innerHTML = snapshot.html



      // 再恢复光标（这里简化了，实际要考虑节点是否还存在）

      const range = new Range()

      range.setStart(snapshot.cursor.startContainer, snapshot.cursor.startOffset)

      range.setEnd(snapshot.cursor.endContainer, snapshot.cursor.endOffset)

      window.getSelection().removeAllRanges()

      window.getSelection().addRange(range)

    }

  },

  mounted() {

    // 禁用浏览器原生 undo，防止和你的逻辑打架

    document.execCommand('Undo', false, null)

  }

}

注意几个坑：
- getRangeAt 的节点引用在 DOM 重写后可能失效，恢复光标前最好校验下节点还在不在
- execCommand('Undo') 虽然能用，但兼容性差，而且和 Vue 响应式冲突，所以主动禁用掉
- 真要高性能，还是建议用 Quill、TipTap 这种成熟的库，它们内部用 delta 格式存操作，内存占用极低

你这方案现在卡顿，八成是 input 触发太频繁，可以加个 200ms 的 debounce，或者改成在 blur 事件里保存（看需求），别在每次按键都 push。

你这个方案有两个核心问题，一个是光标位置丢失，另一个是性能问题。我们来逐一解决。

光标跳到开头是因为直接修改了content的值，导致浏览器重新渲染整个DOM结构，自然会重置光标。要解决这个问题，需要在undo的时候手动保存和恢复光标位置。可以借助Selection和Range API来处理：

getCursorPosition() {

  const selection = window.getSelection()

  if (selection.rangeCount === 0) return

  return selection.getRangeAt(0)

},

restoreCursorPosition(range) {

  const selection = window.getSelection()

  selection.removeAllRanges()

  selection.addRange(range)

}

在undo方法里调用这两个辅助方法：

undo() {

  if (this.history.length < 2) return // 至少保留一个状态

  

  const currentRange = this.getCursorPosition()

  this.history.pop()

  this.content = this.history[this.history.length-1]

  

  this.$nextTick(() => {

    if (currentRange) {

      this.restoreCursorPosition(currentRange)

    }

  })

}

至于性能问题，频繁push完整HTML确实吃内存，建议改成存增量更新。比如只记录每次变化的差异，或者限制history长度在10以内就够了。另外，不要在每个input事件都存快照，可以加个防抖：

data() {

  return {

    content: '<p>初始内容</p>',

    history: [],

    saveTimer: null

  }

},

methods: {

  saveState: function() {

    clearTimeout(this.saveTimer)

    this.saveTimer = setTimeout(() => {

      this.history.push(this.content)

      this.history = this.history.slice(-10)

    }, 300)

  }

}

这样既解决了光标问题，又优化了性能。记得测试下主流浏览器兼容性，尤其是IE这种老古董可能需要额外打补丁。做富文本编辑器确实挺烦人的，慢慢调吧。