【重要重要】如何在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





获取焦点位置并在焦点位置插入指定内容


 








直接上代码了。

自己输入的内容插入到光标的位置。

在你输入你想插入的内容之前就触发可编辑的div的失去焦点事件。此时光标的位置就获取到了。然后你插入内容的时候直接在刚才失去光标的地方就可以了。所以这里sel和range都是全局变量。insertHtmlAtCaret这个函数里直接用的是失去焦点时定义的那个sel和range。
————————————————
版权声明:本文为CSDN博主「夏天想」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_33769914/article/details/93596502

 

你可能感兴趣的:(【重要重要】如何在div是contentEditable=true的里面获取光标的位置,并在光标位置处插入内容。焦点位置插入指定内容)