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

html：

@dragstart="dragStart($event, item.labelName)"

draggable='true'

v-for="(item, index) in modelCommonList"

:key="index"

@click="dropRelease($event, item.labelName)">

{{item.labelName}}

@drop="dropRelease($event)"

@dragover="allowDrop($event)"

ref="smsContent"

class="border-r4 f12 h100 pd-tb10 pd-lr10 overflow-scroll-y editable-div"

id="smsContent">

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 怎么在字符串中指定位置插入字符_vue项目中在可编辑div光标位置插入内容的实现代码...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。