获取准确的插入符号位置答案

【问题标题】：Get exact caret position获取准确的插入符号位置
【发布时间】：2013-03-15 16:36:09
【问题描述】：

如何在 tinyMCE 中获取当前插入符号的位置？提到这个问题“Get cursor position or number of line on which the cursor is in TinyMCE”，提到了如何在 tinyMCE 中获取行号，但是我找不到关于如何获取实际插入符号位置的参考？我需要这个，因为我使用 tinyMCE 作为实时协作的文档，因此我需要知道客户在同一个文档中书写的插入符号的位置，以便我在某些事件（击键、点击等）上广播位置。 ) 并在位置上绘制自定义插入符号，以便一位客户知道另一位客户在哪里写作或编辑。

我找到的唯一解决方案是在内容后添加一个跨度，选择它并删除它，如下所示：

     <span id="caret_pos_holder"></span>

然后一旦插入，执行此操作...

     ed.selection.select(ed.dom.select('span#caret_pos_holder')[0]); //select the span
     ed.dom.remove(ed.dom.select('span#caret_pos_holder')[0]); //remove the span

这是唯一的解决方法吗？

编辑：实际上上面只是将光标的位置设置到内容的末尾，我已经使用书签处理了这一点。

难道没有什么东西可以获取光标的位置吗？

【问题讨论】：

你希望得到什么？代表插入符号位置的单个数字？
好吧！这正是我所需要的，因为当用户使用鼠标或箭头键键入或移动插入符号时，我需要一直知道插入符号在哪里。但这似乎几乎是不可能的！
我不认为一个数字就足够了。也许是一条通往元素的道路？类似html > body > div:first-child + table > thead:first-child + tbody > tr:first-child + tr > td:first-child + td + td > p:first-child+ p > strong:first-child > the 53rd character
这不是与 HTML 的天然契合：用户在屏幕上看到的内容与 DOM 之间的相关性有点令人费解。例如，HTML 中的多个空格折叠成屏幕上的一个空格，可以使用 CSS 隐藏元素，屏幕上的换行符隐含地来自块元素。
说了这么多，您可能会发现以下有用：stackoverflow.com/a/8757511/96100 和 stackoverflow.com/a/13950376/96100。您需要稍微调整一下以使用 iframe 的文档而不是 document。

标签： javascript tinymce getselection

【解决方案1】：

var sel = ed.selection.getSel();

将当前选择作为选择对象返回。然后您可以查询sel.anchorNode 和sel.anchorOffset 以获取当前插入符号的位置。

将这些数据广播给其他客户端比尝试将位置提取为数字更容易，但如果确实有必要，您可以从上面给出的位置爬上 DOM。

【讨论】：