Vue.js를 사용하여 프로펠을 변경한 후 편집 가능한 div의 캐럿 위치

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>

캐럿 위치를 유지하고 내용을 업데이트하려면 어떻게 해야 합니까?

다른 비슷한 게시물을 본 적이 있지만, Vue.js용 솔루션이 아니거나, 내 경우 작동하지 않거나, 제대로 적용하지 못했을 수 있습니다.

몇 가지 시나리오를 테스트했습니다만, 실제로 필요한 것은, 이 투고에 기재되어 있는 「Create a reusable editable component」라고 하는 것입니다.

단, 모든 컴포넌트를 하나의 컴포넌트에 포함시키려면 크롬에서 다음 코드를 사용할 수 있습니다.

<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>

Chrome의 Vue 플러그인이 다음 값을 올바르게 업데이트하지 않는 것 같습니다.content따라서 이 시나리오에서는 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)

언급URL : https://stackoverflow.com/questions/57133249/caret-position-in-editable-div-after-prop-change-using-vue-js