在已编辑元素的 HTML 中获取 CKEditor 4 中的光标位置答案

【问题标题】：Get cursor position in CKEditor 4 within edited element's HTML在已编辑元素的 HTML 中获取 CKEditor 4 中的光标位置
【发布时间】：2015-03-13 20:30:05
【问题描述】：

我使用内联 CKEditor 来编辑页面上的元素。因此，当我使用某个类单击 DIV 时，CKEditor 会附加到它，当它失去焦点时，编辑器实例会被破坏。在 CKEditor 实例被销毁后，我需要将 HTML 元素插入到该 DIV 中 - 在销毁编辑器实例之前插入光标的最后一个位置。所以我基本上需要知道已编辑元素的 HTML 中光标的索引，因为它将被视为纯文本（对于下面的示例，它将是 25）。我不想修改原始数据。

我的 DIV 中有这样的 HTML：
"some <span>text</span> wi|th <b>html</b> tags"（其中“|”是光标位置）

我试图获取范围并将其扩展到可编辑元素的开头：

var range = editor.getSelection().getRanges()[ 0 ];    
range.collapse( true );
range.setStartAt( editor.editable(), CKEDITOR.POSITION_AFTER_START );

这里range.endOffset 是3（就像我没有扩展范围一样）。但即使我总结了更多元素的偏移量，它也不能解决我的问题，因为它排除了 HTML 标记。

【问题讨论】：

标签： ckeditor

【解决方案1】：

如果你想在编辑器被销毁后使用范围，你将无法使用它们，因为在被销毁时，编辑器会用数据替换可编辑的内部 HTML，它们不是一回事。

相反，您应该在编辑器被销毁之前为选择创建一个标记，并在数据中找到这个标记。

有关如何实现这一点的想法，请参阅此主题：Retain cursor position after reloading the page in CKEditor。

【讨论】：

这几乎就是我现在所拥有的。但不是editor.getSelection().createBookmarks() 我有editor.insertElement(tempElement)。这两种解决方案的问题是，当我检查用户是否修改了数据（在编辑器关闭时）时，editor.checkDirty() == true，因此更改的 HTML 被发送到服务器。然后，如果用户最终不想在该位置添加任何内容，我必须删除该时间元素并将数据再次发送到服务器作为更改。在我看来，这就像一个黑客。我只想在元素真正改变时才将元素添加到数据中。
当您保存数据时，这是 CKEditor 外部逻辑的工作。例如，您可以使用正则表达式找到此标记，将其替换为空字符串并记住其在字符串中的位置。创建该标记并没有什么不妥之处——考虑到从编辑器获取数据时发生的数据处理，这实际上是唯一可能的解决方案。