vue项目中如何在可编辑div光标位置插入内容
这篇文章将为大家详细讲解有关vue项目中如何在可编辑div光标位置插入内容，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
创新互联公司是一家集网站设计制作、成都网站建设、网站页面设计、网站优化SEO优化为一体的专业的建站公司，已为成都等多地近百家企业提供网站建设服务。追求良好的浏览体验,以探求精品塑造与理念升华,设计最适合用户的网站页面。 合作只是第一步，服务才是根本,我们始终坚持讲诚信，负责任的原则，为您进行细心、贴心、认真的服务,与众多客户在蓬勃发展的市场环境中,互促共生。
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光标位置插入内容
文章转载：
http://bjjierui.cn/article/jiosic.html
