@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
Functions
Classes
Interfaces
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 tofalse
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 theset: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 ( isfalse
). 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
– 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.
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 tonull
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)
- index.d.ts
- src/command.d.ts
- src/context.d.ts
- src/contextplugin.d.ts
- src/editor/editor.d.ts
- src/editor/editorui.d.ts
- src/editor/utils/attachtoform.d.ts
- src/editor/utils/dataapimixin.d.ts
- src/editor/utils/elementapimixin.d.ts
- src/editor/utils/securesourceelement.d.ts
- src/multicommand.d.ts
- src/pendingactions.d.ts
- src/plugin.d.ts
Dependencies (28)
- @types/ckeditor__ckeditor5-alignment
- @types/ckeditor__ckeditor5-autosave
- @types/ckeditor__ckeditor5-ckfinder
- @types/ckeditor__ckeditor5-cloud-services
- @types/ckeditor__ckeditor5-code-block
- @types/ckeditor__ckeditor5-engine
- @types/ckeditor__ckeditor5-export-pdf
- @types/ckeditor__ckeditor5-export-word
- @types/ckeditor__ckeditor5-font
- @types/ckeditor__ckeditor5-heading
- @types/ckeditor__ckeditor5-highlight
- @types/ckeditor__ckeditor5-image
- @types/ckeditor__ckeditor5-indent
- @types/ckeditor__ckeditor5-language
- @types/ckeditor__ckeditor5-link
- @types/ckeditor__ckeditor5-media-embed
- @types/ckeditor__ckeditor5-mention
- @types/ckeditor__ckeditor5-minimap
- @types/ckeditor__ckeditor5-pagination
- @types/ckeditor__ckeditor5-real-time-collaboration
- @types/ckeditor__ckeditor5-restricted-editing
- @types/ckeditor__ckeditor5-table
- @types/ckeditor__ckeditor5-track-changes
- @types/ckeditor__ckeditor5-typing
- @types/ckeditor__ckeditor5-ui
- @types/ckeditor__ckeditor5-upload
- @types/ckeditor__ckeditor5-utils
- @types/ckeditor__ckeditor5-word-count
Dev Dependencies (0)
No dev dependencies.
Peer Dependencies (0)
No peer dependencies.
Badge
To add a badge like this oneto 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[](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>
- Updated .
Package analyzed in 4960 ms. - Missing or incorrect documentation? Open an issue for this package.