How to set cursor position to end of text in CKEditor?

Question

Is there a way to set the cursor to be at the end of the contents of a CKEditor?

This developer asked too, but received no answers:

http://cksource.com/forum

Answer 1

Here's a similar answer to @peter-tracey. In my case my plugin is inserting a citation. If the user has made a selection, I needed to disable the selection and place the cursor at the end of the sentence.

  // 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 2

have you tried ckEditor.Selection.Collapse(false);

Answer 3

After a bit of fiddling, I've got it to work with the following code:

$(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
    }

});

The idea is:

1. Get the root node (not body)
2. Advance to next node, until there are no more nodes to advance to.
3. Select last node.
4. Collapse it
5. Set range

Answer 4

According to the documentation for CKEditor 4, you can do the following once you have the editor object.

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

Link: http://docs.ckeditor.com/#!/api/CKEDITOR.dom.selection (under selectRanges function).

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 ] );
        }
     }

based on pseudo-code provided by the developers here:

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

You have to focus editor, get document object, put it in range, collapse range (with false parameter), select body (with selectNodeContents), collapse it (with false parameter) and finally select range. It is best to do it all in instanceReady event.

Answer 6

Dan's answer got strange results for me, but minor change (in addition to typo fix) made it work:

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