编辑器占位符

您可以在编辑器为空时显示可配置的占位符文本，以提示用户输入内容。这与 DOM 中使用的原生 placeholder 属性 类似。请勿与 合并字段 功能提供的內容占位符混淆。

# 演示

查看占位符功能的演示

# 安装

编辑器占位符功能不需要单独的插件安装。但是，它需要在使用前配置编辑器。有两种不同的方法可以配置编辑器占位符文本

# 使用 placeholder 属性

在传递给 Editor.create() 方法（例如 ClassicEditor.create()）的 <textarea> 元素上设置 placeholder 属性来配置占位符

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

import { ClassicEditor, Essentials } from 'ckeditor5';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Essentials, /* ... */ ],
    } )
    .then( editor => {
        console.log( editor );
    } )
    .catch( error => {
        console.error( error );
    } );

# 使用编辑器配置

您可以使用 editor.config.placeholder 配置选项

• 当未将元素传递到 Editor.create() 方法时，
• 当传递到 Editor.create() 方法的元素不是 <textarea>（例如，<div> 元素）时，
• 覆盖传递到 Editor.create() 方法的 <textarea> 的 placeholder 文本，如果存在，但占位符文本应不同。

import { ClassicEditor, Essentials } from 'ckeditor5';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Essentials, /* ... */ ],
        placeholder: 'Type the content here!'
    } )
    .then( editor => {
        console.log( editor );
    } )
    .catch( error => {
        console.error( error );
    } );

如果您的编辑器实现使用多个根节点，您应该传递一个对象，其键对应于编辑器根节点的名称，值等于应在每个根节点中设置的占位符

MultiRootEditor
    .create(
    // Roots for the editor:
        {
            header: document.querySelector( '#header' ),
            content: document.querySelector( '#content' ),
            leftSide: document.querySelector( '#left-side' ),
            rightSide: document.querySelector( '#right-side' )
        },
        // Config:
        {
            placeholder: {
                header: 'Type header...',
                content: 'Type content...',
                leftSide: 'Type left-side...',
                rightSide: 'Type right-side...'
            }
        } )
    .then( editor => {
        console.log( editor );
    } )
    .catch( error => {
        console.error( error );
    } );

# 设置占位符样式

编辑器占位符文本使用与编辑器内容中第一个空元素（通常是段落）相关的 CSS 伪元素（::before）进行显示。您可以使用以下代码片段来更改占位符的外观

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

注意: .ck-placeholder 类也用于在其他地方显示占位符，例如 图像标题。确保您的自定义样式应用于正确的占位符子集。

# 更改占位符

可以通过更改编辑根节点中的 placeholder 属性，在运行时更新编辑器占位符。

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

# 贡献

此功能的源代码可在 GitHub 上获取：https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-core。