html 长域编辑框,【Web前端问题】div使用contenteditable作为编辑框，如何设置光标？...

insertEmoji: function (url) {

var tpl = ``

// 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();

附上参考url： 参考链接

回答：

我没有明白你到底要干嘛，你给div设置了contenteditable=”true”，那它就是一个输入框了啊，点击获取焦点，输入内容，光标没有出现问题啊，反正我是没看到到底发生了什么

对比：

你的原意是想动态插入一个图片？

监听输入框输入事件，然后获取img的定位值(字体大小加上letter-spacing值)，你试试这样吧，vue没用过，所以只能给你一点原生js实现的建议，有文档的话，你去找找文档吧

回答：

document.execCommand(“insertHTML”,false, ‘’);