# 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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-placeholder) used by inputs. Not to be confused with the content placeholders offered by the [merge fields](merge-fields.md) feature.

<a id="demo">

## Demo

See the demo of the placeholder feature:

<!-- AI-AGENT-NOTE: An interactive demo is embedded here but is not represented in this Markdown file. If you need to see it in action, open this page in a browser (e.g. via a browser-automation MCP like Chrome DevTools or Playwright), or let the user know a live demo is available on this page. -->

This demo presents a limited set of features. Visit the [feature-rich editor example](../examples/builds-custom/full-featured-editor.md) to see more in action.

<a id="installation">

## 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:

<a id="using-the-placeholder-attribute-of-a-textarea">

### 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()`](../api/module_editor-classic_classiceditor-ClassicEditor.md#static-function-create)) to configure the placeholder:

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

**NPM**

```js
import { ClassicEditor, Essentials } from 'ckeditor5';

ClassicEditor
	.create( {
		attachTo: document.getElementById( 'editor' ),
		licenseKey: '<YOUR_LICENSE_KEY>', // Or 'GPL'.
		plugins: [ Essentials, /* ... */ ],
	} )
	.then( editor => {
		console.log( editor );
	} )
	.catch( error => {
		console.error( error );
	} );
```

**CDN**

```js
const { ClassicEditor, Essentials } = CKEDITOR;

ClassicEditor
	.create( {
		attachTo: document.getElementById( 'editor' ),
		licenseKey: '<YOUR_LICENSE_KEY>',
		plugins: [ Essentials, /* ... */ ],
	} )
	.then( editor => {
		console.log( editor );
	} )
	.catch( error => {
		console.error( error );
	} );
```

<a id="using-the-editor-configuration">

### Using the editor configuration

You can use the [`editor.config.root.placeholder`](../api/module_core_editor_editorconfig-EditorConfig.md#member-root) 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.

```js
ClassicEditor
	.create( {
		// ... Other configuration options ...
		root: {
			placeholder: 'Type the content here!'
		}
	} )
	.then( editor => {
		console.log( editor );
	} )
	.catch( error => {
		console.error( error );
	} );
```

If your editor implementation uses multiple roots, configure placeholders using `roots.<rootName>.placeholder`:

```js
MultiRootEditor
	.create( {
		roots: {
			header: {
				placeholder: 'Type header...',
				element: document.querySelector( '#header' )
			},
			content: {
				placeholder: 'Type content...',
				element: document.querySelector( '#content' )
			},
			leftSide: {
				placeholder: 'Type left-side...',
				element: document.querySelector( '#left-side' )
			},
			rightSide: {
				placeholder: 'Type right-side...',
				element: document.querySelector( '#right-side' )
			}
		}
	} )
	.then( editor => {
		console.log( editor );
	} )
	.catch( error => {
		console.error( error );
	} );
```

<a id="styling-the-placeholder">

## 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:

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

<!-- AI-AGENT-NOTE: An interactive demo is embedded here but is not represented in this Markdown file. If you need to see it in action, open this page in a browser (e.g. via a browser-automation MCP like Chrome DevTools or Playwright), or let the user know a live demo is available on this page. -->

**Note**: The `.ck-placeholder` class is also used to display placeholders in other places, for instance, [image captions](images/images-captions.md). Make sure your custom styles apply to the right subset of placeholders.

<a id="changing-the-placeholder">

## Changing the placeholder

The editor placeholder could be updated at runtime by changing the `placeholder` property in the editing root.

```js
editor.editing.view.document.getRoot( 'main' ).placeholder = 'new placeholder';
```

<!-- AI-AGENT-NOTE: An interactive demo is embedded here but is not represented in this Markdown file. If you need to see it in action, open this page in a browser (e.g. via a browser-automation MCP like Chrome DevTools or Playwright), or let the user know a live demo is available on this page. -->

<a id="contribute">

## Contribute

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

---

Full index of the CKEditor 5 documentation: [llms.txt](../../llms.txt)