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/forums/viewtopic.php?f=11&t=19877&hilit=cursor+end

I would like to set the focus at the end of the text inside a CKEditor. When I use:

ckEditor.focus();

It takes me to the beginning of the text already inside the CKEditor.

Answer 1

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

Answer 2

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

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

This is the easiest solution provided by the ckeditor API. I have tested it on IE10+, ff, safari and 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

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

Answer 8

This will work for sure. CKEDITOR.config.startupFocus = 'end';