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:
This demo only presents a limited set of features. Visit the full-featured editor example to see more in action.
# Installation
This feature is enabled by default in all predefined builds.
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 intoEditor.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.
Every day, we work hard to keep our documentation complete. Have you spotted outdated information? Is something missing? Please report it via our issue tracker.