CKEditor 4:如何获取和设置光标/插入位置?

时间:2017-08-17 19:20:58

标签: text insert ckeditor position cursor

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

我发现很多人试图做各种类似的事情,但不是我想要的。实际上,大多数解决方案都在研究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,然后在第三个之后定位为13。

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

感谢您的帮助

1 个答案:

答案 0 :(得分:0)

查看您的上一条评论,您可能想尝试在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();

如果有任何不清楚的地方,请告诉我。