or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

command-system.md configuration.md core-plugin.md document-structure.md editing-engine.md index.md ui-components.md

tile.json

Core Heading Plugin

The main headings feature plugin that combines editing and UI functionality. Acts as a "glue" plugin that loads the HeadingEditing and HeadingUI features together.

Capabilities

Heading Plugin

The primary plugin for heading functionality in CKEditor 5. This plugin automatically loads both the editing engine and UI components.

/**
 * The main headings feature plugin. A "glue" plugin that loads HeadingEditing and HeadingUI features.
 */
class Heading extends Plugin {
    /** Plugin name identifier */
    static readonly pluginName: 'Heading';
    
    /** Required plugins that are automatically loaded */
    static readonly requires: [typeof HeadingEditing, typeof HeadingUI];
    
    /** Indicates this is an official CKEditor 5 plugin */
    static readonly isOfficialPlugin: true;
}

Usage Examples:

import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
import { Heading } from '@ckeditor/ckeditor5-heading';

// Basic usage
ClassicEditor.create(document.querySelector('#editor'), {
    plugins: [Heading],
    toolbar: ['heading']
});

// With custom configuration
ClassicEditor.create(document.querySelector('#editor'), {
    plugins: [Heading],
    toolbar: ['heading'],
    heading: {
        options: [
            { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
            { model: 'heading1', view: 'h1', title: 'Title', class: 'ck-heading_heading1' },
            { model: 'heading2', view: 'h2', title: 'Subtitle', class: 'ck-heading_heading2' }
        ]
    }
});

Plugin Dependencies

The Heading plugin automatically loads these required dependencies:

HeadingEditing: Provides the core editing functionality, model-view conversion, and command registration
HeadingUI: Provides the dropdown UI component and menu bar integration

When you add the Heading plugin to your editor configuration, you don't need to explicitly include HeadingEditing or HeadingUI - they are loaded automatically through the requires property.

Plugin Integration

// Check if heading plugin is loaded
const headingPlugin = editor.plugins.get('Heading');

// Access the editing functionality
const headingEditing = editor.plugins.get('HeadingEditing');

// Access the UI functionality  
const headingUI = editor.plugins.get('HeadingUI');

// Execute heading commands
editor.execute('heading', { value: 'heading1' });
editor.execute('heading', { value: 'paragraph' });

Default Configuration

When no custom configuration is provided, the Heading plugin uses these default options:

const defaultOptions = [
    { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
    { model: 'heading1', view: 'h2', title: 'Heading 1', class: 'ck-heading_heading1' },
    { model: 'heading2', view: 'h3', title: 'Heading 2', class: 'ck-heading_heading2' },
    { model: 'heading3', view: 'h4', title: 'Heading 3', class: 'ck-heading_heading3' }
];

Note that by default, heading1 maps to h2 HTML element, heading2 maps to h3, etc. This is intentional to leave h1 for the document title when using the Title plugin.