or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

index.mddocs/

CKEditor 5 Essentials Plugin

The CKEditor 5 Essentials plugin provides fundamental editing features bundled into a single convenient plugin. It combines essential capabilities like clipboard operations, typing mechanics, enter key handling, select-all functionality, and undo/redo operations that form the foundation of any rich text editor.

Package Information

  • Package Name: @ckeditor/ckeditor5-essentials
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @ckeditor/ckeditor5-essentials or npm install ckeditor5

Core Imports

import { Essentials } from '@ckeditor/ckeditor5-essentials';

Alternative import from main CKEditor 5 package:

import { Essentials } from 'ckeditor5';

For CommonJS:

const { Essentials } = require('@ckeditor/ckeditor5-essentials');

Basic Usage

import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
import { Essentials } from '@ckeditor/ckeditor5-essentials';
import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
// Alternative: import { ClassicEditor, Essentials, Paragraph } from 'ckeditor5';

ClassicEditor
    .create(document.querySelector('#editor'), {
        plugins: [Essentials, Paragraph],
        toolbar: []
    })
    .then(editor => {
        console.log('Editor was initialized', editor);
    })
    .catch(error => {
        console.error(error);
    });

Architecture

The Essentials plugin follows CKEditor 5's plugin architecture:

  • Plugin System: Extends the base Plugin class from CKEditor 5 core
  • Dependency Management: Automatically loads required plugins through the requires property
  • Lazy Loading: Individual plugins are only loaded when needed
  • Type Safety: Provides TypeScript augmentation for plugin map integration
  • No Custom Logic: Acts purely as a convenient bundle without implementing new functionality

Capabilities

Essentials Plugin

The main plugin class that bundles all essential editing features into a single plugin for convenient inclusion in CKEditor configurations.

/**
 * A plugin including all essential editing features. It represents a set of features 
 * that enables similar functionalities to a `<textarea>` element.
 * 
 * This plugin set does not define any block-level containers (such as Paragraph).
 * If your editor is supposed to handle block content, make sure to include it.
 */
export class Essentials extends Plugin {
    /**
     * Required plugins that will be automatically loaded
     */
    public static get requires(): readonly [
        typeof AccessibilityHelp,
        typeof Clipboard,
        typeof Enter,
        typeof SelectAll,
        typeof ShiftEnter,
        typeof Typing,
        typeof Undo
    ];

    /**
     * The plugin name identifier
     */
    public static get pluginName(): 'Essentials';

    /**
     * Indicates this is an official CKEditor plugin
     */
    public static override get isOfficialPlugin(): true;
}

Usage Example:

import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
import { Essentials } from '@ckeditor/ckeditor5-essentials';
// Alternative: import { ClassicEditor, Essentials } from 'ckeditor5';

// The Essentials plugin automatically includes:
// - AccessibilityHelp: Accessibility support features
// - Clipboard: Copy, cut, paste functionality  
// - Enter: Enter key handling for line breaks
// - SelectAll: Select all content functionality
// - ShiftEnter: Soft line breaks with Shift+Enter
// - Typing: Text input and character insertion
// - Undo: Undo/redo operations

ClassicEditor.create(element, {
    plugins: [Essentials] // Loads all essential features
});

Types

/**
 * CKEditor 5 Editor interface
 */
declare interface Editor {
    plugins: PluginCollection;
    // Additional editor properties omitted for brevity
}

/**
 * The base interface for CKEditor plugins.
 */
declare interface PluginInterface {
    /**
     * The second stage (after plugin constructor) of the plugin initialization.
     * Unlike the plugin constructor this method can be asynchronous.
     */
    init?(): Promise<unknown> | null | undefined | void;

    /**
     * The third (and last) stage of the plugin initialization.
     */
    afterInit?(): Promise<unknown> | null | undefined | void;

    /**
     * Destroys the plugin.
     */
    destroy?(): Promise<unknown> | null | undefined | void;
}

/**
 * Base Plugin class from CKEditor 5 core
 */
declare class Plugin implements PluginInterface {
    /**
     * The editor instance.
     */
    public readonly editor: Editor;

    /**
     * Flag indicating whether a plugin is enabled or disabled.
     * A disabled plugin will not transform text.
     */
    public declare isEnabled: boolean;

    constructor(editor: Editor);

    /**
     * Disables the plugin.
     */
    public forceDisabled(id: string): void;

    /**
     * Clears forced disable previously set through forceDisabled.
     */
    public clearForceDisabled(id: string): void;

    /**
     * Destroys the plugin.
     */
    public destroy(): void;

    /**
     * An array of plugins required by this plugin.
     */
    static get requires(): ReadonlyArray<PluginConstructor | string>;

    /**
     * An optional name of the plugin.
     */
    static get pluginName(): string;

    /**
     * A flag which defines if a plugin is allowed to be used directly by a Context.
     */
    static get isContextPlugin(): boolean;

    /**
     * A flag which defines if a plugin is an official CKEditor 5 plugin.
     */
    static get isOfficialPlugin(): boolean;

    /**
     * A flag which defines if a plugin is a premium CKEditor 5 plugin.
     */
    static get isPremiumPlugin(): boolean;
}

/**
 * Plugin constructor type
 */
declare type PluginConstructor<TContext = Editor> =
    (PluginClassConstructor<TContext> | PluginFunctionConstructor<TContext>) & PluginStaticMembers<TContext>;

/**
 * Plugin class constructor type
 */
declare type PluginClassConstructor<TContext = Editor> = new (editor: TContext) => PluginInterface;

/**
 * Plugin function constructor type
 */
declare type PluginFunctionConstructor<TContext = Editor> = (editor: TContext) => void;

/**
 * Static properties of a plugin.
 */
declare interface PluginStaticMembers<TContext = Editor> {
    readonly requires?: ReadonlyArray<PluginConstructor<TContext> | string>;
    readonly pluginName?: string;
    readonly isContextPlugin?: boolean;
    readonly isOfficialPlugin?: boolean;
    readonly isPremiumPlugin?: boolean;
}

/**
 * An array of loaded plugins.
 */
declare type LoadedPlugins = Array<PluginInterface>;

/**
 * Plugin collection interface - manages a list of CKEditor plugins,
 * including loading, resolving dependencies and initialization.
 */
declare interface PluginCollection {
    /**
     * Gets the plugin instance by its constructor or name.
     */
    get<TConstructor extends PluginClassConstructor>(key: TConstructor): InstanceType<TConstructor>;
    get<TName extends string>(key: TName): any;
    get(key: PluginConstructor | string): PluginInterface;

    /**
     * Checks if the given plugin is loaded.
     */
    has(key: PluginConstructor | string): boolean;

    /**
     * Initializes a set of plugins and adds them to the collection.
     */
    init(plugins: Array<PluginConstructor | string>, pluginsToRemove?: Array<PluginConstructor | string>): Promise<LoadedPlugins>;

    /**
     * Destroys all loaded plugins.
     */
    destroy(): Promise<Array<PluginInterface>>;
}

/**
 * Individual plugins bundled by Essentials
 */
declare class AccessibilityHelp extends Plugin {
    static get pluginName(): 'AccessibilityHelp';
}

declare class Clipboard extends Plugin {
    static get pluginName(): 'Clipboard';
}

declare class Enter extends Plugin {
    static get pluginName(): 'Enter';
}

declare class SelectAll extends Plugin {
    static get pluginName(): 'SelectAll';
}

declare class ShiftEnter extends Plugin {
    static get pluginName(): 'ShiftEnter';
}

declare class Typing extends Plugin {
    static get pluginName(): 'Typing';
}

declare class Undo extends Plugin {
    static get pluginName(): 'Undo';
}

Bundled Features

The Essentials plugin automatically includes these essential editing capabilities:

Accessibility Help

  • Provides accessibility support features
  • Keyboard navigation assistance
  • Screen reader compatibility

Clipboard Operations

  • Copy functionality (Ctrl/Cmd+C)
  • Cut functionality (Ctrl/Cmd+X)
  • Paste functionality (Ctrl/Cmd+V)
  • Clipboard integration with system clipboard

Enter Key Handling

  • Creates new paragraphs on Enter key press
  • Handles block-level element creation
  • Manages cursor positioning after line breaks

Select All

  • Select all content functionality (Ctrl/Cmd+A)
  • Complete document selection
  • Proper selection boundaries

Shift+Enter Handling

  • Soft line breaks with Shift+Enter
  • Inline line breaks without creating new paragraphs
  • Alternative to hard paragraph breaks

Typing Mechanics

  • Text input processing
  • Character insertion handling
  • Input method support
  • Text composition events

Undo/Redo Operations

  • Undo functionality (Ctrl/Cmd+Z)
  • Redo functionality (Ctrl/Cmd+Y or Ctrl/Cmd+Shift+Z)
  • Command history management
  • Batch operation support

Notes

  • This plugin requires a block-level element plugin (like Paragraph) to handle block content
  • The Essentials plugin is a convenience bundle and implements no custom functionality itself
  • All actual editing features are provided by the bundled dependency plugins
  • This plugin is marked as official (isOfficialPlugin: true) and not premium (isPremiumPlugin: false)
  • TypeScript module augmentation is automatically applied to extend the CKEditor 5 plugin map, adding the 'Essentials' key to the PluginsMap interface