Editor placeholder

You can prompt the user to input content by displaying a configurable placeholder text when the editor is empty. This 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 some 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.

# Contribute

The source code of the feature is available on GitHub at https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-core.