最近在實現webIM功能，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
        }
      },