CODEWITHSUNDEEP
javascriptckeditor
AnApprentice
AnApprentice

Reputation: 111090

CKEDITOR, AutoFocus on the text editor onLoad

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

Upvotes: 12

Views: 12756

Answers (5)

panchicore
panchicore

Reputation: 11942

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

Upvotes: 0

Jamal Hussain
Jamal Hussain

Reputation: 1270

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

Upvotes: 1

Carlos Pliego
Carlos Pliego

Reputation: 869

In your config simply do this:

    config.startupFocus = true;

Upvotes: 2

o.k.w
o.k.w

Reputation: 25830

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.

Upvotes: 2

ZoogieZork
ZoogieZork

Reputation: 11289

Perhaps the startupFocus config option?

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

Upvotes: 23

Related Questions