Javascript 根据contenteditable Div中的插入符号位置获取选定元素

我试图在contenteditable DIV中的任何给定时间获取插入符号所在的元素

到目前为止，我能够得到插入符号在文本中的位置

但我想更进一步，实际选择元素。例如，在我的示例中，如果插入符号位于单词

“wombat”

的第一个字母之后，则解决方案还将返回所选元素

“wombatid”

的

id

，而不仅仅是插入符号的位置。有什么建议或解决方案吗

函数getSelectionCharacterOffsetWithin（元素）{ var start=0； var-end=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（）； 预重排列。选择节点内容（元素）； 预重排列设置结束（range.startContainer，range.startOffset）； start=precretange.toString（）.length； precretange.setEnd（range.endContainer，range.endOffset）； end=precretange.toString（）长度； } }如果（（选择=文件选择）&&sel.type！=“控制”）{ var textRange=sel.createRange（）； var precarteTextRange=doc.body.createTextRange（）； PrecretTextRange.moveToElementText（元素）； setEndPoint（“EndToStart”，textRange）； 开始=precrettextrange.text.length； setEndPoint（“EndToEnd”，textRange）； end=precrettextrange.text.length； } 返回{start:start，end:end}； } 函数reportSelection（）{ var selfoffsets=getSelectionCharacterOffsetWithin（document.getElementById（“编辑器”））； document.getElementById（“selectionLog”）.innerHTML=“选择偏移量：”+selfoffsets.start+，“+selfoffsets.end+”
所选元素的id:“此处元素”； } window.onload=函数（）{ 文档。添加了EventListener（“selectionchange”，reportSelection，false）； 文件。添加的事件列表器（“鼠标”，报告选择，错误）； document.addEventListener（“mousedown”，reportSelection，false）； 文件。addEventListener（“键控”，报告选择，假）； };

#编辑器{
填充物：5px；
边框：纯绿1px；
}

在以下内容中选择一些内容：
袋熊是原产于澳大利亚的有袋动物

要获取ID，您可以尝试以下方法：

document.querySelectorAll("#editor *").forEach(el => el.onclick = e => alert(e.target.id));

这里

e.target

将是您的HTML元素，它应该适用于任何HTML元素

函数getSelectionCharacterOffsetWithin（元素）{ var start=0； var-end=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（）； 预重排列。选择节点内容（元素）； 预重排列设置结束（range.startContainer，range.startOffset）； start=precretange.toString（）.length； precretange.setEnd（range.endContainer，range.endOffset）； end=precretange.toString（）长度； } }如果（（选择=文件选择）&&sel.type！=“控制”）{ var textRange=sel.createRange（）； var precarteTextRange=doc.body.createTextRange（）； PrecretTextRange.moveToElementText（元素）； setEndPoint（“EndToStart”，textRange）； 开始=precrettextrange.text.length； setEndPoint（“EndToEnd”，textRange）； end=precrettextrange.text.length； } 返回{start:start，end:end}； } 函数reportSelection（）{ var selfoffsets=getSelectionCharacterOffsetWithin（document.getElementById（“编辑器”））； document.getElementById（“selectionLog”）.innerHTML=“选择偏移量：”+selfoffsets.start+，“+selfoffsets.end+”
所选元素的id:“此处元素”； } window.onload=函数（）{ 文档。添加了EventListener（“selectionchange”，reportSelection，false）； 文件。添加的事件列表器（“鼠标”，报告选择，错误）； document.addEventListener（“mousedown”，reportSelection，false）； 文件。addEventListener（“键控”，报告选择，假）； document.queryselectoral（“#editor*”）.forEach（el=>el.onclick=e=>alert（e.target.id））； };

#编辑器{
填充物：5px；
边框：纯绿1px；
}

在以下内容中选择一些内容：
袋熊是原产于澳大利亚的有袋动物