AbstractCreates an instance of the editor UI class.
The editor instance.
ReadonlyariaA helper that manages the content of an aria-live regions used by editor features to announce status changes
to screen readers.
ReadonlycomponentAn instance of the module:ui/componentfactory~ComponentFactory, a registry used by plugins to register factories of specific UI components.
ReadonlyeditorThe editor that the UI belongs to.
ReadonlyevaluationA helper that enables the "evaluation badge" feature in the editor.
ReadonlyfocusStores the information about the editor UI focus and propagates it so various plugins and components are unified as a focus group.
ReadonlyisIndicates the UI is ready. Set true after #event:ready event is fired.
ReadonlypoweredA helper that enables the "powered by" feature in the editor and renders a link to the project's webpage.
ReadonlytooltipManages the tooltips displayed on mouseover and focus across the UI.
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,
visualTop: 50
}
This property can be overriden after editor already being initialized:
editor.ui.viewportOffset = {
top: 100,
right: 0,
bottom: 0,
left: 0
};
The main (outermost) DOM element of the editor UI.
For example, in module:editor-classic/classiceditor~ClassicEditor it is a <div> which
wraps the editable element and the toolbar. In module:editor-inline/inlineeditor~InlineEditor
it is the editable element itself (as there is no other wrapper). However, in
module:editor-decoupled/decouplededitor~DecoupledEditor 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.
AbstractviewAdds a toolbar to the editor UI. Used primarily to maintain the accessibility of the UI.
Focusable toolbars can be accessed (focused) by users by pressing the Alt + F10 keystroke. Successive keystroke presses navigate over available toolbars.
A instance of the toolbar to be registered.
Optionaloptions: FocusableToolbarOptionsDestroys the UI.
Registers an extra menu bar element, which could be a single item, a group of items, or a menu containing groups.
// Register a new menu bar item.
editor.ui.extendMenuBar( {
item: 'menuBar:customFunctionButton',
position: 'after:menuBar:bold'
} );
// Register a new menu bar group.
editor.ui.extendMenuBar( {
group: {
groupId: 'customGroup',
items: [
'menuBar:customFunctionButton'
]
},
position: 'start:help'
} );
// Register a new menu bar menu.
editor.ui.extendMenuBar( {
menu: {
menuId: 'customMenu',
label: 'customMenu',
groups: [
{
groupId: 'customGroup',
items: [
'menuBar:customFunctionButton'
]
}
]
},
position: 'after:help'
} );
Returns the editable editor element with the given name or null if editable does not exist.
OptionalrootName: string
The editable name.
Returns array of names of all editor editable elements.
Removes the editable from the editor UI. Removes all handlers added by #setEditableElement.
The name of the editable element to remove.
Stores the native DOM editable element used by the editor under a unique name.
Also, registers the element in the editor to maintain the accessibility of the UI. When the user is editing text in a focusable editable area, they can use the Alt + F10 keystroke to navigate over editor toolbars. See #addToolbar.
The unique name of the editable element.
The native DOM editable element.
Fires the module:ui/editorui/editorui~EditorUI#event:update update 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).
A class providing the minimal interface that is required to successfully bootstrap any editor UI.