CKEDITOR, AutoFocus on the text editor onLoad

Question

Anyone know how to autofocus on the CKEDITOR text area on page load?

Currently the user has to click in the text area before they can start typing. Like Google, I'd like the page to load and the user can immediately start typing w/o having to click the text area.

Here is the current code that initiated CKEDITOR

<script type="text/javascript">
CKEDITOR.replace( 'meeting_notes',
    {
        toolbar :
        [
            [ 'Bold', 'Italic', 'Underline', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],
            ['Cut','Copy','Paste','PasteText'],
            ['Undo','Redo','-','RemoveFormat'],
            ['TextColor','BGColor'],
            ['Maximize']
        ]
    });
</script>

Thanks

Buyse

Answer 1

Perhaps the startupFocus config option?

CKEDITOR.replace( 'meeting_notes',
    {
        startupFocus : true,
        toolbar :
...

Amabelle

this config was removed from ckeditor 5, don't know what to use to avoid autofocus. – Chromatics

Answer 2

I've not tried it myself, but check out the CKEDITOR.config.startupFocus.

Definition: Sets whether the editor should have the focus when the page loads.

Stater

Answer 3

In your config simply do this:

    config.startupFocus = true;

Salome

Answer 4

set focus to the editor on load by passing a callback to the onReady prop that sets focus to the editor

<CKEditor ... onReady={(editor) => { editor.focus(); }} />

Imperception

Answer 5

from CKEditor 5 docs: The simplest way to focus the editor is to call the editor.focus() method.

Chromatics