内容可编辑获取位置，包括HTML

Contenteditable get position including HTML

本文关键字：包括 HTML 位置获取编辑更新时间：2023-10-02

我正在研究一种使用JavaScript在HTML文本中创建注释的方法。按照它的工作方式，用户单击可编辑内容的<div>，我会根据他们单击的位置获得光标的位置。然后，当我在文本中放置注释时，我会转到那个字符位置插入脚注指示符。问题是光标在可编辑内容的<div>中的位置没有考虑HTML标记。例如，如果<div>包含以下内容：

AB<b>CD</b>EF

我把光标放在"C"answers"D"之间，位置是3，因为它忽略了<b>。有没有一种方法可以获得包括HTML标记的光标位置，以便在我返回并放置标记时保持一致？如果这打开了其他解决方案，那么<div>不一定需要是contenteditable。

（我目前正在使用此解决方案来获取位置：获取一个范围'；s相对于其父容器的开始和结束偏移量'；s）

我认为这是因为<b>不是容器，<div>是容器。我没有尝试代码，而是尝试将"display: inline-block"分配给<b>，以便将其识别为容器。也许它有效。