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

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

• javascript
• ckeditor

5 Answers 5

Perhaps the startupFocus config option?

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

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.

In your config simply do this:

    config.startupFocus = true;

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(); }} />

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