可编辑div在光标位置插入指定内容

//在光标位置插入内容
insertContent(content) {if (!content) {//如果插入的内容为空则返回return;}let sel = null;if (document.selection) {//IE9以下sel = document.selection;sel.createRange().pasteHTML(content);} else {sel = window.getSelection();if (sel.rangeCount > 0) {let range = sel.getRangeAt(0);      //获取选择范围range.deleteContents();             //删除选中的内容let el = document.createElement("div"); //创建一个空的div外壳 el.innerHTML = content;                 //设置div内容为我们想要插入的内容。let frag = document.createDocumentFragment();//创建一个空白的文档片段，便于之后插入dom树let node = el.firstChild;let lastNode = frag.appendChild(node);range.insertNode(frag);                 //设置选择范围的内容为插入的内容let contentRange = range.cloneRange();  //克隆选区contentRange.setStartAfter(lastNode);          //设置光标位置为插入内容的末尾contentRange.collapse(true);                   //移动光标位置到末尾sel.removeAllRanges();                  //移出所有选区sel.addRange(contentRange);             //添加修改后的选区}}
}

需注意：在谷歌浏览器下测试发现:

document.execCommand("inserHTML", "false", '<p><img src="./test.png" /></p>);

当使用这种方式插入html内容时，p标签不见了，只有img标签存在。但是如果单独插入一个p标签时，p标签又存在。故经多次测试发现inserHTML方式只适合插入单个标签，复合标签插入时则解析错乱。

使用方式

 let imgTag = `<p><img src=${eidtorImg.src} /></p>`;this.insertContent(imgTag);//content内容为html字符串。

可编辑div在光标位置插入指定内容相关推荐

vue 怎么在字符串中指定位置插入字符_vue项目中在可编辑div光标位置插入内容的实现代码...
vue项目中在可编辑div光标位置插入内容 html: @dragstart="dragStart($event, item.labelName)" draggable='true ...
php光标添加,JS在可编辑的div中的光标位置插入内容的方法_javascript技巧
本文实例讲述了js实现在可编辑div中指定位置插入内容的方法,就像我们使用的编辑器一样,分享给大家供大家参考.具体实现方法如下: 首先要让DIV启用编辑模式通过设定contenteditable=t ...
vue光标插入内容_vue项目中在可编辑div光标位置插入内容的实现代码
vue项目中在可编辑div光标位置插入内容 html: @dragstart="dragstart($event, item.labelname)" draggable='true ...
quill光标位置插入html，quill编辑器+word文档上传，插入指定位置
官方quill没有直接给出插入html的方式类似,下面两个方法,是quill框架提供的,但是并没有提供可以在指定光标位置插入html quill.pasteHTML:这个方法已经废弃了,但目前还是可 ...
点击按钮，在input框在光标位置插入文字，系列问题待解决
想制作一个公式设计器,需要在文字的对应位置插入按钮对应的文字,效果如下: 遇到的问题: 1. 如何获取光标位置,并在对应位置插入内容两种情况: (1)用户点击位置后,在光标位置插入内容 (2)用户选 ...
【jQuery插件】insertContent-在文本框光标位置插入内容并选中
在文本框光标位置插入内容在实际的项目应用中经常用到,比如在文本框插入表情,首先要获取光标在文本框中的位置,当然这个有浏览器兼容性问题. IE下可以通过document.selection.create ...
jQuery 输入框在光标位置插入内容, 并选中
// //使用方法 //$(文本域选择器).insertContent("插入的内容"); //$(文本域选择器).insertContent("插入的内容", ...
JS里在光标位置插入字符
<script language=Javascript> function AddOnPos(obj, charvalue) { //obj代表要插入字符的输入框 //va ...
在文本框的光标处插入指定的文本（兼容IE6和Firefox）
昨天有人问我这个事,今天就来做做了,最开始是按自己的思路做,在keyup事件里对输入键做判断,以处理什么退格啊,删除啊,上下左右移动等动作,然后记录光标位置来做文本处理,费了好大劲.不过后来无意中发现 ...

可编辑div在光标位置插入指定内容

可编辑div在光标位置插入指定内容

可编辑div在光标位置插入指定内容相关推荐

最新文章

热门文章