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

Question

我使用内联 CKEditor 来编辑我页面上的元素。因此，当我用一些 class 单击 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 标签。

Answer 1

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

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

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

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

Get cursor position in CKEditor 4 within edited element's HTML

ckeditor