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

问题

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.

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

回答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).

回答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:

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

回答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>");

回答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.

回答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 ])

回答7:

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

回答8:

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

来源：https://stackoverflow.com/questions/4536532/how-to-set-cursor-position-to-end-of-text-in-ckeditor

标签

ckeditor

fckeditor