使用Vue.js更改道具后可编辑div中的插入符号位置

我使用的是Vue.js，代码如下。 当我输入div并更新this.content时，插入符号总是重置为开头

<template>
<div> 
  <div contenteditable="true"
    v-html="content"
    @input="onContentChange($event)">
  </div>
</div>
</template>
<script>
export default {
  props: ['content'],
  methods: {
    onContentChange: function(e) {
      this.content = e.target.innerHTML;
    },
  }, 
}
</script>
<style>
</style>

导出默认值{
道具：[“内容”]，
方法：{
onContentChange:功能（e）{
this.content=e.target.innerHTML；
},
}, 
}

如何保留插入符号的位置并更新内容

---

我看过其他一些类似的帖子，但这些解决方案要么不适用于Vue.js，要么在我的案例中不起作用，要么我可能无法正确应用它们。

我已经测试了一些场景，我认为您实际上需要的是在中创建一个可重用的可编辑组件

但是，如果您希望将所有内容都包含在一个组件中，则在chrome中，以下代码起作用：

<template>
  <div
    ref="editable"
    contenteditable
    @input="onInput"
  >
  </div>
</template>

<script>
export default {
  data () {
    return {
      content: 'hello world'
    }
  },
  mounted () {
    this.$refs.editable.innerText = this.content
  },
  methods: {
    onInput (e) {
      this.content = e.target.innerText
    }
  }
}
</script>

导出默认值{
数据（）{
返回{
内容：“你好，世界”
}
},
挂载（）{
this.$refs.editable.innerText=this.content
},
方法：{
输入（e）{
this.content=e.target.innerText
}
}
}

---

请注意，在这种情况下，Chrome中的Vue插件似乎无法正确更新

内容的值，因此您必须单击Vue插件右上角的“刷新”。
首先，我们保留当前的可编辑内容，然后更改HTML内容，并设置新的选择

const range = document.getSelection().getRangeAt(0)
const pos = range.endOffset

this.$el.innerHTML = this.content

const newRange = document.createRange()
const selection = window.getSelection()
const node = this.$el.childNodes[0]
newRange.setStart(node, node && pos > node.length ? 0 : pos)
newRange.collapse(true)
selection.removeAllRanges()
selection.addRange(newRange)

为什么要替换
内容
？它已经包含编辑，并且插入符号位于最后一个位置。如果替换innerHTML，它将有效地在视图中构建新元素，显然，它将失去插入符号的位置。基本上有两种情况，您需要区分它们：当编辑来自用户时（在这种情况下，您不想替换
内容
），以及当编辑来自外部源时。如果您想在第二种情况下保留插入符号，请查看。不，此.content尚未包含编辑。当我添加console.log（this.content）时，它会显示旧文本。注意v-html，它不是输入或文本区域。2.那篇文章是关于获得职位的，但我在设置职位方面遇到了问题。我想说的是，你不必将编辑后的值（
e.target.innerHTML
）分配给
内容。因此，您有了更改（
e.target.innerHTML
）和插入符号位置。不要期望
内容
更新为您的最新编辑（它不是
v-model
，而是
v-html
）。当
content
发生更改时，它仅使用
content
的最新值替换innerHTML。如果需要
v-model
行为，请将
与
v-model
一起使用。但是，同样，您已经有了编辑和插入符号位置。你想达到什么目的？基本上，最后我希望在不丢失插入符号位置的情况下，将文本的选定部分包装在一些标记中。但如果我更改this.content或innerHTML，插入符号位置将重置。所以我需要恢复插入符号的位置。