CKEditor Ecosystem Documentation
Search
Contribute to this guide
Home/CKEditor 5/Features

Document title

The title feature lets you add a single title field at the beginning of your document. This way you can clearly divide your content into the title and body sections.

# Demo

Use the editor below to create a document with distinct title and body sections. You can check the content of the title and body elements in the console below.

Console

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

This demo presents a limited set of features. Visit the feature-rich editor example to see more in action.

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

# Installation

⚠️ New import paths

Starting with version 42.0.0, we changed the format of import paths. This guide uses the new, shorter format. Refer to the Packages in the legacy setup guide if you use an older version of CKEditor 5.

After installing the editor, add the feature to your plugin list and toolbar configuration:

import { ClassicEditor, Title } from 'ckeditor5';

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

# Placeholder integration

The title plugin is integrated with the placeholder configuration. If you define it, the placeholder text will be used for the body element.

To change the title placeholder, use the 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( /* ... */ );

# HTML structure

When you call 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 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.

CKEditor 5 has more features that can help you structure your document better:

  • Headings – Divide your content into sections.
  • Block indentation – Organize your content into visually separated blocks, indent crucial paragraphs, etc.
  • Editor placeholder – Set placeholder text to display when the content is empty. It helps users locate the editor in the application and prompts to input the content.

# Contribute

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