CKEditor 4：如何获取和设置光标/插入符号的位置？

Question

我正在寻找一种方法来做两件非常基本的事情。我只想检索文本中插入符号的位置。然后我想将插入符号定位在文本中的特定位置。目的是能够以编程方式修改文本。

我发现很多人都在尝试做各种类似的事情，但并不是我想要的。事实上，大多数解决方案都在查看 HTML、查找范围和 DOM 元素。也许这是要走的路，但我还没有找到可行的解决方案。

查看获取光标位置。我从各种来源（例如this one）找到了以下解决方案：

var selection = e.editor.getSelection();
var range = selection.getRanges()[0];
var cursor_position = range.startOffset;

但这并不能解决我的问题。在以下文本中：

苹果

弓箭手

口音

如果将光标连续放在每个单词的A之后，则每次都返回1。我想要的是在第一个 A 之后获得 1，然后在第二个 A 之后获得 6，最后在第三个 A 之后获得 13。

换句话说，更多的问题是光标在文本中的哪个字符位置。例如，它应该允许我在文本中的第 X 个字符之后插入文本。

感谢您的帮助

Answer 1

查看您的上一条评论，您可能想尝试在 CKEditor 中实现类似书签之类的功能，但更耐用。正如我所解释的，当您将数据发布到服务器或只是切换到源模式并返回时，原始书签会被删除。更重要的是，我建议使用的空白跨度已被编辑器删除，因为它们没有视觉表示并被视为垃圾。

您可以做的是使用protectedSource 来保护您的自定义书签跨度：

var editor = CKEDITOR.replace( 'editor1', {
    language: 'en',
    protectedSource :  /<span.*class="my-break-point".*\/>/g
});

接下来，您需要提供自定义代码，该代码将在您需要时将<span class="my-break-point"/> 插入到编辑器 HTML 中，并跟踪书签，以便在插入下一个时删除前一个。

当然，这只是一个基本示例。如果选择没有折叠，您可以有一个书签用于折叠选择或两个书签用于选择的开始/结束。

请先尝试插入书签，然后查看 HTML 中插入的折叠和非折叠选择的内容： - https://docs.ckeditor.com/ckeditor4/docs/#!/api/CKEDITOR.dom.range-method-createBookmark - https://docs.ckeditor.com/ckeditor4/docs/#!/api/CKEDITOR.dom.range-method-createBookmark2

示例代码：

var range = editor.getSelection().getRanges()[0];
var bm = range.createBookmark();

如果有什么不清楚的地方，请告诉我。