如何在CKEditor中将光标位置设置为文本末尾？

Question

有没有办法将光标设置在 CKEditor 内容的末尾？

这位开发者也问过，但没有得到答复：

http://cksource.com/forums/viewtopic.php?f=11&t=19877&hilit=cursor+end

我想将焦点设置在 CKEditor 内的文本末尾。当我使用时：

ckEditor.focus();

它将我带到 CKEditor 中已经存在的文本的开头。

Answer 1

Dan 的回答对我来说得到了奇怪的结果，但微小的变化（除了错字修复）使它起作用：

var range = me.editor.createRange();
range.moveToElementEditEnd( range.root );
me.editor.getSelection().selectRanges( [ range ] );

Answer 2

根据 CKEditor 4 的文档，您可以在拥有编辑器对象后执行以下操作。

var range = editor.createRange();
range.moveToPosition( range.root, CKEDITOR.POSITION_BEFORE_END );
editor.getSelection().selectRanges( [ range ] );

链接：http://docs.ckeditor.com/#!/api/CKEDITOR.dom.selection（在 selectRanges 函数下）。

Answer 3

经过一番摆弄，我已经让它与以下代码一起工作：

$(document).ready(function() {

    CKEDITOR.on('instanceReady', function(ev) {

        ev.editor.focus();

        var s = ev.editor.getSelection(); // getting selection
        var selected_ranges = s.getRanges(); // getting ranges
        var node = selected_ranges[0].startContainer; // selecting the starting node
        var parents = node.getParents(true);

        node = parents[parents.length - 2].getFirst();

        while (true) {
            var x = node.getNext();
            if (x == null) {
                break;
            }
            node = x;
        }

        s.selectElement(node);
        selected_ranges = s.getRanges();
        selected_ranges[0].collapse(false);  //  false collapses the range to the end of the selected node, true before the node.
        s.selectRanges(selected_ranges);  // putting the current selection there
    }

});

这个想法是：

1. 获取根节点（不是正文）
2. 前进到下一个节点，直到没有更多节点可以前进。
3. 选择最后一个节点。
4. 收起
5. 设置范围

Answer 4

这是@peter-tracey 的类似答案。就我而言，我的插件正在插入引文。如果用户进行了选择，我需要禁用选择并将光标放在句子的末尾。

  // Obtain the current selection & range
  var selection = editor.getSelection();
  var ranges = selection.getRanges();
  var range = ranges[0];

  // Create a new range from the editor object
  var newRange = editor.createRange();

  // assign the newRange to move to the end of the current selection
  // using the range.endContainer element.
  var moveToEnd = true;
  newRange.moveToElementEditablePosition(range.endContainer, moveToEnd);

  // change selection
  var newRanges = [newRange];
  selection.selectRanges(newRanges);

  // now I can insert html without erasing the previously selected text.
  editor.insertHtml("<span>Hello World!</span>");

Answer 5

CKEditor 3.x：

on : {
        'instanceReady': function(ev) {
           ev.editor.focus();
           var range = new CKEDITOR.dom.range( ev.editor.document );
           range.collapse(false);
           range.selectNodeContents( ev.editor.document.getBody() );
           range.collapse(false);
           ev.editor.getSelection().selectRanges( [ range ] );
        }
     }

基于此处开发人员提供的伪代码：

https://dev.ckeditor.com/ticket/9546#comment:3

您必须聚焦编辑器，获取文档对象，将其放在范围内， 折叠范围（带有 false 参数），选择主体（带有 selectNodeContents），折叠它（使用 false 参数），最后 选择范围。最好在 instanceReady 事件中完成。

Answer 6

这是 ckeditor API 提供的最简单的解决方案。我已经在 IE10+、ff、safari 和 Chrome 上测试过：

range = editor.createRange();
// the first parameter is the last line text element of the ckeditor instance
range.moveToPosition(new CKEDITOR.dom.node(editor.element.$.children[pos - 1]), CKEDITOR.POSITION_BEFORE_END)
range.collapse()
editor.getSelection().selectRanges([ range ])

Answer 7

这肯定会奏效。 CKEDITOR.config.startupFocus = 'end';

Answer 8

你试过 ckEditor.Selection.Collapse(false);