CKEditor 4:如何获取和设置光标/插入符号的位置? [英] CKEditor 4: How to get and set the cursor / caret position?
问题描述
我正在寻找一种方法来做2个非常基本的事情.我只想检索文本中插入符号的位置.然后，我想将插入号放置在文本中的特定位置.目的是能够以编程方式修改文本.
I am looking for a way to do 2 very basic things. I just want to retrieve the position of the caret in the text. Then I want to position the caret in a specific position in the text. The purpose is to be able to programmatically modify the text.
我发现很多人都在尝试做各种类似的事情，但是这些事情并没有达到我想要的.实际上，大多数解决方案都在研究HTML，查找范围和DOM元素.也许这是要走的路，但我还没有找到可行的解决方案.
I have found many people who were trying to do various similar things but not quite what I wanted. In fact, most solutions are looking into the HTML, finding ranges and DOM elements. Maybe that is the way to go but I haven't found a working solution.
正在寻找光标位置.我从各种来源(例如，此)找到了以下解决方案:
Looking at getting the cursor position. I found the following solution from various sources (this one for example):
var selection = e.editor.getSelection();
var range = selection.getRanges()[0];
var cursor_position = range.startOffset;
但这不能解决我的问题.在以下文本中:
But this does not respond to my problem. In the following text:
苹果
射手
口音
如果将光标连续直接放在每个单词的A后面，则每次返回1.我想要的是在第一个A后面放置1，然后在第二个A之后放置6，然后在第三个之后最后13.
If the cursor is put successively directly after the A of each word, it returns 1 each time. What I would want is to get 1 when positioned after the 1st A, then 6 when positioned after the 2nd A, then finally 13 after the 3rd.
换句话说，更多的问题是文本中光标位于哪个字符位置.例如，它应该允许我在文本中的第X个字符之后插入文本.
In other words, it is more a matter of which character position is the cursor at in the text. It should allow me to insert text after the Xth character in the text for example.
感谢您的帮助
推荐答案
看最后一条评论，您可能想尝试在CKEditor中实现书签等功能，但更持久.正如我已经解释的那样，当您将数据发布到服务器或只是切换到源模式并返回时，原始书签将被删除.而且，我建议使用的空跨度已被编辑器删除，因为它们没有可视化表示并且被认为是垃圾.
Looking at your last comment, you might want to try implementing something like bookmarks in CKEditor but more durable. As I have explained, the original bookmarks are removed when you post data to server or simply switch to source mode and back. What is more, empty spans which I would suggest using, are removed by the editor because they have no visual representation and are considered garbage.
您可以使用protectedSource保护您的自定义书签范围:
What you can do is using protectedSource to protect your custom bookmark spans:
var editor = CKEDITOR.replace( 'editor1', {
language: 'en',
protectedSource : /<span.*class="my-break-point".*\/>/g
});
接下来，您需要提供自定义代码，该代码将在需要时将<span class="my-break-point"/>插入到编辑器HTML中，并跟踪书签，以便在插入下一个时删除上一个.
Next you would need to come up with custom code which will insert <span class="my-break-point"/> into editor HTML whenever you need it and keep track of bookmarks so that it removes previous one when next is inserted.
当然，这只是一个基本示例.如果选择未折叠，则可以具有用于折叠选择的书签，也可以具有两个用于选择的开始/结束的书签.
Of course this is just a basic example. You can have a bookmark for collapsed selection or two bookmarks for start/end of selection if selection is not collapsed.
请先尝试插入书签，然后查看折叠和非折叠选择中插入到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
Please try inserting bookmarks first and see what is inserted into HTML for collapsed and non-collapsed selections: - 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();
如果不清楚，请告诉我.
If anything is unclear, please let me know.
这篇关于CKEditor 4:如何获取和设置光标/插入符号的位置?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
