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

21 浏览量更新于2023-05-04 评论收藏 33KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

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

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

html：

<div class="mouse-move fl f12 h22 lh22 mg-r5 sms-item"

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

draggable='true'

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

:key="index"

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

</div>

<div contenteditable="true"

@drop="dropRelease($event)"

@dragover="allowDrop($event)"

ref="smsContent"

class="border-r4 f12 h100 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 = '';

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

weixin_38625448

粉丝: 8
资源: 956

会员权益专享

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

评论0

会员权益专享

最新资源

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

评论0

Vue中div编辑组件ytDivEdit.vue

DIV可编辑模式在光标位置插入内容

vue获取textarea的光标位置.js

vue 中div标签根据光标插入元素

vue 中div标签根据光标插入换行元素

vue 获取div光标位置

光标所在位置插入字符 vue

vue3实现一个输入框光标位置插入指定字符

vue实现一个富文本编辑框，可以在指定位置插入html元素，并且可以设置光标位置

vue点击按钮在光标中插入值

在vue项目中使用Rainbow.js实现代码高亮展示

用可编辑vue移动端用可编辑div替代input

vue3 光标所在位置插入字符

vue如何插入一个div

在 Vue 中，如果在一个元素上添加了 contenteditable="true" 属性，用户可以在该元素中输入和删除文本。但是，有时候在删除完内容后，光标会消失代码怎么实现详细一点

vue3，光标所在位置插入字符，没有选中光标的话默认在输入框最前面添加字符

vue 插入html代码片段

vue在script标签中向div插入一个button

vue动态插入div

vue在script标签中向已有div插入一个button，给出详细代码

会员权益专享

最新资源