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光标位置插入内容”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。