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.
See the demo of the placeholder feature:
{@snippet features/placeholder}
There are two different ways of configuring the editor placeholder text:
Set the placeholder attribute on an element passed to the Editor.create() method (for instance {@link module:editor-classic/classiceditor~ClassicEditor.create ClassicEditor.create()}) to configure the placeholder:
<div id="editor" placeholder="Type the content here!">
<p>Editor content</p>
</div>
ClassicEditor
.create( document.querySelector( '#editor' ) )
.then( editor => {
console.log( editor );
} )
.catch( error => {
console.error( error );
} );
You can use the {@link module:core/editor/editorconfig~EditorConfig#placeholder editor.config.placeholder} configuration option:
Editor.create() method,placeholder attribute value, for instance, if an element 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 );
} );
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: #ff7e7e;
font-family: Georgia;
}
Note: The .ck-placeholder class is also used to display placeholders in other places, for instance, {@link features/image#image-captions image captions}. Make sure your custom styles apply to the right subset of placeholders.