【Vue】div使用contenteditable作为编辑框，如何设置光标？

Z时代
2024-01-10
分类：技术分享

<div contenteditable="true" class="replyContent" v-html="replyContent" @keyup="changeData($event)" ></div>
insertEmoji: function (url) {
var tpl = `<img src="https://segmentfault.com/q/1010000007923945/${ url }" width="24" class="emoji-item-img" />`
// console.log(this.replyContent);
this.replyContent += tpl
// console.log(this.replyContent);
},
changeData: function (event) {
this.replyContent = event.srcElement.innerHTML
// this.$set(this.$data, 'replyContent', event.srcElement.innerHTML)
}

执行emoji方法后，输入的时候，光标回回跳到首位

请问有什么解决方案？或者emoji有什么方法插入容器？

very much Thanks in advance~~~

回答

结贴！！！

在网上搜索了许多解决办法，均是用getSelection、getRange(0)去设置光标解决

一开始，也是顺着这样的方向摸索，在keyup和插入图片都分别设置光标，但是问题百出

最后，意外发现，因为keyup和插入图片均是编辑框的事件，所以给编辑框设置光标即可解决问题

分享下我的代码，希望能帮助到有需要的人

var edit = document.querySelector('.edit')
        edit.onfocus = function () {
          window.setTimeout(function () {
            var sel, range;
            if (window.getSelection && document.createRange) {
              range = document.createRange();
              range.selectNodeContents(edit);
              range.collapse(true);
              range.setEnd(edit, edit.childNodes.length);
              range.setStart(edit, edit.childNodes.length);
              sel = window.getSelection();
              sel.removeAllRanges();
              sel.addRange(range);
            } else if (document.body.createTextRange) {
              range = document.body.createTextRange();
              range.moveToElementText(edit);
              range.collapse(true);
              range.select();
            }
          }, 1)
        }        edit.focus();