vue項目中如何在可編輯div光標位置插入內容

這篇文章將為大家詳細講解有關vue項目中如何在可編輯div光標位置插入內容，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

vue項目中在可編輯div光標位置插入內容

html：

<div class="mouse-move fl f12 h32 lh32 mg-r5 sms-item"
   @dragstart="dragStart($event, item.labelName)"
   draggable='true'
 v-for="(item, index) in modelCommonList"
   :key="index"
   @click="dropRelease($event, item.labelName)">
   {{item.labelName}}
 </div>
<div contenteditable="true"
   @drop="dropRelease($event)"
   @dragover="allowDrop($event)"
   ref="smsContent"
   class="border-r4 f12 h200 pd-tb10 pd-lr10 overflow-scroll-y editable-div"
   id="smsContent">
</div>

methods：

 insertHtmlAtCaret(html) {
    let sel, range;
    if (window.getSelection) {
      // IE9 and non-IE
      sel = window.getSelection();
      if (sel.getRangeAt && sel.rangeCount) {
        range = sel.getRangeAt(0);
        range.deleteContents();
        let el = document.createElement("div");
  el.appendChild(html)
        var frag = document.createDocumentFragment(), node, lastNode;
        while ((node = el.firstChild)) {
          lastNode = frag.appendChild(node);
        }
        range.insertNode(frag);
        if (lastNode) {
          range = range.cloneRange();
          range.setStartAfter(lastNode);
          range.collapse(true);
          sel.removeAllRanges();
          sel.addRange(range);
        }
      }
    } else if (document.selection && document.selection.type != "Control") {
      // IE < 9
      document.selection.createRange().pasteHTML(html);
    }
  },
 //開始拖動可選字段
  dragStart(event, name) {
    event = event || window.event;
    this.dragging = name; //str
    event.dataTransfer.setData(" ", " "); //for firefox
  },
  //阻止默認事件
  allowDrop(event) {
    let e = event || window.event;
    if (e && e.preventDefault) {
      e.preventDefault();
    } else {
      window.event.returnValue = false;
    }
  },
  //拖動到指定位置并釋放
  dropRelease(event, nodeValueName) {
    event = event || window.event;
    event.preventDefault();
    let textNode = document.createElement('input');
    textNode.className = 'mg-lr5 enabledTag';
    textNode.type = 'button';
    textNode.value = this.dragging || nodeValueName;
    this.insertHtmlAtCaret(textNode);
    this.dragging = '';
  },

關于“vue項目中如何在可編輯div光標位置插入內容”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。