@types/ckeditor__ckeditor5-core

constructor

constructor(editor: Editor);

• Creates a new Command instance.

property affectsData

readonly affectsData: boolean;

• A flag indicating whether a command execution changes the editor data or not.

  Commands with affectsData set to false will not be automatically disabled in the and with restricted user write permissions.

  **Note:** You do not have to set it for your every command. It is true by default.

property editor

readonly editor: Editor;

• The editor on which this command will be used.

property isEnabled

isEnabled: boolean;

• Flag indicating whether a command is enabled or disabled. A disabled command will do nothing when executed.

  A concrete command class should control this value by overriding the method.

  It is possible to disable a command from "outside". For instance, in your integration you may want to disable a certain set of commands for the time being. To do that, you can use the fact that isEnabled is observable and it fires the set:isEnabled event every time anyone tries to modify its value:

  function disableCommand( cmd ) { cmd.on( 'set:isEnabled', forceDisable, { priority: 'highest' } );

  cmd.isEnabled = false;

  // Make it possible to enable the command again. return () => { cmd.off( 'set:isEnabled', forceDisable ); cmd.refresh(); };

  function forceDisable( evt ) { evt.return = false; evt.stop(); } }

  // Usage:

  // Disabling the command. const enableBold = disableCommand( editor.commands.get( 'bold' ) );

  // Enabling the command again. enableBold();

property value

value: {};

• The value of the command. A concrete command class should define what it represents for it.

  For example, the 'bold' command's value indicates whether the selection starts in a bolded text. And the value of the 'link' command may be an object with links details.

  It is possible for a command to have no value (e.g. for stateless actions such as 'uploadImage').

  A concrete command class should control this value by overriding the method.

method clearForceDisabled

clearForceDisabled: (id: string) => void;

• Clears forced disable previously set through . See .

method destroy

destroy: () => void;

• Destroys the command.

method execute

execute: (...options: unknown[]) => void;

• Executes the command.

  A command may accept parameters. They will be passed from to the command.

  The execute() method will automatically abort when the command is disabled ( is false). This behavior is implemented by a high priority listener to the event.

  In order to see how to disable a command from "outside" see the documentation.

  This method may return a value, which would be forwarded all the way down to the .

method forceDisabled

forceDisabled: (id: string) => void;

• Disables the command.

  Command may be disabled by multiple features or algorithms (at once). When disabling a command, unique id should be passed (e.g. feature name). The same identifier should be used when the command. The command becomes enabled only after all features .

  Disabling and enabling a command:

  command.isEnabled; // -> true command.forceDisabled( 'MyFeature' ); command.isEnabled; // -> false command.clearForceDisabled( 'MyFeature' ); command.isEnabled; // -> true

  Command disabled by multiple features:

  command.forceDisabled( 'MyFeature' ); command.forceDisabled( 'OtherFeature' ); command.clearForceDisabled( 'MyFeature' ); command.isEnabled; // -> false command.clearForceDisabled( 'OtherFeature' ); command.isEnabled; // -> true

  Multiple disabling with the same identifier is redundant:

  command.forceDisabled( 'MyFeature' ); command.forceDisabled( 'MyFeature' ); command.clearForceDisabled( 'MyFeature' ); command.isEnabled; // -> true

  **Note:** some commands or algorithms may have more complex logic when it comes to enabling or disabling certain commands, so the command might be still disabled after was used.

method refresh

refresh: () => void;

• Refreshes the command. The command should update its and properties in this method.

  This method is automatically called when .

constructor

constructor(config?: Record<string, unknown>);

property builtinPlugins

static builtinPlugins: typeof Plugin[];

property config

readonly config: Config;

property defaultConfig

static defaultConfig: Record<string, unknown>;

property editors

readonly editors: Collection<Editor>;

property locale

readonly locale: Locale;

property plugins

readonly plugins: PluginCollection;

property t

t: Locale;

method create

static create: (config: Record<string, unknown>) => Promise<Context>;

method destroy

destroy: () => Promise<void>;

method initPlugins

initPlugins: () => Promise<LoadedPlugins>;

constructor

constructor(context: Editor | Context);

• Creates a new plugin instance.

property context

readonly context: Editor | Context;

• The context instance.

property isContextPlugin

static readonly isContextPlugin: boolean;

property pluginName

static readonly pluginName?: string;

property requires

static readonly requires?: typeof ContextPlugin[];

method afterInit

afterInit: () => Promise<void> | void;

method destroy

destroy: () => Promise<void> | void;

method init

init: () => Promise<void> | void;

constructor

constructor(config?: EditorConfig);

• Creates a new instance of the editor class.

  Usually, not to be used directly. See the static method.

property builtinPlugins

static builtinPlugins: (string | typeof Plugin | typeof ContextPlugin)[];

property commands

readonly commands: CommandCollection;

• Commands registered to the editor.

  Use the shorthand method to execute commands:

  // Execute the bold command: editor.execute( 'bold' );

  // Check the state of the bold command: editor.commands.get( 'bold' ).value;

property config

readonly config: Config;

• Stores all configurations specific to this editor instance.

  editor.config.get( 'image.toolbar' ); // -> [ 'imageStyle:block', 'imageStyle:side', '|', 'toggleImageCaption', 'imageTextAlternative' ]

property conversion

readonly conversion: Conversion;

• Conversion manager through which you can register model-to-view and view-to-model converters.

  See the documentation to learn how to add converters.

property data

readonly data: DataController;

• The . Used e.g. for setting and retrieving the editor data.

property defaultConfig

static defaultConfig?: EditorConfig;

property editing

readonly editing: EditingController;

• The . Controls user input and rendering the content for editing.

property isReadOnly

isReadOnly: boolean;

• Defines whether this editor is in read-only mode.

  In read-only mode the editor are disabled so it is not possible to modify the document by using them. Also, the editable element(s) become non-editable.

  In order to make the editor read-only, you can set this value directly:

  editor.isReadOnly = true;

property keystrokes

readonly keystrokes: EditingKeystrokeHandler;

• An instance of the .

  It allows setting simple keystrokes:

  // Execute the bold command on Ctrl+E: editor.keystrokes.set( 'Ctrl+E', 'bold' );

  // Execute your own callback: editor.keystrokes.set( 'Ctrl+E', ( data, cancel ) => { console.log( data.keyCode );

  // Prevent the default (native) action and stop the underlying keydown event // so no other editor feature will interfere. cancel(); } );

  Note: Certain typing-oriented keystrokes (like Backspace or Enter) are handled by a low-level mechanism and trying to listen to them via the keystroke handler will not work reliably. To handle these specific keystrokes, see the events fired by the (editor.editing.view.document).

property locale

readonly locale: Locale;

• The locale instance.

property model

readonly model: Model;

• The editor's model.

  The central point of the editor's abstract data model.

property plugins

readonly plugins: PluginCollection;

• The plugins loaded and in use by this editor instance.

  editor.plugins.get( 'ClipboardPipeline' ); // -> An instance of the clipboard pipeline plugin.

property state

state: 'initializing' | 'ready' | 'destroyed';

• Indicates the editor life-cycle state.

  The editor is in one of the following states:

  * initializing – During the editor initialization (before ) finished its job. * ready – After the promise returned by the method is resolved. * destroyed – Once the method was called.

property t

t: Locale;

• Shorthand for .

method create

static create: (
    sourceElementOrData: HTMLElement | string,
    config?: EditorConfig
) => Promise<Editor>;

method destroy

destroy: () => Promise<void>;

• Destroys the editor instance, releasing all resources used by it.

  **Note** The editor cannot be destroyed during the initialization phase so if it is called while the editor , it will wait for the editor initialization before destroying it.

method execute

execute: (commandName: string, ...args: unknown[]) => any;

• Executes the specified command with given parameters.

  Shorthand for:

  editor.commands.get( commandName ).execute( ... );

method focus

focus: () => void;

• Focuses the editor.

  **Note** To explicitly focus the editing area of the editor, use the method of the editing view.

  Check out the section of the guide to learn more.

method initPlugins

initPlugins: () => Promise<LoadedPlugins>;

• Loads and initializes plugins specified in the configuration.

constructor

constructor(editor: Editor);

• Creates an instance of the editor UI class.

property componentFactory

readonly componentFactory: ComponentFactory;

• An instance of the , a registry used by plugins to register factories of specific UI components.

property editor

readonly editor: Editor;

• The editor that the UI belongs to.

property element

readonly element: HTMLElement;

• The main (outermost) DOM element of the editor UI.

  For example, in it is a <div> which wraps the editable element and the toolbar. In it is the editable element itself (as there is no other wrapper). However, in it is set to null because this editor does not come with a single "main" HTML element (its editable element and toolbar are separate).

  This property can be understood as a shorthand for retrieving the element that a specific editor integration considers to be its main DOM element.

property focusTracker

readonly focusTracker: FocusTracker;

• Stores the information about the editor UI focus and propagates it so various plugins and components are unified as a focus group.

property viewportOffset

viewportOffset: { top: number; right: number; bottom: number; left: number };

• Stores viewport offsets from every direction.

  Viewport offset can be used to constrain balloons or other UI elements into an element smaller than the viewport. This can be useful if there are any other absolutely positioned elements that may interfere with editor UI.

  Example editor.ui.viewportOffset returns:

  {
    top: 50,
    right: 50,
    bottom: 50,
    left: 50
  }

  This property can be overriden after editor already being initialized:

  editor.ui.viewportOffset = {
    top: 100,
    right: 0,
    bottom: 0,
    left: 0
  };

method destroy

destroy: () => void;

• Destroys the UI.

method getEditableElement

getEditableElement: (rootName?: string) => HTMLElement | undefined;

• Returns the editable editor element with the given name or null if editable does not exist.

method getEditableElementsNames

getEditableElementsNames: () => Iterable<string>;

• Returns array of names of all editor editable elements.

method setEditableElement

setEditableElement: (rootName: string, domElement: HTMLElement) => void;

• Store the native DOM editable element used by the editor under a unique name.

method update

update: () => void;

• Fires the event.

  This method should be called when the editor UI (e.g. positions of its balloons) needs to be updated due to some environmental change which CKEditor 5 is not aware of (e.g. resize of a container in which it is used).

method registerChildCommand

registerChildCommand: (command: Command) => void;

property first

readonly first: any;

• Returns the first action from the list or null when list is empty

property hasAny

hasAny: boolean;

• Defines whether there is any registered pending action.

property pluginName

static readonly pluginName: string;

method [Symbol.iterator]

[Symbol.iterator]: () => Iterator<Observable & { message: string }>;

method add

add: (message: string) => Observable & { message: string };

• Adds an action to the list of pending actions.

  This method returns an action object with an observable message property. The action object can be later used in the method. It also allows you to change the message.

method init

init: () => void;

method remove

remove: (action: Observable & { message: string }) => void;

• Removes an action from the list of pending actions.

constructor

constructor(editor: Editor);

property editor

readonly editor: Editor | EditorWithUI;

• The editor instance.

  Note that most editors implement the interface in addition to the base interface. However, editors with an external UI (i.e. Bootstrap-based) or a headless editor may not implement the interface.

  Because of above, to make plugins more universal, it is recommended to split features into: - The "editing" part that only uses the interface. - The "UI" part that uses both the interface and the interface.

property isContextPlugin

static readonly isContextPlugin: boolean;

• A flag which defines if a plugin is allowed or not allowed to be used directly by a .

property isEnabled

isEnabled: boolean;

• Flag indicating whether a plugin is enabled or disabled. A disabled plugin will not transform text.

  Plugin can be simply disabled like that:

  // Disable the plugin so that no toolbars are visible. editor.plugins.get( 'TextTransformation' ).isEnabled = false;

  You can also use method.

property pluginName

static readonly pluginName?: string;

• An optional name of the plugin. If set, the plugin will be available in by its name and its constructor. If not, then only by its constructor.

  The name should reflect the constructor name.

  To keep the plugin class definition tight, it is recommended to define this property as a static getter:

  export default class ImageCaption { static get pluginName() { return 'ImageCaption'; } }

  Note: The native Function.name property could not be used to keep the plugin name because it will be mangled during code minification.

  Naming a plugin is necessary to enable removing it through the option.

property requires

static readonly requires?: (string | typeof Plugin | typeof ContextPlugin)[];

• An array of plugins required by this plugin.

  To keep the plugin class definition tight it is recommended to define this property as a static getter:

  import Image from './image.js';

  export default class ImageCaption { static get requires() { return [ Image ]; } }

method afterInit

afterInit: () => Promise<void> | void;

• The third (and last) stage of the plugin initialization. See also and .

  **Note:** This method is optional. A plugin instance does not need to have it defined.

method clearForceDisabled

clearForceDisabled: (id: string) => void;

• Clears forced disable previously set through . See .

method destroy

destroy: () => void;

• Destroys the plugin.

  **Note:** This method is optional. A plugin instance does not need to have it defined.

method forceDisabled

forceDisabled: (id: string) => void;

• Disables the plugin.

  Plugin may be disabled by multiple features or algorithms (at once). When disabling a plugin, unique id should be passed (e.g. feature name). The same identifier should be used when the plugin. The plugin becomes enabled only after all features .

  Disabling and enabling a plugin:

  plugin.isEnabled; // -> true plugin.forceDisabled( 'MyFeature' ); plugin.isEnabled; // -> false plugin.clearForceDisabled( 'MyFeature' ); plugin.isEnabled; // -> true

  Plugin disabled by multiple features:

  plugin.forceDisabled( 'MyFeature' ); plugin.forceDisabled( 'OtherFeature' ); plugin.clearForceDisabled( 'MyFeature' ); plugin.isEnabled; // -> false plugin.clearForceDisabled( 'OtherFeature' ); plugin.isEnabled; // -> true

  Multiple disabling with the same identifier is redundant:

  plugin.forceDisabled( 'MyFeature' ); plugin.forceDisabled( 'MyFeature' ); plugin.clearForceDisabled( 'MyFeature' ); plugin.isEnabled; // -> true

  **Note:** some plugins or algorithms may have more complex logic when it comes to enabling or disabling certain plugins, so the plugin might be still disabled after was used.

method init

init: () => void | Promise<void>;

• The second stage (after plugin ) of the plugin initialization. Unlike the plugin constructor this method can be asynchronous.

  A plugin's init() method is called after its are initialized, so in the same order as the constructors of these plugins.

  **Note:** This method is optional. A plugin instance does not need to have it defined.