Essential editing features for CKEditor 5, bundling fundamental editing capabilities into a single convenient plugin.
npx @tessl/cli install tessl/npm-ckeditor--ckeditor5-essentials@46.0.0The 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.
npm install @ckeditor/ckeditor5-essentials or npm install ckeditor5import { Essentials } from '@ckeditor/ckeditor5-essentials';Alternative import from main CKEditor 5 package:
import { Essentials } from 'ckeditor5';For CommonJS:
const { Essentials } = require('@ckeditor/ckeditor5-essentials');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);
});The Essentials plugin follows CKEditor 5's plugin architecture:
Plugin class from CKEditor 5 corerequires propertyThe 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
});/**
* 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';
}The Essentials plugin automatically includes these essential editing capabilities:
isOfficialPlugin: true) and not premium (isPremiumPlugin: false)