Javascript 在内容可编辑中选择更改后的文本

我将要为一个稍微复杂一点的web应用程序编写一个输入系统。文本中的标签显示为引导标签（当contenteditable div模糊时），或当文本聚焦时显示为把手，例如

{{firstname}}

状态的更改是通过

jquerys$（）.html（content）

完成的，在这里，当我聚焦文本字段时，我会根据源更改内容

问题是：如果单击文本，我不想再次单击以放置光标，因为文本已更改。只要我不在标记内部而是在contenteditable根元素内部单击，它就可以工作。但是，如果我单击contenteditable中标记的内部，则不会设置光标

我的想法是在单击contenteditable时获得鼠标位置，然后在更改文本时将文本光标设置为精确的位置。但是，虽然我知道如何将光标设置为文本节点内的特定偏移量，但我不知道如何在单击时获得必要的偏移量。有什么想法吗

编辑：以下是一个小屏幕上的行为：

Edit2：以下是最小类型的工作示例中重现的问题：

---

你能放一些简单的演示吗？也许，很难重现你的situation@Z.better我加了一个提琴对不起，回复太晚了，我明白你的问题了，但再次抱歉，我不知道如何解决它，看起来很棘手