CKEditor 生态系统文档
Search
Contribute to this guide
主页/CKEditor 5/功能

指南文档标题

标题功能允许您在文档开头添加一个标题字段。这样您就可以将内容清晰地划分为标题和主体部分。

# 演示

使用下面的编辑器创建一个具有不同标题和主体部分的文档。您可以在下面的控制台中检查标题和主体元素的内容。

控制台

''
'<p>&nbsp;</p>'
''

此演示展示了有限的功能集。访问 功能丰富的编辑器示例 以查看更多实际应用。

# 键盘导航

标题插件允许您使用 Tab 键从标题移动到主体元素，提供类似表单的体验。当选择位于第一个主体元素的开头时，可以使用 Shift+Tab 返回标题元素。您还可以使用 Enter 和 Backspace 键在标题和主体之间移动光标。

# 安装

⚠️ **新的导入路径**

从 版本 42.0.0 开始，我们更改了导入路径的格式。本指南使用新的、更短的格式。如果您使用的是旧版本的 CKEditor 5，请参考 旧版设置中的包 指南。

在 安装编辑器 后，将功能添加到您的插件列表和工具栏配置中

import { ClassicEditor, Title } from 'ckeditor5';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Title, /* ... */ ]
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

# 占位符集成

标题插件与 占位符 配置集成。如果您定义了它，占位符文本将用于主体元素。

要更改标题占位符，请使用 title.placeholder 配置选项。例如

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Title, /* ... */ ],
        title: {
            placeholder: 'My custom placeholder for the title'
        },
        placeholder: 'My custom placeholder for the body'
    } )
    .then( /* ... */ )
    .catch( /* ... */ );

# HTML 结构

当您调用 editor.getData() 时，文档标题将表示为以下 HTML

<h1>Feasibility Study</h1>

# 模型表示

在 CKEditor 5 数据模型中，文档标题表示如下

<title>
    <title-content>
        Feasibility Study
    </title-content>
</title>

我们建议您在开发和调试时使用官方的 CKEditor 5 检查器。它将为您提供有关编辑器状态的大量有用信息，例如内部数据结构、选择、命令等等。

CKEditor 5 还有更多功能可以帮助您更好地构建文档

  • 标题 – 将您的内容划分为多个部分。
  • 块缩进 – 将您的内容组织成视觉上分隔的块，缩进重要的段落等。
  • 编辑器占位符 – 设置占位符文本以在内容为空时显示。它有助于用户在应用程序中找到编辑器并提示输入内容。

# 贡献

该功能的源代码在 GitHub 上可用，地址为 https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-heading.