@types/ckeditor__ckeditor5-core

  • Version 33.0.3
  • Published
  • 50.8 kB
  • 28 dependencies
  • MIT license

Install

npm i @types/ckeditor__ckeditor5-core
yarn add @types/ckeditor__ckeditor5-core
pnpm add @types/ckeditor__ckeditor5-core

Overview

TypeScript definitions for @ckeditor/ckeditor5-core

Index

Variables

variable DataApiMixin

const DataApiMixin: DataApi;

    variable ElementApiMixin

    const ElementApiMixin: ElementApi;

      variable icons

      const icons: {
      cancel: string;
      caption: string;
      check: string;
      cog: string;
      eraser: string;
      lowVision: string;
      image: string;
      alignBottom: string;
      alignMiddle: string;
      alignTop: string;
      alignLeft: string;
      alignCenter: string;
      alignRight: string;
      alignJustify: string;
      objectLeft: string;
      objectCenter: string;
      objectRight: string;
      objectFullWidth: string;
      objectSizeFull: string;
      objectSizeLarge: string;
      objectSizeSmall: string;
      objectSizeMedium: string;
      pencil: string;
      pilcrow: string;
      quote: string;
      threeVerticalDots: string;
      };

        Functions

        function attachToForm

        attachToForm: (editor: Editor) => void;

          function secureSourceElement

          secureSourceElement: (editor: Editor) => void;

            Classes

            class Command

            class Command implements Observable {}
            • The base class for CKEditor commands.

              Commands are the main way to manipulate editor contents and state. They are mostly used by UI elements (or by other commands) to make changes in the model. Commands are available in every part of code that has access to the instance.

              Instances of registered commands can be retrieved from . The easiest way to execute a command is through .

              By default, commands are disabled when the editor is in mode but commands with the flag set to false will not be disabled.

            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 .

            class Context

            class Context {}

              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>;

                                    class ContextPlugin

                                    abstract class ContextPlugin implements Observable {}
                                    • The base class for plugin classes.

                                      A context plugin can either be initialized for an or for a . In other words, it can either work within one editor instance or with one or more editor instances that use a single context. It is the context plugin's role to implement handling for both modes.

                                      There are a few rules for interaction between the editor plugins and context plugins:

                                      * A context plugin can require another context plugin. * An can require a context plugin. * A context plugin MUST NOT require an .

                                    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;

                                                class Editor

                                                abstract class Editor implements Observable {}

                                                  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 &ndash; During the editor initialization (before ) finished its job. * ready &ndash; After the promise returned by the method is resolved. * destroyed &ndash; 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.

                                                        class EditorUI

                                                        class EditorUI implements Observable {}
                                                        • A class providing the minimal interface that is required to successfully bootstrap any editor UI.

                                                        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).

                                                        class MultiCommand

                                                        class MultiCommand extends Command {}

                                                          method registerChildCommand

                                                          registerChildCommand: (command: Command) => void;

                                                            class PendingActions

                                                            class PendingActions
                                                            extends ContextPlugin
                                                            implements Iterable<Observable & { message: string }> {}
                                                            • The list of pending editor actions.

                                                              This plugin should be used to synchronise plugins that execute long-lasting actions (e.g. file upload) with the editor integration. It gives the developer who integrates the editor an easy way to check if there are any actions pending whenever such information is needed. All plugins that register a pending action also provide a message about the action that is ongoing which can be displayed to the user. This lets them decide if they want to interrupt the action or wait.

                                                              Adding and updating a pending action:

                                                              const pendingActions = editor.plugins.get( 'PendingActions' ); const action = pendingActions.add( 'Upload in progress: 0%.' );

                                                              // You can update the message: action.message = 'Upload in progress: 10%.';

                                                              Removing a pending action:

                                                              const pendingActions = editor.plugins.get( 'PendingActions' ); const action = pendingActions.add( 'Unsaved changes.' );

                                                              pendingActions.remove( action );

                                                              Getting pending actions:

                                                              const pendingActions = editor.plugins.get( 'PendingActions' );

                                                              const action1 = pendingActions.add( 'Action 1' ); const action2 = pendingActions.add( 'Action 2' );

                                                              pendingActions.first; // Returns action1 Array.from( pendingActions ); // Returns [ action1, action2 ]

                                                              This plugin is used by features like to register their ongoing actions and by features like to detect whether there are any ongoing actions. Read more about saving the data in the guide.

                                                            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.

                                                                  class Plugin

                                                                  class Plugin implements Observable {}
                                                                  • The base class for CKEditor plugin classes.

                                                                  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.

                                                                    Interfaces

                                                                    interface Command

                                                                    interface Command extends Observable {}

                                                                      interface ContextPlugin

                                                                      interface ContextPlugin extends Observable {}

                                                                        interface Editor

                                                                        interface Editor extends Observable {}

                                                                          interface EditorUI

                                                                          interface EditorUI extends Observable {}

                                                                            interface Plugin

                                                                            interface Plugin extends Observable {}

                                                                              Package Files (13)

                                                                              Dependencies (28)

                                                                              Dev Dependencies (0)

                                                                              No dev dependencies.

                                                                              Peer Dependencies (0)

                                                                              No peer dependencies.

                                                                              Badge

                                                                              To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                                                              You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@types/ckeditor__ckeditor5-core.

                                                                              • Markdown
                                                                                [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@types/ckeditor__ckeditor5-core)
                                                                              • HTML
                                                                                <a href="https://www.jsdocs.io/package/@types/ckeditor__ckeditor5-core"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>