【重要重要】如何在div是contentEditable=true的里面获取光标的位置，并在光标位置处插入内容。焦点位置插入指定内容

为什么要在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>

//在复杂公式的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

【重要重要】如何在div是contentEditable=true的里面获取光标的位置，并在光标位置处插入内容。焦点位置插入指定内容

猜你喜欢