Editor placeholder

CKEditor 5 can display a configurable placeholder text when the content is empty. The placeholder helps users locate the editor in the application and prompts to input the content. It works similarly to the native DOM placeholder attribute used by inputs.

# Demo

See the demo of the placeholder feature:

# Installation

The editor placeholder feature does not require a separate plugin installation. It does, however, require configuring the editor before use. There are two different ways of configuring the editor placeholder text:

# Using the placeholder attribute of a textarea

Set the placeholder attribute on a <textarea> element passed to the Editor.create() method (for instance ClassicEditor.create()) to configure the placeholder:

<textarea id="editor" placeholder="Type the content here!"></textarea>

ClassicEditor
    .create( document.querySelector( '#editor' ) )
    .then( editor => {
        console.log( editor );
    } )
    .catch( error => {
        console.error( error );
    } );

# Using the editor configuration

You can use the editor.config.placeholder configuration option:

• when no element was passed into Editor.create() method,
• when the element passed into Editor.create() was not a <textarea> (for instance, a <div> element),
• to override the placeholder text of a <textarea>, if one was passed into Editor.create() but the placeholder text should be different.

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        placeholder: 'Type the content here!'
    } )
    .then( editor => {
        console.log( editor );
    } )
    .catch( error => {
        console.error( error );
    } );

# Styling the placeholder

The editor placeholder text is displayed using a CSS pseudo–element (::before) related to the first empty element in the editor content (usually a paragraph). You can use the following snippet to change the appearance of the placeholder:

.ck.ck-editor__editable > .ck-placeholder::before {
    color: #d21714;
    font-family: Georgia;
}

Note: The .ck-placeholder class is also used to display placeholders in other places, for instance, image captions. Make sure your custom styles apply to the right subset of placeholders.