Javascript 如何在阴影dom中的contenteditable div中获取光标位置？

我试图在shadowdom中实现一个自定义文本编辑器功能。我需要获取contenteditable div中的当前光标位置

我已经尝试了几种方法。但是没有一个能提供所需的输出。

试一下

/*
iPad需要style=“-webkit user select:text；”
*/
函数getCaretCharacterOffsetWithin（元素）{
var caretofset=0；
var doc=element.ownerDocument | | element.document；
var win=doc.defaultView | | doc.parentWindow；
var-sel；
if（typeof win.getSelection！=“未定义”）{
sel=win.getSelection（）；
如果（选择范围计数>0）{
var range=win.getSelection（）.getRangeAt（0）；
var precretange=range.cloneRange（）；
预重排列。选择节点内容（元素）；
precretange.setEnd（range.endContainer，range.endOffset）；
CareTofset=precretange.toString（）.length；
}
}如果（（选择=文件选择）&&sel.type！=“控制”）{
var textRange=sel.createRange（）；
var precarteTextRange=doc.body.createTextRange（）；
PrecretTextRange.moveToElementText（元素）；
setEndPoint（“EndToEnd”，textRange）；
CareTofset=PrecretTextRange.text.length；
}
返回caretofset；
}
函数getCaretPosition（）{
if（window.getSelection&&window.getSelection（）.getRangeAt）{
var range=window.getSelection（）.getRangeAt（0）；
var selectedObj=window.getSelection（）；
var rangeCount=0；
var childNodes=selectedObj.anchorNode.parentNode.childNodes；
对于（var i=0；i
不可编辑文本。可编辑内容如下：
您好，一些粗体、斜体和粗体文本
以


/*
iPad需要style=“-webkit user select:text；”
*/
函数getCaretCharacterOffsetWithin（元素）{
var caretofset=0；
var doc=element.ownerDocument | | element.document；
var win=doc.defaultView | | doc.parentWindow；
var-sel；
if（typeof win.getSelection！=“未定义”）{
sel=win.getSelection（）；
如果（选择范围计数>0）{
var range=win.getSelection（）.getRangeAt（0）；
var precretange=range.cloneRange（）；
预重排列。选择节点内容（元素）；
precretange.setEnd（range.endContainer，range.endOffset）；
CareTofset=precretange.toString（）.length；
}
}如果（（选择=文件选择）&&sel.type！=“控制”）{
var textRange=sel.createRange（）；
var precarteTextRange=doc.body.createTextRange（）；
PrecretTextRange.moveToElementText（元素）；
setEndPoint（“EndToEnd”，textRange）；
CareTofset=PrecretTextRange.text.length；
}
返回caretofset；
}
函数getCaretPosition（）{
if（window.getSelection&&window.getSelection（）.getRangeAt）{
var range=window.getSelection（）.getRangeAt（0）；
var selectedObj=window.getSelection（）；
var rangeCount=0；
var childNodes=selectedObj.anchorNode.parentNode.childNodes；
对于（var i=0；i
不可编辑文本。可编辑内容如下：
您好，一些粗体、斜体和粗体文本
使用shadowRoot元素，而不是
window.getSelection
，您需要将该元素作为参数传入
getCaretPosition
。假设您有
getCaretPosition（shadowRoot）
，那么代码将更改为
shadowRoot.getSelection

有关ShadowRoot上可用的功能，请参见。
而不是
窗口。getSelection
，使用ShadowRoot元素，您需要将该元素作为参数传入
getCaretPosition
。假设您有
getCaretPosition（shadowRoot）
，那么代码将更改为
shadowRoot.getSelection

有关ShadowRoot上可用的功能，请参阅。
请查找代码笔链接：可能的重复：我已经看过了，并为其附加了代码笔。但是我需要得到阴影dom中的光标位置。当在shadow-dom内部实现时，代码始终返回0。可能与shadow-dom有什么关系？请查找codepen链接：可能的dupluicate:我已经检查过了并附加了代码