CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-ckeditor--ckeditor5-essentials

Essential editing features for CKEditor 5, bundling fundamental editing capabilities into a single convenient plugin.

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@ckeditor/ckeditor5-essentials@46.0.x
Publish Source
CLI
Badge
tessl/npm-ckeditor--ckeditor5-essentials badge