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.

score 25 · Answer 1 · answered May 31 '13 at 20:14

25

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

answered May 31 '13 at 20:14

Peter Tracey

260
3
4

2

Thanks, same here. Dan's solution did insert the caret for me, but at the right-most point in the editor in line with the expected end point. Yours has fixed it, thanks. – halfer Feb 27 '14 at 16:47
1

Thanks this works.. now to figure out how to programatically enter the editor (focus doesn't bring a caret up) – Dominic Jul 17 '15 at 10:08
in my case, the code set's the caret at the end, but didn't scroll to the end. So I could see only the caret, when I used the scrollbars to go to the end. I helped myself with me.editor.insertHtml(""); and that did the job. – NilsB Jan 08 '22 at 10:51

Dan · Answer 2 · 2013-05-28T16:16:31.230

12

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

edited May 28 '13 at 16:16

answered Apr 30 '13 at 20:11

Dan

885
6
11

What the heck is `[ranges]`?? Is the "s" a typo? – mpen May 23 '13 at 16:10
@Mark, thanks for the catch. It should be `range`. That's what I get for not verifying the CKEditor documentation. – Dan May 28 '13 at 16:17
I wasn't quite sure because the square-bracket syntax makes it almost look like a placeholder for something different. – mpen May 28 '13 at 23:03
Unfortunately, not the cleanest of code. For anyone that's not familiar with JavaScript, `selectRanges` accepts an array of [`CKEDITOR.dom.range`](http://docs.ckeditor.com/#!/api/CKEDITOR.dom.range) objects, and `[range]` creates an array with only the `range` object in it. – Dan May 29 '13 at 12:51
Yes, I figured that out, but the typo through me off :-) Most of those CKEDITOR objects seem to be thin wrappers around the native equivalents. – mpen May 29 '13 at 16:50
@Dan and anyone - whenever you find a bug in the documentation feel free to either report it @ http://dev.ckeditor.com or in case of typos simply create a pull request @ https://github.com/ckeditor/ckeditor-dev – Wiktor Walc Jan 03 '14 at 14:37
So where exactly are you guys putting this code at?? – Abela Feb 21 '14 at 12:29
@Yokhannan: you can run this in a button click handler if your editor is already initialised - get the editor instance from `CKEDITOR.instances.your_name` if necessary. If you are running this code within page initialisation, you'll need to do it within the `instanceReady` CKEditor event, otherwise it will try to assign focus before the editor is able to accept it. – halfer Feb 27 '14 at 16:51
Unfortunatly it doesn't seems to work anymore with 4.4.8. maybe a bug. Not sure. – Clawfire Mar 11 '15 at 10:51

score 5 · Answer 3 · answered Jan 02 '12 at 10:25

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

score 4 · Answer 4 · answered Nov 14 '14 at 23:48

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

score 2 · Answer 5 · answered Oct 03 '13 at 06:28

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.

score 1 · Answer 6 · answered Apr 11 '17 at 02:03

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

score 1 · Answer 7 · answered Dec 11 '18 at 11:24

1

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

answered Dec 11 '18 at 11:24

ARC

1,061
14
33

1

Worked for me in an Inline Ckeditor (4.11) +1 thank you – FlemGrem Oct 24 '19 at 15:56

score 0 · Answer 8 · answered Jan 03 '11 at 07:27

0

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

answered Jan 03 '11 at 07:27

Adyt

1,442
7
26
38

3

I'm not seeing what call your talking about exactly. What's the precise syntax? I don't see a Selection field on my ckeditor object. – BrooklynDev Jan 06 '11 at 22:59

score 0 · Answer 9 · answered Oct 03 '22 at 04:04

According to CKEditor 4 documentation, another option is:

const range = this.ckeditor.createRange()
range.moveToElementEditablePosition(range.root, true)
this.ckeditor.getSelection().selectRanges([range])

Link: https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_dom_range.html#method-moveToElementEditablePosition

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

9 Answers9

Linked

Related