2021-03-25 05:50:30 +08:00
# Placeholder
[](https://www.npmjs.com/package/@tiptap/extension-placeholder)
[](https://npmcharts.com/compare/@tiptap/extension-placeholder?minimal=true)
2021-03-31 02:45:48 +08:00
This extension provides placeholder support. Give your users an idea what they should write with a tiny hint. There is a handful of things to customize, if you feel like it.
2021-03-25 05:50:30 +08:00
## Installation
```bash
# with npm
npm install @tiptap/extension -placeholder
# with Yarn
yarn add @tiptap/extension -placeholder
```
## Settings
| Option | Type | Default | Description |
| -------------------- | ------------------- | --------------------- | ----------------------------------------------------------- |
| emptyEditorClass | `String` | `'is-editor-empty'` | The added CSS class if the editor is empty. |
| emptyNodeClass | `String` | `'is-empty'` | The added CSS class if the node is empty. |
| placeholder | `String | Function` | `'Write something …'` | The placeholder text added as `data-placeholder` attribute. |
| showOnlyWhenEditable | `Boolean` | `true` | Show decorations only when editor is editable. |
| showOnlyCurrent | `Boolean` | `true` | Show decorations only in currently selected node. |
## Source code
2021-04-21 21:31:11 +08:00
[packages/extension-placeholder/ ](https://github.com/ueberdosis/tiptap/blob/main/packages/extension-placeholder/ )
2021-03-25 05:50:30 +08:00
## Usage
2021-08-26 05:10:20 +08:00
< tiptap-demo name = "Extensions/Placeholder" > < / tiptap-demo >
