vue可输入div contenteditable，ctrl+enter换行，enter不换行发送

最近在实现web IM功能，textarea组件不能插入标签，于是使用了可输入div，添加contenteditable=true

发送按钮常用的快键键就是enter，

默认浏览器enter会触发换行，使用event.preventDefault()即可阻止浏览器的换行

但是ctrl+enter，添加\n让其换行之后，光标位置却被移动到第一个位置

以下代码可使ctrl+enter换行并且保留当前光标位置

   <div ref="textarea" class="textarea" contenteditable="true" tabindex="1"  v-if="toIm !== ''" placeholder="请输入"  @keydown="textareaKeydown($event)"></div>
          

      //换行并重新定位光标位置
      textareaRange() { 
        var el = this.$refs.textarea
        var range = document.createRange();
        //返回用户当前的选区
        var sel =  document.getSelection();
        //获取当前光标位置
        var offset = sel.focusOffset
        //div当前内容
        var content = el.innerHTML
//添加换行符\n
        el.innerHTML = content.slice(0,offset)+'\n'+content.slice(offset)
//设置光标为当前位置
        range.setStart(el.childNodes[0], offset+1);
        //使得选区(光标)开始与结束位置重叠
        range.collapse(true);
        //移除现有其他的选区
        sel.removeAllRanges();
        //加入光标的选区
        sel.addRange(range);
      },
//监听按键操作
      textareaKeydown (event) {
        if(event.ctrlKey && event.keyCode === 13){
          //ctrl+enter
          this.textareaRange()
        }else if (event.keyCode === 13) {
          //enter
          this.send();
          event.preventDefault() // 阻止浏览器默认换行操作
          return false
        }
      },