ckeditor: How to select all text inside editor on focus?

Question

I am using ckeditor for text formating and there is default text inside editor which I want to show selected on focus at all time.

Here is my code

HTML:

<textarea id="FirstTextEditor" >Hello</textarea>

Javascript:

$(document).ready(function(){
    CKEDITOR.instances.FirstTextEditor.on('focus', function () {
        // What is code i want write to select all text on focus?
    });
});

This might help moving forward: [HTMLInputElement.setSelectionRange()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement.setSelectionRange). — palaѕн, Jun 17 '14 at 12:12
[The answer posted here](http://stackoverflow.com/a/6150060) worked for me — depoulo, Feb 19 '15 at 15:56

score 1 · Answer 1 · answered Oct 15 '14 at 12:42

1

You can simply achieve what you want like this:

CKEDITOR.instances.["your instance here"].on( 'focus', function () { this.execCommand( 'selectAll' ); });

answered Oct 15 '14 at 12:42

salihcenap

1,927
22
25

score 0 · Answer 2 · answered Jun 17 '14 at 15:22

If you used JQuery, it would look like:

$(document).ready(function(){
    $('textarea').focus(function(e){
        var that = this;
        setTimeout(
            function() {
                that.select()
            }, 0);
    });
});

JSFiddle - http://jsfiddle.net/s6Z82/5/

The only thing you now have to figure out is how do you get the current element from the CKEDITOR.instances.FirstTextEditor.on callback and you are done.

Why the setTimeout(.., 0)?

Cause seems in Chrome e.preventDefault() does not stop it from discarding the select and putting the cursor to the end of the line.

ckeditor: How to select all text inside editor on focus?

2 Answers2