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