为什么要在contentEditable=true的div里面获取光标呢？因为这篇文章
https://blog.csdn.net/qq_33769914/article/details/85002918
我们知道想在一个内容里面插入一个新的内容，如果这个新的内容是段html代码。最后显示的是有样式的。那么用input是无法实现的。
所以我们考虑用contentEditable=true的div。在这里面输入的html就没问题啦。
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>获取焦点位置并在焦点位置插入指定内容</title>
</head><body>
<div contenteditable=”true” class=”fxAnswer” οnblur=”getblur()”></div>
<input type=”text” id=”text” placeholder=”想要添加进去的内容”/>
<button type=”button” id=”btn”>添加</button><script type=”text/javascript” src=”js/jquery.min.js” ></script>
<script type=”text/javascript”>
var sel,range;
var textContent;
//失去焦点时获取光标的位置
function getblur(){
sel = window.getSelection();
range = sel.getRangeAt(0);
range.deleteContents();
}//在复杂公式的div contenteditable=true的位置获取焦点并插入内容
function
insertHtmlAtCaret
(html){
if (window.getSelection) {
// IE9 and non-IE
if (sel.getRangeAt && sel.rangeCount) {
var el = document.createElement(“div”);
el.innerHTML = html;
var frag = document.createDocumentFragment(), node, lastNode;
while ((node = el.firstChild)) {
lastNode = frag.appendChild(node);
}
range.insertNode(frag);
// Preserve the selection
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);
}
textContent=$(“.fxAnswer”).html();//这个也很重要。因为如果不写可能就会覆盖了原来内容替换成你添加的。或者是干脆不显示了。textContent是全局变量是你输入的内容。
}//如果默认没有获取焦点，你去直接写内容点添加可能报错。因为他没有走失去焦点函数。sel和range还没有定义呢。就会报错。加上$(“.fxAnswer”).focus();这句让他默认就获取焦点就能解决这个报错。
//如果你去先把焦点放在可编辑的div，再失去焦点此时sel和range就已经赋值了，就没问题。
//$(“.fxAnswer”).focus();$(“#btn”).click(function(){
textContent=$(“#text”).val();
insertHtmlAtCaret(textContent)
})
</script>
</body>
</html>
直接上代码了。
自己输入的内容插入到光标的位置。
在你输入你想插入的内容之前就触发可编辑的div的失去焦点事件。此时光标的位置就获取到了。然后你插入内容的时候直接在刚才失去光标的地方就可以了。所以这里sel和range都是全局变量。
insertHtmlAtCaret这个函数里直接用的是失去焦点时定义的那个sel和range。
哎呀百度了那么多的例子，自己终于写出来。希望对大家有帮助。