title.md 3.5 KB


category: features

menu-title: Document title

Document title

The {@link module:heading/title~Title} feature enables support for adding the title field to your document. It helps ensure that there will always be a single title field at the beginning of the document.

This feature can be used to implement a rich-text editor with a clear division of content into the title and body sections, similar to solutions available in Medium, Grammarly, Slack post editor or some content management systems.

Demo

Use the editor below to create a document with clearly separated title and body sections.

{@snippet features/title}

Related features

There are more CKEditor 5 features that can help you control your document:

  • {@link features/basic-styles Basic font styles} – The essentials, like bold, italic and others.
  • {@link features/remove-format Remove format} – Easily clean basic text formatting.
  • {@link features/headings Headings} – Divide your content into sections.

Keyboard navigation

The title plugin lets you move from the title to the body element using the Tab key, providing form-like experience. When the selection is at the beginning of the first body element, you can go back to the title element using Shift+Tab. You can also use Enter and Backspace keys to move the caret between the title and the body.

Placeholder integration

The title plugin is integrated with the {@link features/editor-placeholder placeholder} configuration. If you define it, the placeholder text will be used for the body element.

To change the title placeholder, use the {@link module:heading/title~TitleConfig#placeholder title.placeholder} configuration option. For instance:

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

Installation

To add this feature to your editor, install the @ckeditor/ckeditor5-heading package:

npm install --save @ckeditor/ckeditor5-heading

Then add the Title plugin to your plugin list:

import Title from '@ckeditor/ckeditor5-heading/src/title';

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

Read more about {@link builds/guides/integration/installing-plugins installing plugins}.

HTML structure

When you call {@link module:core/editor/utils/dataapimixin~DataApi#function-getData editor.getData()}, the document title will be represented as the following HTML:

<h1>Feasibility Study</h1>

Model representation

In the CKEditor 5 data model the document title is represented as follows:

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

We recommend using the official {@link framework/guides/development-tools#ckeditor-5-inspector CKEditor 5 inspector} for development and debugging. It will give you tons of useful information about the state of the editor such as internal data structures, selection, commands, and many more.

Contribute

The source code of the feature is available on GitHub in https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-heading.