${ title }
+
${ message }
`;
@@ -89,18 +95,18 @@ function createNotification( title, message ) {
const notification = document.createElement( 'div' );
const close = document.createElement( 'button' );
- close.classList.add( 'main__notification-close' );
+ close.classList.add( 'notification__close' );
close.innerText = '✕';
close.setAttribute( 'aria-label', 'Close the notification' );
- notification.classList.add( 'main__notification', 'notice' );
+ notification.classList.add( 'notification', 'notice' );
notification.innerHTML = notificationTemplate;
// ATM we support only top-right position.
notification.style.top = getViewportTopOffsetConfig() + 10 + 'px';
notification.style.right = '10px';
notification.appendChild( close );
- const activeNotifications = document.querySelectorAll( '.main__notification' );
+ const activeNotifications = document.querySelectorAll( '.notification' );
// Translate the position of multiple notifications (just in case).
if ( activeNotifications.length > 0 ) {
@@ -110,8 +116,8 @@ function createNotification( title, message ) {
notification.style.right = parseInt( notification.style.right ) + moveOffset + 'px';
}
- // Append notification to the `.main__content` element.
- const main = document.querySelector( '.main__content' );
+ // Append notification to the `.l-layout__container` element.
+ const main = document.querySelector( '.l-layout__container' );
main.appendChild( notification );
close.addEventListener( 'click', () => {
@@ -147,7 +153,7 @@ function createNotification( title, message ) {
element.setAttribute( 'srcset', srcset );
}
- [ ...document.querySelectorAll( '.main__content-inner img' ) ]
+ [ ...document.querySelectorAll( '.content-inner img' ) ]
.filter( img => isRelativeUrl( img.getAttribute( 'src' ) ) )
.forEach( img => {
// Update `
-
-Previous versions
- -| Name | -Description | -
|---|---|
| - {@link features/general-html-support Advanced HTML Editing} - | -- Advanced HTML Editing provides general HTML support, offering detailed - control over permissible HTML elements, attributes, and styles. It - further allows HTML Source Code Editing, handling HTML elements, - HTML comments, and editing of the full page content, including meta - tags. - | -
| - - {@link features/full-page-html Full page HTML} - - | -
- Thanks to the full page HTML feature, you can use CKEditor 5 to edit
- entire HTML pages (from <html> to
- </html>), including the page metadata. While the
- {@link features/general-html-support General HTML Support}
- feature focuses on elements inside the content (the document's
- <body>), this feature enables markup invisible
- to the end user.
- |
-
| - - {@link features/general-html-support General HTML Support (GHS)} - - | -- With the General HTML Support (GHS) feature, developers can enable HTML - features that are not supported by any other dedicated CKEditor 5 - plugins. GHS lets you add elements, attributes, classes, and styles to - the source. It also ensures this markup stays in the editor window and the output. - | -
| - - {@link features/html-comments HTML comment} - - | -
- By default, the editor filters out all HTML comments on initialization.
- The {@link features/html-comments HTML comment}
- feature lets developers keep HTML comments in the document without
- displaying them to the user.
- |
-
| - - {@link features/html-embed HTML embed} - - | -- The HTML embed feature lets you embed any HTML snippet in your content. - The feature is meant for more advanced users who want to directly - interact with HTML fragments. - | -
| - - {@link features/show-blocks Show blocks} - - | -- The show blocks feature allows the content creators to visualize all - block-level elements (except for widgets). It surrounds them with an - outline and displays their element name in the top-left corner of the - box. - | -
| - - {@link features/source-editing Source code editing} - - | -- The source code editing feature lets you view and edit the source of your - document. - | -
| - - {@link features/source-editing-enhanced Enhanced source code editing} - - | -- Enhanced source code editing allows for viewing and editing the source code of the document in a handy modal window (compatible with all editor types) with syntax highlighting, autocompletion and more. - | -
| - {@link features/block-quote Block formatting} - | -- Block Formatting allows for the organization and emphasis of content - through the use of Headings, Style Headings, Block Quotes, and - Horizontal Lines. Users can select from different levels of headings to - outline sections and subsections, apply various styles to these headings - for visual hierarchy, insert horizontal lines to delineate sections, and - use block quotes to highlight excerpts or important passages. - | -
| - - {@link features/block-quote Block quote} - - | -- The block quote feature lets you easily include block quotations or pull - quotes in your content. It is also an attractive way to draw the - readers' attention to selected parts of the text. - | -
| - - {@link features/headings Headings/paragraph} - - | -- The heading feature helps you structure your document by adding headings - to parts of the text. They make your content easier to scan by both - readers and search engines. - | -
| - - {@link features/horizontal-line Horizontal line} - - | -- The horizontal line feature lets you visually divide your content into - sections by inserting horizontal lines (also known as horizontal rules). - It is an easy way to organize the content or indicate a change of topic. - | -
| - - {@link features/indent Block indentation} - - | -- The block indentation feature lets you set indentation for text blocks - such as paragraphs, headings, or lists. This way you can visually - distinguish parts of your content. - | -
| - {@link features/bookmarks Bookmarks} - | -- The bookmarks feature allows for adding and managing the bookmarks anchors - attached to the content of the editor. These provide fast access to important - content sections, and speed up the navigation boosting efficiency. - | -
| - {@link framework/deep-dive/clipboard Clipboard} - | -- Copy, cut, and paste content within the editor or from external sources. - | -
| - {@link features/code-blocks Code blocks} - | -- Supports the insertion and management of pre-formatted code snippets with - distinct styling. - | -
| - {@link features/drag-drop Drag and drop} - | -- Rearrange elements within a document, including moving text blocks, - images, or other content types. - | -
| - {@link features/font Font formatting} - | -- The font feature lets you change font family, size, and color (including - background color). All of these options are configurable. - | -
| - - {@link features/font#configuring-the-font-color-and-font-background-color-features Font background color} - - | -- Effortlessly make the words stand out even more with a colored background. - | -
| - - {@link features/font#configuring-the-font-color-and-font-background-color-features Font color} - - | -Effortlessly make the letters stand out with their own color. | -
| - - {@link features/font#configuring-the-font-family-feature Font family} - - | -- Choose from a predefined set of fonts, depending on the type of content - and its destination - print, screen, etc. - | -
| - - {@link features/font#configuring-the-font-size-feature Font size} - - | -Easily control the size of the letters. | -
| - {@link features/images-overview Image} - | -- The image feature allows adding images of various kinds to the rich - content inside the editor. A large set of subfeatures lets the users - fully control this process. Upload or paste images, insert - via URL, use responsive images, resize images, add captions, set - different image styles, and link images. - | -
| - - {@link features/images-text-alternative Image alt text} - - | -- Add description text, AKA alternative text, for images. Alt text - improves accessibility by telling screen readers and search engines what - the image depicts. - | -
| - - {@link features/images-captions Image captions} - - | -- Add optional captions for images, which are shown below the picture. - | -
| - - {@link features/images-inserting Image insert via URL} - - | -- You can insert images by uploading them directly from your disk, but you - can also configure CKEditor 5 to let you insert images using URLs. This - way, you can save time by adding images that are already online. - | -
| - - {@link features/images-linking Image linking} - - | -
- The
- {@link module:link/linkimage~LinkImage}
- plugin lets you use images as links.
- |
-
| - - {@link features/images-resizing Image resize} - - | -
- The image resize feature lets you change the width of images in your
- content. It is implemented by the
- {@link module:image/imageresize~ImageResize}
- plugin.
- |
-
| - - {@link features/images-styles Image styles} - - | -- The image styles feature lets you adjust the appearance of images. It - works by applying CSS classes to images or changing their type from - inline to block or vice versa. - | -
| - - {@link features/image-upload Image upload} - - | -- Inserting - {@link features/images-overview images} - into content created with CKEditor 5 is quite a common task. In a - properly configured rich-text editor, there are several ways for the end - user to insert images. - | -
| - - {@link features/images-responsive Responsive images} - - | -
- The ability to have responsive images in the rich-text editor content is
- a great modern feature provided by the {@link features/ckbox CKBox asset manager}.
- With a single image upload, several optimized versions of that image
- are created, each for a different size of the display. The CKBox feature
- produces a <picture> element with a set of optimized
- images. The browser will automatically load the image with the
- dimensions most suitable for the presented page resolution, which makes
- the image load much faster and saves bandwidth.
- |
-
| - - {@link features/line-height Line height - - Premium feature - } - - | -- The line height feature lets you adjust the vertical spacing between lines of text, - controlling how tightly or loosely text is packed within paragraphs. - | -
| - {@link features/link Links} - | -- Facilitates the addition of hyperlinks to text, automatically converting - typed or pasted URLs into clickable links, and allowing manual insertion - and editing of links. - | -
| - {@link features/lists Lists} - | -- Lists allow the creation and management of various list types, including - to-do lists, bulleted and numbered lists, with additional customization - options such as list styles, setting the start number for lists, - creating reversed lists, adjusting list indentation, and crafting nested - lists. - | -
| - - {@link features/lists-editing#indenting-lists List indentation} - - | -- Besides controlling - {@link features/indent text block indentation}, - the indent and outdent buttons allow for indenting list items - (nesting them). - | -
| - - {@link features/lists#list-start-index List start index} - - | -- The list start index feature allows the user to choose the starting - point of an ordered list. By default, this would be 1 (or A, or I – see - the list styles section). Sometimes, you may want to start a list with - some other digit or letter, though. - | -
| - - {@link features/lists#list-styles List styles} - - | -- The list style feature introduces some more styles for the list item - markers. When - {@link module:list/listconfig~ListPropertiesConfig#member-styles enabled}, - it adds 3 styles for unordered lists and 6 styles for ordered lists - to choose from. The user will be able to set or change the list style - via the dropdown. It opens when you click the arrow next to the - appropriate list button in the toolbar. - | -
| - - {@link features/multi-level-lists Multi-level lists - - Premium feature - } - - | -- Multi-level lists with the legal style numbering feature allows for easy - creation and modification of numbered lists with counters (1, 1.1, - 1.1.1). These are crucial for clear referencing and hierarchical - organization in complex documents. The feature offers full compatibility - with Microsoft Word. - | -
| - - {@link features/lists-editing#indenting-lists Nested lists} - - | -- Besides controlling {@link features/indent text block indentation}, - the indent and outdent buttons allow for indenting list items - (nesting them). - | -
| - - {@link features/lists Ordered lists} - - | -- The list feature lets you create ordered (numbered) lists. The unique - thing about them is that you can put any content inside each list item - (including block elements like paragraphs and tables), retaining the - continuity of numbering and indentation. You can also easily control the - list markers type. - | -
| - - {@link features/lists#reversed-list Reversed list} - - | -- The reversed list feature lets the user reverse the numbering order of a - list, changing it from ascending to descending. This is useful in - countdowns and things-to-do lists that need to reproduce steps in a - reversed order (for example, in disassembly instructions). - | -
| - - {@link features/todo-lists To-do lists} - - | -- The to-do list feature lets you create a list of interactive checkboxes - with labels. It supports all features of {@link features/lists bulleted and numbered lists}, - so you can nest a to-do list together with any combination of other - lists. - | -
| - - {@link features/lists Unordered lists} - - | -- The list feature lets you create unordered (bulleted) lists. The unique - thing about them is that you can put any content inside each list item - (including block elements like paragraphs and tables), retaining the - continuity of numbering and indentation. You can also easily control the - list markers' shape. - | -
| - {@link features/mermaid Mermaid Exp} - | -- You can create flowcharts and diagrams in CKEditor 5 thanks to the - experimental integration with the Mermaid library. Mermaid uses a - Markdown-inspired syntax to create and dynamically modify flowcharts, - Gantt diagrams, pie or quadrant charts, graphs, mindmaps, and more. - | -
| - {@link features/remove-format Remove formatting} - | -- The remove format feature lets you quickly remove any text formatting - applied using inline HTML elements and CSS styles, like basic text - styles (bold, italic) or font family, size, and color. This feature does - not remove block-level formatting (headings, images) or semantic data - (links). - | -
| - {@link features/select-all Select all} - | -- Enables the selection of all content within the editor with a single - command or shortcut. - | -
| - {@link features/tables Tables} - | -- CKEditor 5 provides robust support for tables, with the ability to merge - and split cells, resize columns, style tables and individual cells, - insert and delete columns and rows, as well as create nested tables for - complex data presentation. - | -
| - - {@link features/tables-resize Columns resizing} - - | -
- The
- {@link module:table/tablecolumnresize~TableColumnResize}
- plugin lets you resize tables and individual table columns. It gives you
- complete control over column width.
- |
-
| - - {@link features/tables#table-contextual-toolbar Insert/delete columns & rows} - - | -- The basic table features allow users to insert tables into content, add - or remove columns and rows and merge or split cells. - | -
| - - {@link features/tables#table-contextual-toolbar Merge & split cells} - - | -- The basic table features allow users to insert tables into content, add - or remove columns and rows, and merge or split cells. - | -
| - - {@link features/tables#nesting-tables Nesting} - - | -- CKEditor 5 allows nesting tables inside other table's cells. This may be - used for creating advanced charts or layouts based on tables. The nested - table can be formatted just like a regular one. - | -
| - - {@link features/tables-styling Styling tables & cells} - - | -- CKEditor 5 comes with some additional tools that help you change the - look of tables and table cells. You can control border color and style, - background color, padding, or text alignment. - | -
| - - {@link features/tables#default-table-headers Table headers} - - | -
- To make every inserted table have n number of rows and
- columns as table headers by default, set an optional table configuration
- property defaultHeadings.
- |
-
| - - {@link features/tables#table-selection Table selection} - - | -
- The
- {@link module:table/tableselection~TableSelection}
- plugin introduces support for the custom selection system for tables
- that lets you:• Select an arbitrary rectangular table fragment – a
- few cells from different rows, a column (or a few of them) or a row (or
- multiple rows).• Apply formatting or add a link to all selected
- cells at once. The table selection plugin is loaded automatically
- by the Table plugin.
- |
-
| - - {@link features/tables-caption Tables caption} - - | -
- The
- {@link module:table/tablecaption~TableCaption}
- plugin lets you add captions to your tables. Table captions also improve
- accessibility as they are recognized by screen readers.
- |
-
| - - {@link features/layout-tables Layout tables} - - | -
- The
- {@link module:table/tablelayout~TableLayout}
- plugin is used to structure web page content spatially rather than for presenting tabular data.
- It lets integrators create multi-column designs and precise positioning of elements on a page.
- |
-
| - {@link features/text-alignment Text alignment} - | -- Allows the adjustment of text alignment to the left, right, center, or - justify and permits the alteration of indentation. - | -
| - {@link features/basic-styles Text formatting} - | -- CKEditor 5 provides developers with text editing and formatting features - such as Bold, Italic, Underline, Strikethrough, Subscript, Superscript, - Inline Code, Highlight, and Font Styles. These features allow users to - style and present their content as needed. This ensures users can style - their text to improve readability, match branding guidelines, or - highlight important content sections. - | -
| - - {@link features/basic-styles Bold} - - | -Making the letters look like the good time were never gone. | -
| - - {@link features/basic-styles Code} - - | -Snippet look like a terminal from the 1990s movie. | -
| - - {@link features/highlight Highlight} - - | -- Highlight makes important content stand out, either with font color or - background fill. - | -
| - - {@link features/basic-styles Italic} - - | -Making the letters look like seashore pines. | -
| - - {@link features/basic-styles Strikethrough} - - | -Never mind, will not need it anymore. | -
| - - {@link features/style Styles} - - | -- The styles feature lets you easily apply predefined styles available for - block and inline content. - | -
| - - {@link features/basic-styles Subscript} - - | -Fine print at the bottom, like atom numbers. | -
| - - {@link features/basic-styles Superscript} - - | -Fine print on top, like references in a book. | -
| - - {@link features/basic-styles Underline} - - | -Stuff looks important, yo. Or like a link, too. | -
| - {@link features/undo-redo Undo/redo} - | -Backtrack or repeat actions for editing purposes. | -
| Name | -Description | -
|---|---|
| - {@link features/collaboration Asynchronous collaboration - - Premium feature - } - | -- Asynchronous Collaboration in CKEditor 5 is designed for teams using a - turn-based approach to collaboratively write, review, and discuss - content within the application. It integrates Track Changes, Comments, - and Revision History features to facilitate collaboration. - | -
| - - {@link features/collaboration Local data storage - - Premium feature - } - - | -- In asynchronous collaboration, data is maintained on the client's - servers. - | -
| - {@link features/comments Comments - - Premium feature - } - | -- Users can add side notes to marked fragments of the document, including - text and block elements such as images. It also allows the users to - discuss in threads and remove comments when they finish the discussion. - | -
| - - {@link features/comments Comments archive - - Premium feature - } - - | -- Comments threads can be either deleted or resolved. The latter provides - a way to archive comments that are no longer relevant, reducing clutter - and making it easier to focus on the most important feedback. Users can - access the comments archive from the toolbar and use it to view and - restore archived comments if necessary. It helps to simplify the - feedback management process. - | -
| - - {@link features/comments-outside-editor Comments outside editor - - Premiumfeature - } - - | -
- The comments feature API, together with
- {@link module:core/context~Context}, lets you create deeper integrations with your application. One such
- integration is enabling comments on non-editor form fields.
- |
-
| - - {@link features/annotations-display-mode Sidebar modes - - Premium feature - } - - | -- There are three built-in UIs to display comment threads and suggestion - annotations: the wide sidebar, the narrow sidebar, and inline balloons. - You can also display them together in more advanced scenarios where - various annotation sources (comments, suggestions) are connected to - different UIs or even create your UI for annotations. - | -
| - {@link features/mentions Mentions} - | -- The mention feature supports smart autocompletion triggered by user - input. Typing a predetermined marker, like @ or #, prompts a panel to - appear, offering autocomplete suggestions. - | -
| - {@link features/real-time-collaboration Real-time collaboration - - Premium feature - } - | -- Real-Time Collaboration in CKEditor 5 is designed for users who are - writing, reviewing, and commenting on content simultaneously. It also - automatically solves all conflicts if users make changes at the same - time. - | -
| - - {@link features/users-in-real-time-collaboration Co-authoring - - Premium feature - } - - | -Multiple user real-time editing and content creation feature. | -
| - - - - On-premises - - Premium feature - - - - | -- On-premises real-time collaboration version to deploy to client's own - infrastructure, includes a private cloud. - | -
| - - - - SaaS - - Premium feature - - - - | -Real-time collaboration provided as a service by CKSource. | -
| - {@link features/revision-history Revision history - - Premium feature - } - | -- The revision history feature is a document versioning tool. It allows - CKEditor 5 users to create and view the chronological revision history - of their content. These versions are listed in the side panel. The - preview mode allows for easy viewing of content development between - revisions. You can rename, compare, and restore older revisions on the - go. - | -
| - {@link features/track-changes Track changes - - Premium feature - } - | -- The track changes feature brings automatic suggestion marking for the - document as you change it. When editing the document, the user can - switch to the track changes mode. All their changes will then create - suggestions that they can accept or discard. - | -
| - {@link features/users Users list and permissions - - Premium feature - } - | -
- The
- {@link module:collaboration-core/users~Users}
- plugin and related plugins let you manage user data and permissions.
- This is essential when many users are working on the same document.
- |
-
| Name | -Description | -
|---|---|
| - {@link features/export-pdf Content generation - - Premium feature - } - | -CKEditor 5 may be your universal starting point for generating content in several recognizable formats. | -
| - - {@link features/export-pdf Export to PDF - - Premium feature - } - - | -- Create a PDF from in-editor content seamlessly. Customize headers and - footers, include page breaks, embed images, and choose from various - fonts. - | -
| - - {@link features/export-word Export to Word - - Premium feature - } - - | -- Instantly convert content from the editor to a Word document with a - single click, maintaining its appearance and formatting. The final - document includes suggestions, comments, page breaks, and embedded - images. - | -
| - - {@link features/import-word Import from Word - - Premium feature - } - - | -- Effortlessly transform Word documents into clean HTML within CKEditor 5 - while retaining the original styling, as well as comments and change - tracking annotations. - | -
| - {@link features/export-with-inline-styles Export with inline styles} - - Premium feature - | -
- The
- {@link module:export-inline-styles/exportinlinestyles~ExportInlineStyles}
- plugin applies the styles defined by CSS style sheets directly on HTML elements.
- |
-
| - {@link features/markdown Markdown output} - | -- Enable Markdown as the default output format instead of HTML with the - Markdown plugin. Combined with Autoformatting, CKEditor becomes an - efficient Markdown editor, allowing the creation of text documents using - the simplified formatting syntax favored by developers. - | -
| - {@link features/media-embed Media embed} - | -- Use the insert media button in the toolbar to embed media. - Pasting a media URL directly into the editor content automatically - embeds the media. - | -
| - {@link features/paste-markdown Paste Markdown - Exp - } - | -- The paste Markdown feature lets users paste Markdown-formatted content - straight into the editor. It will be then converted into rich text on - the fly. - | -
| - {@link module:engine/dataprocessor/xmldataprocessor~XmlDataProcessor XML output} - | -- Turn your content into parsable XML files for automation and - cross-platform interoperability. - | -
| Name | -Description | -
|---|---|
| - {@link features/document-outline Document outline - - Premium feature - } - | -- The Document Outline feature automatically detects and lists document - headings in a sidebar, enabling faster navigation through large - documents. Headings are organized in a structured list, so users can - click and jump to different sections quickly. This feature also - allows for customization of the outline's location within the user - interface, catering to different user preferences for workspace layout. - | -
| - {@link features/minimap Page utilities} - | -- CKEditor 5 Page Utilities enables users to dictate the structuring and - print formatting of their documents effectively. - | -
| - - {@link features/minimap Content minimap} - - | -- Offers a concise, birds-eye view of the document's content, - allowing for quick navigation and content management. - | -
| - - {@link features/title Document title} - - | -- Allows users to set and modify the document's title within the - editing interface, ensuring accurate reflection of the contents. - | -
| - - {@link features/page-break Page break} - - | -- Facilitates the insertion of manual breaks within the document, enabling - the definition of page endings and beginnings for optimal layout and - print clarity. - | -
| - {@link features/pagination Pagination - - Premium feature - } - | -- The Pagination feature visually indicates where pages begin and end within a document. This feature is - designed to assist users in preparing their documents for printing or export to various document - formats, ensuring that the transition between pages is seamless and accurately reflected in the final - output. Users may adjust content distribution across pages as they like, ensuring well-organized - documents with presented content, whether in digital form or print. By providing a clear view of how - text and elements will appear page-by-page, Pagination aids in the creation of professional and polished - documents. - | -
| - {@link features/table-of-contents Table of contents - - Premium feature - } - | -- The Table of Contents feature is a dynamic tool for organizing - documents. It allows for the insertion of a linked table of contents - that automatically updates in real time as the document's content - changes. This means changes made to headings or structured sections - within the document are reflected immediately in the table of contents, - accurately representing the document structure. - | -
| Name | -Description | -
|---|---|
| - {@link features/ai-assistant-overview AI Assistant - - Premium feature - } - | -- The AI Assistant feature enhances editing efficiency and creativity with - artificial intelligence capabilities. It allows users to generate new - content and process data through custom queries or utilize a set of - predefined commands that are also customizable. The feature supports - integration with multiple AI API providers: OpenAI, Azure OpenAI, and - Amazon Bedrock. You can also integrate it with custom models. - | -
| - {@link features/autoformat Automation} - | -Automate your workflow with CKEditor 5 automation tools, regardless of whether you write, link, or save! - | -
| - - {@link features/autoformat Autoformatting} - - | -- Use Autoformatting to get Markdown-like shortcodes for - quick formatting without needing to navigate through toolbar buttons or - dropdown menus. This feature caters to the most common formatting needs. - | -
| - - {@link features/link#autolink-feature Autolink} - - | -- With Autolink, typing or pasting URLs and email - addresses automatically transforms them into clickable links. This - functionality is enabled by default, ensuring that links are always - ready to use. - | -
| - - {@link features/text-transformation Automatic text transformations} - - | -- The Automatic Text Transformation autocorrects or - transforms predefined text fragments into their designated forms. It - comes with a range of popular text transformations pre-configured, and - accepts customization by adding or removing autocorrect entries. It is - commonly used to automate the expansion of abbreviations or short - phrases into their full forms. - | -
| - - {@link features/autosave Autosave} - - | -- The Autosave feature guarantees that your work is never - lost. It automatically saves changes - for instance, when content is - modified. This could involve sending the latest version of the document - to the server, providing peace of mind through continuous backup. - | -
| - {@link features/case-change Case change - - Premium feature - } - | -- The Case Change feature simplifies adjusting text cases within a - document. With just a single click, users can shift text between - UPPERCASE, lowercase, and Title Case options. The case transformation - can be applied to various text blocks (paragraph, heading, or list item) - by placing the cursor within the block. Alternatively, users can select - a specific fragment of text they wish to modify. This feature - enhances the editing workflow by removing the need for manual case - adjustments. - | -
| - {@link features/emoji Emoji} - | -- The Emoji feature lets you insert emojis into the document from the editor - toolbar, or on the go while writing the content. - | -
| - {@link features/find-and-replace Find and replace} - | -- The Find and Replace feature in CKEditor 5's Productivity tools - allows you to search for words or phrases in your document and replace - them with different text. This function helps speed up editing and - maintain content consistency. - | -
| - {@link features/format-painter Format painter - - Premium feature - } - | -- The Format Painter feature lets users clone formatting from one section - and apply it to others within a document. This tool speeds up - maintaining style consistency across the document. Once initiated, - Format Painter can continue to apply the copied formatting to multiple - sections consecutively. This "continuous painting" ensures a - uniform style is achieved quickly without the need to repeatedly select - the formatting options for each new section. - | -
| - {@link features/fullscreen Fullscreen mode} - | -The fullscreen mode lets you temporarily expand the editor to the whole browser viewport, giving you more space to comfortably edit content and use editor's UI features. - | -
| - {@link features/accessibility#keyboard-shortcuts Keyboard shortcuts} - | -- CKEditor 5 supports various keyboard shortcuts that boost productivity - and provide necessary accessibility to screen reader users. - | -
| - {@link features/math-equations MathType - - Premium feature - } - | -- Math Equations allows you to add properly formatted mathematical - notation and chemical formulas to your documents. This feature supports - the inclusion of math equations, which can be handwritten on a tablet - and automatically converted into well-formed digital text. It also - offers simple numbering of equations and the ability to customize with - various fonts and colors, enhancing readability and presentation in your - content. - | -
| - {@link features/merge-fields Merge fields - - Premium feature - } - | -- Merge Fields allows the inclusion of placeholders in your content, - facilitating the creation of document templates, especially useful for - email templates and document automation. These placeholders can later be - replaced with dynamic values by the customer's application, - enabling tasks like mass email distribution or generation of - personalized documents. - | -
| - {@link features/paste-from-google-docs Paste from Google Docs} - | -- Paste from Office features let you paste content from Microsoft Word and - Microsoft Excel and preserve its original structure and formatting. This - is the basic, open-source Paste from Office feature. - | -
| - {@link features/paste-from-office Paste from Office} - | -- Paste from Office features let you paste content from Microsoft Word and - Microsoft Excel and preserve its original structure and formatting. This - is the basic, open-source Paste from Office feature. - | -
| - {@link features/paste-from-office-enhanced Enhanced paste from Office - - Premium feature - } - | -- The Enhanced paste from Word/Excel feature accurately retains formatting - and structure when content is pasted from Microsoft Word documents into - the editor. This includes preserving text styles, lists, tables, and - layouts. The feature facilitates the transfer of documents from Word to - CKEditor 5 without compromising on formatting. - | -
| - {@link features/paste-plain-text Paste plain text} - | -- The Paste as Plain Text feature strips formatting from the pasted text. This feature ensures that text - pasted into the document adopts the style of the surrounding content, effectively described as "pasting - without formatting." Additionally, it intelligently converts double-line breaks into paragraphs and - single-line breaks into soft breaks, aiding in maintaining the structural integrity of the document. - | -
| - {@link features/slash-commands Slash commands - - Premium feature - } - | -- The Slash Commands feature lets users insert block elements and apply - styles using just the keyboard. By pressing the / key, a panel with - suggested commands appears, enabling quick and mouse-free actions. Users - can filter through these commands by typing additional phrases after the - /, making it easier to find specific commands. Additionally, the option - to customize personal commands is available, allowing for a tailored - editing experience. - | -
| - {@link features/special-characters Special characters} - | -- Insert a variety of unique symbols and characters into your document - with CKEditor 5's Special Characters feature. This includes mathematical - operators, currency symbols, punctuation, graphic symbols like arrows or - bullets, and Unicode letters that are not typically available on - standard keyboards, such as umlauts or diacritics. Additionally, the - feature supports the insertion of emojis. This tool is particularly - useful for enhancing the detail and accuracy of content that requires - specialized symbols. - | -
| - {@link features/template Templates - - Premium feature - } - | -- The Templates feature enables the insertion of predefined content structures - into documents, ranging from small content pieces, like formatted - tables, to complete document frameworks, like formal letter templates. - Templates accelerate the document creation process while ensuring - adherence to the company's content and document policies. - | -
| Name | -Description | -
|---|---|
| - {@link features/editor-placeholder Editor placeholder} - | -- You can prompt the user to input content by displaying a configurable - placeholder text when the editor is empty. This works similarly to the - native DOM placeholder attribute used by inputs. Not to be confused with - content placeholder. - | -
| - {@link getting-started/setup/editor-types Editor UI types} - | -- The editor's user interface is dependent on the editor types. The editor - provides functionality through specialized features accessible via a - configurable toolbar or keyboard shortcuts. Some of these features are - only available with certain editor types. - | -
| - - {@link getting-started/setup/editor-types#balloon-editor-and-balloon-block-editor Balloon block editor} - - | -- Balloon block is essentially the balloon editor with an extra block - toolbar, which can be accessed using the button attached to the editable - content area and following the selection in the document. The toolbar - gives access to additional block–level editing features. - | -
| - - {@link getting-started/setup/editor-types#balloon-editor-and-balloon-block-editor Balloon block editor} - - | -- Balloon editor is similar to inline editor. The difference between them - is that the toolbar appears in a balloon next to the selection (when the - selection is not empty). - | -
| - - {@link getting-started/setup/editor-types#classic-editor Classic editor} - - | -- Classic editor is what most users traditionally learned to associate - with a rich-text editor – a toolbar with an editing area placed in a - specific position on the page, usually as a part of a form that you use - to submit some content to the server. - | -
| - - {@link getting-started/setup/editor-types#decoupled-editor-document Decoupled editor} - - | -- The document editor focuses on a rich-text editing experience similar to - large editing packages such as Google Docs or Microsoft Word. It works - best for creating documents, which are usually later printed or exported - to PDF files. - | -
| - - {@link getting-started/setup/editor-types#inline-editor Inline editor} - - | -- The inline editor comes with a floating toolbar that becomes visible - when the editor is focused (for example, by clicking it). A common - scenario for using the inline editor is offering users the possibility - to edit content (such as headings and other small areas) in its real - location on a web page instead of doing it in a separate administration - section. - | -
| - - {@link getting-started/setup/editor-types#multi-root-editor Multi-root editor} - - | -- The multi-root editor is an editor type that features multiple, separate - editable areas. The main difference between using a multi-root editor - and using multiple separate editors is the fact that in a multi-root - editor, the editors are “connected.” All editable areas of the same - editor instance share the same configuration, toolbar, undo stack, and - produce one document. - | -
| - {@link features/email Email editing} - | -- CKEditor 5 provides a wide variety of tools and functions for editing almost - any kind of content. This includes a wide array of tools and solutions to make - email editing easier and more compatible with various email clients. - | -
| - - {@link features/email-configuration-helper Email configuration helper} - - Premium feature - | -- While configuring an email editor looks like a demanding task, the email configuration - helper plugin is the best way to start and make this experience more manageable. - | -
| - {@link getting-started/setup/ui-language Professionally translated language packs} - | -- CKEditor 5 provides 38 professionally translated language options, along - with additional languages provided by community translations. CKEditor 5 - also supports right-to-left (RTL) languages natively. When an RTL - language is selected, the editor automatically adjusts its interface, - including elements like toolbars, dropdowns, and buttons, to ensure an - optimal editing experience.1 - | -
| - {@link getting-started/setup/toolbar Toolbar and menus} - | -- The Toolbar Configuration feature provides different toolbar interfaces - for editing content. The default toolbar includes dropdown menus and - buttons for various editing functions. The Balloon Toolbar appears when - text is selected, showing relevant tools. The Block Toolbar is accessed - by clicking a button on the left-hand side of the editor, providing - tools for the active block of content. Additionally, the Multiline - Toolbar option allows for the expansion of the standard toolbar over - multiple lines to display more tools simultaneously. - | -
| - - {@link getting-started/setup/toolbar#balloon-toolbar Balloon toolbar} - - | -- A ballon toolbar is a special instance of the main toolbar, available in the balloon and balloon block editor types. Instead of being fixed to the editing area, it pops up when the user selects some content and provides an editing toolset. - | -
| - - {@link getting-started/setup/toolbar#block-toolbar Block toolbar} - - | -- The block toolbar provides an additional configurable toolbar on the - left-hand side of the content area, useful when the main toolbar is not - accessible (for example in certain layouts, like balloon block editor). - | -
| - - {@link getting-started/setup/toolbar#main-editor-toolbar Classic toolbar} - - | -- The toolbar is the most basic user interface element of CKEditor 5 that - gives you convenient access to all its features. It has buttons and - dropdowns that you can use to format, manage, insert, and change - elements of your content. - | -
| - - {@link getting-started/setup/toolbar#extended-toolbar-configuration-format Collapsible toolbar} - - | -Collapsible toolbar for UI space efficiency. | -
| - - {@link features/images-overview#image-contextual-toolbar Image contextual toolbar} - - | -
- The
- {@link module:image/imagetoolbar~ImageToolbar}
- plugin introduces a contextual toolbar for images. The toolbar appears
- when an image is selected and can be configured to contain any buttons
- you want. Usually, these will be image-related options, such as the
- {@link features/images-text-alternative text alternative}
- button, the
- {@link features/images-captions image caption}
- button, and
- {@link features/images-styles image styles}
- buttons. The toolbar can also host the image editing button introduced
- by the {@link features/ckbox CKBox asset manager}.
- Shown below is an example contextual toolbar with an extended set of buttons.
- |
-
| - - {@link getting-started/setup/menubar Menu bar} - - | -- The menu bar is a user interface component that gives you access to all features provided by the editor, - organized in menus and categories. This familiar experience, popular in large editing desktop and online - packages, improves the usability of the editor. As the menu bar gathers all the editor features, the - toolbar can be simple and tidy, providing only the most essential and commonly used features. This is - especially welcome in heavily-featured editor integrations. For your convenience, the menu bar provides - a default preset structure based on the plugins loaded in the editor. However, you can arrange it to - suit your needs, remove unnecessary items, or add menu items related to your custom features. - | -
| - - {@link getting-started/setup/toolbar#multiline-wrapping-toolbar Multiline toolbar} - - | -Multiline toolbar for easy access to all functions. | -
| - - {@link getting-started/setup/toolbar#grouping-toolbar-items-in-dropdowns-nested-toolbars Nesting toolbars in dropdowns} - - | -Nested toolbars for space efficiency and task-oriented access. | -
| - - {@link features/annotations-display-mode#wide-sidebar Wide sidebar} - - | -- There are three built-in UIs to display comment threads and suggestion - annotations: the wide sidebar, the narrow sidebar, and inline balloons. - You can also display them together in more advanced scenarios where - various annotation sources (comments, suggestions) are connected to - different UIs, or even create your own UI for annotations. - | -
| - - {@link features/tables#table-contextual-toolbar Table contextual toolbar} - - | -
- The
- {@link module:table/tabletoolbar~TableToolbar}
- plugin introduces a contextual toolbar for the table. The toolbar appears when a table or a cell is
- selected and contains various table-related buttons. These would typically include adding or removing
- columns and rows and merging or splitting cells. If these features are configured, the toolbar will also
- contain buttons for captions and table and cell properties.
- |
-
| - {@link features/watchdog Watchdog} - | -- The watchdog utility protects you from data loss in case the editor - crashes. It saves your content just before the crash and creates a new - instance of the editor with your content intact. - | -
| Name | -Description | -
|---|---|
| - {@link features/accessibility Accessibility support} - | -- CKEditor 5 includes accessibility functionality designed to ensure - content is accessible to all users. These features encompass keyboard - navigation for easier content access without a mouse, screen reader - compatibility facilitated by ARIA attributes, and semantic output markup - for clearer interpretation of content structures. CKEditor 5 meets the - requirements of the Web Content Accessibility Guidelines (WCAG) 2.2 at - levels A and AA, as well as Section 508 of the Rehabilitation Act, as - detailed in the Accessibility Conformance Report, ensuring broad - accessibility compliance. - | -
| - {@link features/read-only Read-only support} - | -- The Read-Only Mode feature enables content to be locked from editing - while still allowing it to be viewed. This mode is often used for - restricting editing access based on user roles, allowing only specific - users or groups to view the content without being able to modify it. - Common uses include viewing sensitive documents like financial reports, - software logs, or copyrighted stories that should not be altered but - need to be accessible for copying or by screen readers. This mode can be - toggled on and off by system triggers. - | -
| - {@link features/restricted-editing Restricted editing} - | -- The Restricted Editing feature allows some sections of a document to be - designated as non-editable while others remain editable. This feature - supports two modes: the standard editing mode, where all content can be - edited, and the restricted editing mode, where users can only modify - parts of the content that are specifically marked as editable. This - functionality is useful for workflows where one group of users creates - document templates that include protected sections, and a second group - fills in editable details such as names, dates, or product names without - altering the rest of the document. - | -
| - {@link features/language Text Part Language} - | -- The Text Part Language feature allows users to specify the language of - individual sections of text. This capability helps in creating documents - that include multiple languages by ensuring that browsers and screen - readers correctly interpret each part according to its designated - language. This feature is particularly valuable for content that - contains text in varying directions, such as an English document with - Arabic citations. It supports the WCAG 3.1.2 Language of Parts - specification, facilitating the creation of more accessible and - comprehensible multilingual content. - | -
| - {@link features/word-count Word and character counter} - | -- The Word and Character Count feature provides a real-time tracking tool - for monitoring the number of words and characters within the editor. - This functionality assists in managing content length and ensuring it - meets specific requirements or limits. - | -
| - {@link features/spelling-and-grammar-checking WProofreader - - Premium feature - } - | -- The Spelling and Grammar Checker is a proofreading tool that supports - over 80 languages and dialects. It checks spelling and grammar in real - time and through a separate dialog. Features include spelling - autocorrect, text autocomplete, and suggestions that appear on hover. Users - can create custom dictionaries for specific terms related to their brand - or company. The tool is compliant with WCAG 2.1 and Section 508 - accessibility standards. It also detects sentence-level errors and - offers context-based correction suggestions. - | -
| Name | -Description | -
|---|---|
| - {@link framework/index Editor SDK} - | -- Select from numerous toolbar styles and over 100 plugins to tailor an - editor that perfectly fits your requirements, all without needing any - development expertise. For those looking to go further, the CKEditor API - enables the creation of custom plugins or modification of the - editor's functionality. To assist the development process, - dedicated resources such as a package generator and the CKEditor 5 - Inspector - a comprehensive suite of debugging tools - are provided, - helping accelerate development work. - | -
| - - {@link features/custom-components Custom Widgets and Components} - - | -- Build custom interactive components using CKEditor 5's widget system. Create block widgets, inline elements, external data integrations, and framework components (React, Vue, Angular) that seamlessly integrate with the editor's content model and UI. - | -
| - - {@link framework/development-tools/inspector CKEditor 5 inspector} - - | -The official CKEditor 5 inspector provides a set of rich debugging tools for editor internals like - {@link framework/architecture/editing-engine#model model}, {@link - framework/architecture/editing-engine#view view}, and {@link - framework/architecture/core-editor-architecture#commands commands}. | -
| - - Cloud Services REST API - - | -The CKEditor Cloud Services is a cloud platform that provides editing and real-time collaboration - services. The platform primarily focuses on providing a backend for the CKEditor 5 features, although - some features can also be used directly through REST APIs. | -
| - {@link framework/theme-customization Themes} - | -- The default theme of CKEditor 5 can be customized to match most visual - integration requirements. - | -
| - {@link framework/architecture/ui-library UI Library} - | -
- The standard UI library of CKEditor 5 is
- @ckeditor/ckeditor5-ui. It provides base classes and helpers that allow for building a
- modular UI that seamlessly integrates with other components of the
- ecosystem.
- |
-
| Name | -Description | -
|---|---|
| - {@link features/base64-upload-adapter Base64 Upload Adapter} - | -- Convert inserted images into Base64-encoded strings in the editor - output. Images are stored with other content in the database without - server-side processing. - | -
| - {@link features/ckbox CKBox - - Premium feature - } - | -- Securely upload, store, edit, and utilize your images and files in CKEditor 5. Simplify media discovery - in your uploads with the media browser alongside an intuitive Image Editor for image adjustments. - Designed to facilitate organization, CKBox enables integrations, maintains permissions, and uses - Workspaces to categorize files according to the user, document, or customer. It guarantees fast loading - and optimal display of your images across devices through an efficient CDN. Deployable on-premises or as - cloud SaaS. - | -
| - {@link features/ckfinder CKFinder - - Premium feature - } - | -- The CKFinder feature lets you insert images and links to files into your - content. CKFinder is a powerful file manager with various image editing - and image upload options. - | -
| - {@link features/image-upload#implementing-your-own-upload-adapter Custom Upload Adapter} - | -- Have your own file management solution? Use this adapter to integrate - your preferred software with CKEditor. - | -
| - {@link features/simple-upload-adapter Simple Upload Adapter} - | -
- Upload images to your server using the XMLHttpRequest API with a
- minimal editor configuration.
- |
-
| - UploadcarePremium - feature - | -- Upload, store, transform, optimize, and deliver images, videos, and - documents with this cloud-based file handler. Upload media from local - storage, web cameras, cloud services, and social networks with automated - media optimization through a CDN for responsive image delivery. Popular - features include adaptive image quality, automated image format - conversion, progressive JPEG, and options for preview, resize, stretch, - crop, content-aware crop, and setting fill color. - | -
+
+
| Field | +Required? | +Description | +
|---|---|---|
type |
+ ✅ Yes | ++ Type of the change. See the allowed values and their impact in the table below. + | +
scope |
+ ❌ No | +Affected package(s), using short names like ckeditor5-core. |
+
closes |
+ ❌ No | +List of issues this change resolves. Use numbers (123), full references (ckeditor/ckeditor5#123), or full URLs. |
+
see |
+ ❌ No | +Related issues that provide context but are not directly resolved by this change. Same format as closes. |
+
communityCredits |
+ ❌ No | +GitHub usernames of external contributors who should be credited for this change. | +
| (body) | +✅ Yes | +After the frontmatter, add a short and meaningful summary of the change. Optionally include extended context or rationale. | +
| Type | +Release | +Description | +
|---|---|---|
| Feature | +minor |
+ A new feature. Introduces user-facing functionality. | +
| Fix | +patch |
+ A bug fix. Use also for small improvements that do not qualify as new features. | +
| Other | +patch |
+ Enhancement or refactor. It is not a fix or feature. Example: public API cleanup. | +
| Major breaking change | +major |
+ A change in the integration layer or the plugin development API. See {@link updating/versioning-policy versioning policy} for details. | +
| Minor breaking change | +minor |
+ Low-level customizable API layer. See {@link updating/versioning-policy versioning policy} for details. | +
-
- 
-
-
`.
-```html
+```angular-html
`.
Controls the editor's {@link module:core/editor/editor~Editor#isReadOnly read–only} state:
-```ts
+```angular-ts
@Component( {
// ...
} )
@@ -183,7 +177,7 @@ export class MyComponent {
}
```
-```html
+```angular-html