CKEditor 5 provides a comprehensive UI framework with components, views, and utilities for building rich editor interfaces and custom UI elements. The UI system is built on a component-based architecture with data binding and event handling.
Foundation classes for all UI components in CKEditor 5.
/**
* Base view class for all UI components
*/
abstract class View {
/**
* Locale object for internationalization
*/
readonly locale?: Locale;
/**
* DOM element representing this view
*/
element?: HTMLElement;
/**
* Template definition for this view
*/
template?: Template;
/**
* Whether the view has been rendered
*/
isRendered: boolean;
/**
* Renders the view to DOM
*/
render(): void;
/**
* Destroys the view and cleans up resources
*/
destroy(): void;
/**
* Sets the template definition
* @param definition - Template definition
*/
setTemplate(definition: TemplateDefinition): void;
/**
* Registers a callback for template events
* @param eventNameOrObject - Event name or object with event definitions
* @param callback - Event callback function
*/
on(eventNameOrObject: string | object, callback?: Function): void;
/**
* Fires an event
* @param eventOrInfo - Event name or event info
* @param args - Event arguments
*/
fire(eventOrInfo: string | EventInfo, ...args: any[]): any;
}
/**
* Template definition for view rendering
*/
interface TemplateDefinition {
/**
* HTML tag name
*/
tag: string;
/**
* Element attributes
*/
attributes?: Record<string, string | TemplateBinding>;
/**
* Element children
*/
children?: (View | TemplateDefinition | string | TemplateBinding)[];
/**
* Text content
*/
text?: string | TemplateBinding;
/**
* Event listeners
*/
on?: Record<string, TemplateBinding>;
}
/**
* Template binding for dynamic values
*/
interface TemplateBinding {
/**
* Observable object
*/
to: string | object;
/**
* Property callback function
*/
callback?: Function;
}Various button implementations for different use cases.
/**
* Standard button view component
*/
class ButtonView extends View {
/**
* Button label text
*/
label?: string;
/**
* Button icon (SVG string or icon name)
*/
icon?: string;
/**
* Button tooltip text
*/
tooltip?: string | boolean;
/**
* Whether the button is enabled
*/
isEnabled: boolean;
/**
* Whether the button is visible
*/
isVisible: boolean;
/**
* Whether the button is toggleable
*/
isToggleable: boolean;
/**
* Whether the button is in "on" state (for toggleable buttons)
*/
isOn: boolean;
/**
* CSS class name
*/
class?: string;
/**
* Button type attribute
*/
type: 'button' | 'submit' | 'reset';
/**
* Executes the button action
*/
execute(): void;
/**
* Focuses the button
*/
focus(): void;
}
/**
* Switch button view for toggle functionality
*/
class SwitchButtonView extends ButtonView {
/**
* Whether the switch is on
*/
isOn: boolean;
}
/**
* List item button view for dropdown menus
*/
class ListItemButtonView extends ButtonView {
/**
* Whether this is the first item in the list
*/
isFirst: boolean;
/**
* Whether this is the last item in the list
*/
isLast: boolean;
}
/**
* File dialog button for file uploads
*/
class FileDialogButtonView extends ButtonView {
/**
* Accepted file types
*/
acceptedType: string;
/**
* Whether multiple files can be selected
*/
allowMultipleFiles: boolean;
/**
* Opens the file dialog
*/
open(): void;
}Usage Example:
import { ButtonView } from 'ckeditor5';
// Create a custom button
const button = new ButtonView();
button.set({
label: 'My Button',
icon: '<svg>...</svg>',
tooltip: 'Click me!',
isEnabled: true
});
button.render();
// Handle button click
button.on('execute', () => {
console.log('Button clicked!');
});Toolbar containers and related components for organizing UI elements.
/**
* Toolbar view for organizing buttons and other UI elements
*/
class ToolbarView extends View {
/**
* Collection of toolbar items
*/
readonly items: ViewCollection;
/**
* Focus tracker for keyboard navigation
*/
readonly focusTracker: FocusTracker;
/**
* Keystroke handler for keyboard shortcuts
*/
readonly keystrokes: KeystrokeHandler;
/**
* Toolbar options
*/
options: ToolbarOptions;
/**
* Whether the toolbar should group items when space is limited
*/
shouldGroupWhenFull: boolean;
/**
* Focuses the first focusable item
*/
focus(): void;
/**
* Focuses the last focusable item
*/
focusLast(): void;
/**
* Fills the toolbar with items from configuration
* @param itemsConfig - Toolbar items configuration
* @param factory - Component factory
*/
fillFromConfig(itemsConfig: ToolbarConfigItem[], factory: ComponentFactory): void;
}
/**
* Toolbar separator view
*/
class ToolbarSeparatorView extends View {
/**
* Creates a toolbar separator
*/
constructor();
}
/**
* Menu bar view for top-level navigation
*/
class MenuBarView extends View {
/**
* Collection of menu bar items
*/
readonly items: ViewCollection;
/**
* Focus tracker
*/
readonly focusTracker: FocusTracker;
/**
* Keystroke handler
*/
readonly keystrokes: KeystrokeHandler;
/**
* Whether the menu bar is open
*/
isOpen: boolean;
/**
* Opens the menu bar
*/
open(): void;
/**
* Closes the menu bar
*/
close(): void;
}
/**
* Toolbar options interface
*/
interface ToolbarOptions {
/**
* Whether to group items when full
*/
shouldGroupWhenFull?: boolean;
/**
* Whether the toolbar is floating
*/
isFloating?: boolean;
}Dropdown menus and related components for contextual actions.
/**
* Dropdown view component
*/
class DropdownView extends View {
/**
* Dropdown button
*/
readonly buttonView: ButtonView;
/**
* Dropdown panel
*/
readonly panelView: DropdownPanelView;
/**
* Whether the dropdown is open
*/
isOpen: boolean;
/**
* Opens the dropdown
*/
open(): void;
/**
* Closes the dropdown
*/
close(): void;
/**
* Focuses the dropdown
*/
focus(): void;
}
/**
* Dropdown panel view
*/
class DropdownPanelView extends View {
/**
* Panel position relative to button
*/
position: 'auto' | 's' | 'se' | 'sw' | 'sme' | 'smw' | 'n' | 'ne' | 'nw' | 'nme' | 'nmw';
/**
* Whether the panel is visible
*/
isVisible: boolean;
/**
* Collection of panel children
*/
readonly children: ViewCollection;
}
/**
* Split button view combining button and dropdown
*/
class SplitButtonView extends View {
/**
* Main action button
*/
readonly actionView: ButtonView;
/**
* Dropdown arrow button
*/
readonly arrowView: ButtonView;
/**
* Whether the dropdown is open
*/
isOpen: boolean;
/**
* Opens the dropdown
*/
open(): void;
/**
* Closes the dropdown
*/
close(): void;
}Form inputs and related UI components for user data collection.
/**
* Text input view component
*/
class InputTextView extends View {
/**
* Input value
*/
value?: string;
/**
* Input placeholder text
*/
placeholder?: string;
/**
* Whether the input is enabled
*/
isEnabled: boolean;
/**
* Whether the input is readonly
*/
isReadOnly: boolean;
/**
* Input type (text, password, email, etc.)
*/
type: string;
/**
* Input ID attribute
*/
id?: string;
/**
* Whether the input has an error
*/
hasError: boolean;
/**
* Focuses the input
*/
focus(): void;
/**
* Selects all input text
*/
select(): void;
}
/**
* Textarea view component
*/
class TextareaView extends View {
/**
* Textarea value
*/
value?: string;
/**
* Placeholder text
*/
placeholder?: string;
/**
* Whether the textarea is enabled
*/
isEnabled: boolean;
/**
* Whether the textarea is readonly
*/
isReadOnly: boolean;
/**
* Textarea ID attribute
*/
id?: string;
/**
* Number of rows
*/
rows?: number;
/**
* Focuses the textarea
*/
focus(): void;
}
/**
* Label view component for form inputs
*/
class LabelView extends View {
/**
* Label text
*/
text?: string;
/**
* Associated input ID
*/
for?: string;
}
/**
* Form header view component
*/
class FormHeaderView extends View {
/**
* Header label
*/
label?: string;
/**
* Header class
*/
class?: string;
}Modal dialogs and overlay components for complex interactions.
/**
* Dialog view for modal interactions
*/
class DialogView extends View {
/**
* Dialog content view
*/
readonly contentView: DialogContentView;
/**
* Dialog actions view
*/
readonly actionsView: DialogActionsView;
/**
* Whether the dialog is visible
*/
isVisible: boolean;
/**
* Dialog header label
*/
headerLabel?: string;
/**
* Shows the dialog
*/
show(): void;
/**
* Hides the dialog
*/
hide(): void;
/**
* Focuses the dialog
*/
focus(): void;
}
/**
* Dialog content view
*/
class DialogContentView extends View {
/**
* Collection of content children
*/
readonly children: ViewCollection;
}
/**
* Dialog actions view for buttons
*/
class DialogActionsView extends View {
/**
* Collection of action buttons
*/
readonly children: ViewCollection;
}List views for organizing and displaying collections of items.
/**
* List view component for collections
*/
class ListView extends View {
/**
* Collection of list items
*/
readonly items: ViewCollection;
/**
* Focus tracker for keyboard navigation
*/
readonly focusTracker: FocusTracker;
/**
* Keystroke handler
*/
readonly keystrokes: KeystrokeHandler;
/**
* ARIA role for the list
*/
role?: string;
/**
* Focuses the first item
*/
focus(): void;
/**
* Focuses the last item
*/
focusLast(): void;
}
/**
* List item view
*/
class ListItemView extends View {
/**
* Collection of item children
*/
readonly children: ViewCollection;
/**
* Whether the item is focused
*/
isFocused: boolean;
}
/**
* List separator view
*/
class ListSeparatorView extends View {
/**
* Creates a list separator
*/
constructor();
}Helper components and utilities for building custom UI.
/**
* Collection of views with observable behavior
*/
class ViewCollection<T extends View = View> {
/**
* Number of items in collection
*/
readonly length: number;
/**
* Adds a view to the collection
* @param item - View to add
* @param index - Position to insert at
*/
add(item: T, index?: number): void;
/**
* Adds multiple views to the collection
* @param items - Views to add
* @param index - Position to start inserting at
*/
addMany(items: Iterable<T>, index?: number): void;
/**
* Gets a view by index
* @param index - View index
* @returns View at index
*/
get(index: number): T | null;
/**
* Removes a view from the collection
* @param subject - View or index to remove
* @returns Removed view
*/
remove(subject: T | number): T;
/**
* Clears all views from the collection
*/
clear(): void;
/**
* Iterator over views
*/
[Symbol.iterator](): Iterator<T>;
}
/**
* Focus tracker for managing focus within UI components
*/
class FocusTracker {
/**
* Whether focus is within tracked elements
*/
readonly isFocused: boolean;
/**
* Currently focused element
*/
readonly focusedElement: Element | null;
/**
* Adds an element to focus tracking
* @param element - Element to track
*/
add(element: Element): void;
/**
* Removes an element from focus tracking
* @param element - Element to stop tracking
*/
remove(element: Element): void;
/**
* Destroys the focus tracker
*/
destroy(): void;
}
/**
* Keystroke handler for keyboard event management
*/
class KeystrokeHandler {
/**
* Sets a keystroke handler
* @param keystroke - Keystroke pattern
* @param callback - Handler callback
* @param options - Handler options
*/
set(
keystroke: string | string[],
callback: Function,
options?: { priority?: number }
): void;
/**
* Destroys the keystroke handler
*/
destroy(): void;
}Usage Example:
import {
DropdownView,
ButtonView,
ListView,
ListItemView,
ViewCollection
} from 'ckeditor5';
// Create a custom dropdown with list
const dropdown = new DropdownView();
const button = new ButtonView();
const list = new ListView();
button.set({
label: 'Choose Option',
withText: true
});
// Add items to list
const items = ['Option 1', 'Option 2', 'Option 3'];
items.forEach(text => {
const listItem = new ListItemView();
const itemButton = new ButtonView();
itemButton.set({
label: text,
withText: true
});
itemButton.on('execute', () => {
console.log(`Selected: ${text}`);
dropdown.close();
});
listItem.children.add(itemButton);
list.items.add(listItem);
});
dropdown.buttonView = button;
dropdown.panelView.children.add(list);
dropdown.render();