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

前端  /  管理员 发布于 5年前   659

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

您可能感兴趣的文章:

• Vue中div contenteditable 的光标定位方法
• 基于Vue插入视频的2种方法小结
• Vue中插入HTML代码的方法
• vue.js在标签属性中插入变量参数的方法
• 利用vue.js插入dom节点的方法