vue项目中在可编辑div光标位置插入内容的实现代码

vue项目中在可编辑div光标位置插入内容

html：

   {{item.labelName}}
 

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光标位置插入内容的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！