How to add a placeholder in CKEditor 5? - placeholder

Question

import BalloonEditor from '#ckeditor/ckeditor5-editor-balloon/src/ballooneditor';
import Essentials from '#ckeditor/ckeditor5-essentials/src/essentials';
import Paragraph from '#ckeditor/ckeditor5-paragraph/src/paragraph';
import Bold from '#ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '#ckeditor/ckeditor5-basic-styles/src/italic';
BalloonEditor
.create( elem, {
plugins: [ Markdown, Essentials, Paragraph, Bold, Italic ],
toolbar: [ 'bold' ]
})
.then((editor) => {
....
})
.catch( error => {
console.error( error );
} );
I tried to use attachPlaceholder from https://ckeditor.com/docs/ckeditor5/latest/api/module_engine_view_placeholder.html#static-function-attachPlaceholder
import { attachPlaceholder } from "#ckeditor/ckeditor5-engine/src/view/placeholder";
Could you show me simple example how to use this method (attachPlaceholder) or how to do it.

Answer 1

In CKEditor-5 you can add placeholder like
<ckeditor [config]="{ placeholder:'Placeholder Text', toolbar: [ 'bold', 'italic', 'bulletedList' ] }">
</ckeditor>
See docs

Answer 2

I assume that you want to add a placeholder to the entire editor, so that when it's empty you can display something like "Type here...".
Unfortunately, the attachPlaceholder() function doesn't yet support setting placeholder for the editor's main editable. For now, it's used in cases like image captions:
There's a ticket to implement configurable editor's placeholders: https://github.com/ckeditor/ckeditor5/issues/479.
And there's a 3rd party addon which adds a placeholder in a simpler way: https://github.com/alexeckermann/ckeditor5-emptyness.

Answer 3

Plugin URL : https://github.com/alexeckermann/ckeditor5-emptyness
Simply build your editor with this plugin and you will get access to a isEmpty observable attribute (care of Observable) on your editor instance. Additionaly, the plugin will add a ck-editor__is-empty class name on the editor element when is is empty.
The origin use case was for the application to observe the attribute and know when the editor enters or exits an empty state. From there the application applies an attribute to the editors HTML element so that a CSS based placeholder can be applied — using CSS's ::before rules to inject phantom content without disturbing CKEditor's actual content.
import BalloonEditorBase from '#ckeditor/ckeditor5-editor-
balloon/src/ballooneditor';
import Emptyness from 'ckeditor5-emptyness/src/emptyness';
// .. all your other imports here
export default class MyEditor extends BalloonEditorBase { }
MyEditor.build = {
// ... all your other configs here
plugins: [
// ... all your other plugins here
Emptyness
]
};
CSS
.ck-editor__is-empty .ck-content.ck-editor__editable::before,
.ck-editor__is-empty.ck-content.ck-editor__editable::before {
content: 'The editor is empty';
position: absolute;
display: block;
margin: var(--ck-spacing-large) 0;
color: #aaa;
}