tessl/npm-ckeditor--ckeditor5-heading
Headings feature for CKEditor 5 that provides structured heading levels (H1-H6) and paragraph formatting with configurable UI components.
—
Quality
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
core-plugin.mddocs/
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.
Install with Tessl CLI
npx tessl i tessl/npm-ckeditor--ckeditor5-heading