CKEditor 5 provides a comprehensive set of content features for rich text editing, from basic text formatting to advanced features like tables, images, and collaborative editing tools.
Basic text formatting features for styling content.
/**
* Bold text formatting plugin
*/
class Bold extends Plugin {
static readonly pluginName: 'Bold';
static readonly requires: [BoldEditing, BoldUI];
}
/**
* Italic text formatting plugin
*/
class Italic extends Plugin {
static readonly pluginName: 'Italic';
static readonly requires: [ItalicEditing, ItalicUI];
}
/**
* Underline text formatting plugin
*/
class Underline extends Plugin {
static readonly pluginName: 'Underline';
static readonly requires: [UnderlineEditing, UnderlineUI];
}
/**
* Strikethrough text formatting plugin
*/
class Strikethrough extends Plugin {
static readonly pluginName: 'Strikethrough';
static readonly requires: [StrikethroughEditing, StrikethroughUI];
}
/**
* Inline code formatting plugin
*/
class Code extends Plugin {
static readonly pluginName: 'Code';
static readonly requires: [CodeEditing, CodeUI];
}
/**
* Subscript formatting plugin
*/
class Subscript extends Plugin {
static readonly pluginName: 'Subscript';
static readonly requires: [SubscriptEditing, SubscriptUI];
}
/**
* Superscript formatting plugin
*/
class Superscript extends Plugin {
static readonly pluginName: 'Superscript';
static readonly requires: [SuperscriptEditing, SuperscriptUI];
}Usage Example:
import { ClassicEditor, Bold, Italic, Underline, Strikethrough } from 'ckeditor5';
ClassicEditor
.create(element, {
plugins: [Bold, Italic, Underline, Strikethrough],
toolbar: ['bold', 'italic', 'underline', 'strikethrough']
});List creation and management features.
/**
* List plugin providing numbered and bulleted lists
*/
class List extends Plugin {
static readonly pluginName: 'List';
static readonly requires: [ListEditing, ListUI];
}
/**
* List editing functionality
*/
class ListEditing extends Plugin {
static readonly pluginName: 'ListEditing';
static readonly requires: [Enter, Delete];
}
/**
* List user interface
*/
class ListUI extends Plugin {
static readonly pluginName: 'ListUI';
}
/**
* Command for creating bulleted lists
*/
class BulletedListCommand extends Command {
/**
* Executes the command
* @param options - Command options
*/
execute(options?: { forceValue?: boolean }): void;
}
/**
* Command for creating numbered lists
*/
class NumberedListCommand extends Command {
/**
* Executes the command
* @param options - Command options
*/
execute(options?: { forceValue?: boolean }): void;
}
/**
* Command for indenting list items
*/
class IndentCommand extends Command {
/**
* Executes the command
*/
execute(): void;
}
/**
* Command for outdenting list items
*/
class OutdentCommand extends Command {
/**
* Executes the command
*/
execute(): void;
}Usage Example:
import { ClassicEditor, List } from 'ckeditor5';
ClassicEditor
.create(element, {
plugins: [List],
toolbar: ['bulletedList', 'numberedList', 'outdent', 'indent']
});
// Programmatically create lists
editor.execute('bulletedList');
editor.execute('numberedList');Link creation and management functionality.
/**
* Link plugin for creating and editing hyperlinks
*/
class Link extends Plugin {
static readonly pluginName: 'Link';
static readonly requires: [LinkEditing, LinkUI];
}
/**
* Link editing functionality
*/
class LinkEditing extends Plugin {
static readonly pluginName: 'LinkEditing';
}
/**
* Link user interface
*/
class LinkUI extends Plugin {
static readonly pluginName: 'LinkUI';
}
/**
* Command for creating and editing links
*/
class LinkCommand extends Command {
/**
* Executes the command
* @param href - URL for the link
* @param manualDecorator - Manual decorator options
*/
execute(href?: string, manualDecorator?: Record<string, unknown>): void;
}
/**
* Command for removing links
*/
class UnlinkCommand extends Command {
/**
* Executes the command
*/
execute(): void;
}
/**
* Link configuration options
*/
interface LinkConfig {
/**
* Whether to add target="_blank" to external links
*/
addTargetToExternalLinks?: boolean;
/**
* Default protocol for links without protocol
*/
defaultProtocol?: string;
/**
* Manual decorators for links
*/
decorators?: Record<string, LinkDecoratorDefinition>;
}
/**
* Link decorator definition
*/
interface LinkDecoratorDefinition {
/**
* Decorator mode
*/
mode: 'manual' | 'automatic';
/**
* Label for manual decorators
*/
label?: string;
/**
* HTML attributes to add
*/
attributes?: Record<string, string>;
/**
* CSS classes to add
*/
classes?: string | string[];
/**
* CSS styles to add
*/
styles?: Record<string, string>;
}Usage Example:
import { ClassicEditor, Link } from 'ckeditor5';
ClassicEditor
.create(element, {
plugins: [Link],
toolbar: ['link'],
link: {
addTargetToExternalLinks: true,
defaultProtocol: 'https://',
decorators: {
openInNewTab: {
mode: 'manual',
label: 'Open in a new tab',
attributes: {
target: '_blank',
rel: 'noopener noreferrer'
}
}
}
}
});
// Create links programmatically
editor.execute('link', 'https://example.com');
editor.execute('unlink');Image insertion, resizing, and styling capabilities.
/**
* Image plugin for inserting and editing images
*/
class Image extends Plugin {
static readonly pluginName: 'Image';
static readonly requires: [ImageEditing, Widget, ImageUI];
}
/**
* Image editing functionality
*/
class ImageEditing extends Plugin {
static readonly pluginName: 'ImageEditing';
}
/**
* Image user interface
*/
class ImageUI extends Plugin {
static readonly pluginName: 'ImageUI';
}
/**
* Image resize plugin
*/
class ImageResize extends Plugin {
static readonly pluginName: 'ImageResize';
static readonly requires: [ImageResizeEditing, ImageResizeHandles];
}
/**
* Image style plugin for predefined styles
*/
class ImageStyle extends Plugin {
static readonly pluginName: 'ImageStyle';
static readonly requires: [ImageStyleEditing, ImageStyleUI];
}
/**
* Image toolbar plugin
*/
class ImageToolbar extends Plugin {
static readonly pluginName: 'ImageToolbar';
static readonly requires: [WidgetToolbarRepository];
}
/**
* Image caption plugin
*/
class ImageCaption extends Plugin {
static readonly pluginName: 'ImageCaption';
static readonly requires: [ImageCaptionEditing, ImageCaptionUI];
}
/**
* Command for inserting images
*/
class InsertImageCommand extends Command {
/**
* Executes the command
* @param options - Image insertion options
*/
execute(options: {
source: string | File;
alt?: string;
title?: string;
width?: string | number;
height?: string | number;
}): void;
}
/**
* Image configuration options
*/
interface ImageConfig {
/**
* Image styles configuration
*/
styles?: ImageStyleConfig;
/**
* Image toolbar configuration
*/
toolbar?: string[];
/**
* Image upload configuration
*/
upload?: ImageUploadConfig;
/**
* Image resize options
*/
resizeOptions?: ImageResizeOption[];
}
/**
* Image style configuration
*/
interface ImageStyleConfig {
/**
* Available image styles
*/
options?: (string | ImageStyleOptionDefinition)[];
}
/**
* Image style option definition
*/
interface ImageStyleOptionDefinition {
/**
* Style name
*/
name: string;
/**
* Style title for UI
*/
title: string;
/**
* CSS class name
*/
className: string;
/**
* Icon for the style
*/
icon: string;
}Usage Example:
import { ClassicEditor, Image, ImageResize, ImageStyle, ImageToolbar, ImageCaption } from 'ckeditor5';
ClassicEditor
.create(element, {
plugins: [Image, ImageResize, ImageStyle, ImageToolbar, ImageCaption],
toolbar: ['insertImage'],
image: {
styles: {
options: ['alignLeft', 'alignCenter', 'alignRight']
},
toolbar: ['imageStyle:alignLeft', 'imageStyle:alignCenter', 'imageStyle:alignRight', '|', 'resizeImage'],
resizeOptions: [
{ name: 'resizeImage:original', value: null, label: 'Original' },
{ name: 'resizeImage:50', value: '50', label: '50%' },
{ name: 'resizeImage:75', value: '75', label: '75%' }
]
}
});
// Insert images programmatically
editor.execute('insertImage', { source: 'path/to/image.jpg', alt: 'Description' });Comprehensive table creation and editing features.
/**
* Table plugin for creating and editing tables
*/
class Table extends Plugin {
static readonly pluginName: 'Table';
static readonly requires: [TableEditing, TableUI];
}
/**
* Table editing functionality
*/
class TableEditing extends Plugin {
static readonly pluginName: 'TableEditing';
}
/**
* Table user interface
*/
class TableUI extends Plugin {
static readonly pluginName: 'TableUI';
}
/**
* Table toolbar plugin
*/
class TableToolbar extends Plugin {
static readonly pluginName: 'TableToolbar';
static readonly requires: [WidgetToolbarRepository];
}
/**
* Table properties plugin
*/
class TableProperties extends Plugin {
static readonly pluginName: 'TableProperties';
static readonly requires: [TablePropertiesEditing, TablePropertiesUI];
}
/**
* Table cell properties plugin
*/
class TableCellProperties extends Plugin {
static readonly pluginName: 'TableCellProperties';
static readonly requires: [TableCellPropertiesEditing, TableCellPropertiesUI];
}
/**
* Command for inserting tables
*/
class InsertTableCommand extends Command {
/**
* Executes the command
* @param options - Table creation options
*/
execute(options?: {
rows?: number;
columns?: number;
headingRows?: number;
headingColumns?: number;
}): void;
}
/**
* Command for inserting table rows
*/
class InsertRowCommand extends Command {
/**
* Executes the command
* @param options - Row insertion options
*/
execute(options?: {
at?: 'above' | 'below';
batch?: Batch;
}): void;
}
/**
* Command for inserting table columns
*/
class InsertColumnCommand extends Command {
/**
* Executes the command
* @param options - Column insertion options
*/
execute(options?: {
at?: 'left' | 'right';
batch?: Batch;
}): void;
}
/**
* Table configuration options
*/
interface TableConfig {
/**
* Default table properties
*/
defaultHeadings?: {
rows?: number;
columns?: number;
};
/**
* Table toolbar configuration
*/
toolbar?: string[];
/**
* Content toolbar configuration
*/
contentToolbar?: string[];
/**
* Table properties configuration
*/
tableProperties?: TablePropertiesConfig;
/**
* Cell properties configuration
*/
tableCellProperties?: TableCellPropertiesConfig;
}Usage Example:
import {
ClassicEditor,
Table,
TableToolbar,
TableProperties,
TableCellProperties
} from 'ckeditor5';
ClassicEditor
.create(element, {
plugins: [Table, TableToolbar, TableProperties, TableCellProperties],
toolbar: ['insertTable'],
table: {
contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells', 'tableProperties', 'tableCellProperties'],
tableProperties: {
borderColors: ['#000000', '#ff0000', '#00ff00'],
backgroundColors: ['#ffffff', '#f0f0f0', '#cccccc']
}
}
});
// Create tables programmatically
editor.execute('insertTable', { rows: 3, columns: 4 });
editor.execute('insertTableRowAbove');
editor.execute('insertTableColumnLeft');Heading styles and structure for document organization.
/**
* Heading plugin for document structure
*/
class Heading extends Plugin {
static readonly pluginName: 'Heading';
static readonly requires: [HeadingEditing, HeadingUI];
}
/**
* Heading command for applying heading styles
*/
class HeadingCommand extends Command {
/**
* Executes the command
* @param options - Heading options
*/
execute(options?: {
value?: string;
}): void;
}
/**
* Heading configuration options
*/
interface HeadingConfig {
/**
* Available heading options
*/
options?: HeadingOption[];
}
/**
* Heading option definition
*/
interface HeadingOption {
/**
* Model element name
*/
model: string;
/**
* View element definition
*/
view: string | ViewElementDefinition;
/**
* Title for UI
*/
title: string;
/**
* CSS class for the option
*/
class?: string;
}Usage Example:
import { ClassicEditor, Heading } from 'ckeditor5';
ClassicEditor
.create(element, {
plugins: [Heading],
toolbar: ['heading'],
heading: {
options: [
{ model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
{ model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
{ model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
{ model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' }
]
}
});
// Apply headings programmatically
editor.execute('heading', { value: 'heading1' });
editor.execute('heading', { value: 'paragraph' });