为什么要在contentEditable=true的div里面获取光标呢？因为这篇文章https://blog.csdn.net/qq_33769914/article/details/85002918我们知道想在一个内容里面插入一个新的内容，如果这个新的内容是段html代码。最后显示的是有样式的。那么用input是无法实现的。
所以我们考虑用contentEditable=true的div。在这里面输入的html就没问题啦。
————————————————
版权声明：本文为CSDN博主「夏天想」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_33769914/article/details/93596502
<!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。
————————————————
版权声明：本文为CSDN博主「夏天想」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_33769914/article/details/93596502
原文地址：https://www.cnblogs.com/BluceLee/p/12099981.html