vue可编辑div_Vue实现可编辑div获取焦点

只要精神不滑坡，办法总比困难多

前言

当div设置contenteditable属性实现可编辑时，可以调用document.execCommand方法向可编辑div中插入内容。如果可编辑div没有点击或者失去了焦点，都无法实现将元素插入到可编辑div中，接下来就跟大家分享下，如何让div获取焦点，解决这一BUG。先看下我们最终实现的效果：

实现思路

上述gif图中表情插入div的具体实现，可阅读我的另一篇文章: Vue实现图片与文字混输

定义一个函数实现div获取焦点

给可编辑div元素绑定id属性

通过document.querySelector方法获取可编辑div元素

拿到可编辑div元素后调用focus方法实现div焦点的获取

点击表情图标时绑定点击事件指向第一步声明的函数

实现过程

在实现之前我们先看看掘金的发沸点功能，入图所示：掘金用的也是可编辑div实现，点击表情图标时，他也用了和我同样的方法让div获取焦点，然后插入图片到可编辑div。

可编辑div设置id

复制代码实现获取焦点函数

getEditableDivFocus: function (){

document.querySelector('#msgInputContainer').focus();

}

复制代码工具栏绑定toolbarSwitch函数