From 7ccce628c269eb0e6b7a495174875318fbdb23d0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotrek=20Koszuli=C5=84ski?= Date: Thu, 28 Nov 2024 15:31:16 +0100 Subject: [PATCH 01/20] Start. --- docs/_snippets/features-digest-source.json | 1949 ++++++++++++++++++++ 1 file changed, 1949 insertions(+) create mode 100644 docs/_snippets/features-digest-source.json diff --git a/docs/_snippets/features-digest-source.json b/docs/_snippets/features-digest-source.json new file mode 100644 index 00000000000..5c65e7d60e2 --- /dev/null +++ b/docs/_snippets/features-digest-source.json @@ -0,0 +1,1949 @@ + + + {@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. + + + + + + {@img assets/img/enter-arrow.svg} {@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. + + + + + + {@img assets/img/enter-arrow.svg} {@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. + + + + + + {@img assets/img/enter-arrow.svg} {@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. + + + + + + {@img assets/img/enter-arrow.svg} {@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. + + + + + + {@img assets/img/enter-arrow.svg} {@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. + + + + + + {@img assets/img/enter-arrow.svg} {@link features/source-editing Source editing} + + + + The source editing feature lets you view and edit the source of your + document. + + + + + {@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. + + + + + + {@img assets/img/enter-arrow.svg} {@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. + + + + + + {@img assets/img/enter-arrow.svg} {@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. + + + + + + {@img assets/img/enter-arrow.svg} {@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. + + + + + + {@img assets/img/enter-arrow.svg} {@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. + + + + + + {@img assets/img/enter-arrow.svg} {@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. + + + + + + {@img assets/img/enter-arrow.svg} {@link features/font#configuring-the-font-color-and-font-background-color-features Font color} + + + Effortlessly make the letters stand out with their own color. + + + + + {@img assets/img/enter-arrow.svg} {@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. + + + + + + {@img assets/img/enter-arrow.svg} {@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 subfeature background-grays 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. + + + + + + {@img assets/img/enter-arrow.svg} {@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. + + + + + + {@img assets/img/enter-arrow.svg} {@link features/images-captions Image captions} + + + + Add optional captions for images, which are shown below the picture. + + + + + + {@img assets/img/enter-arrow.svg} {@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. + + + + + + {@img assets/img/enter-arrow.svg} {@link features/images-linking Image linking} + + + + The + {@link module:link/linkimage~LinkImage} + plugin lets you use images as links. + + + + + + {@img assets/img/enter-arrow.svg} {@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. + + + + + + {@img assets/img/enter-arrow.svg} {@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. + + + + + + {@img assets/img/enter-arrow.svg} {@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. + + + + + + {@img assets/img/enter-arrow.svg} {@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/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). + + + + + + {@img assets/img/enter-arrow.svg} {@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. + + + + + + {@img assets/img/enter-arrow.svg} {@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. + + + + + + {@img assets/img/enter-arrow.svg} {@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. + + + + + + {@img assets/img/enter-arrow.svg} {@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). + + + + + + {@img assets/img/enter-arrow.svg} {@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. + + + + + + {@img assets/img/enter-arrow.svg} {@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). + + + + + + {@img assets/img/enter-arrow.svg} {@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. + + + + + + {@img assets/img/enter-arrow.svg} {@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. + + + + + + {@img assets/img/enter-arrow.svg} {@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. + + + + + + {@img assets/img/enter-arrow.svg} {@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. + + + + + + {@img assets/img/enter-arrow.svg} {@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. + + + + + + {@img assets/img/enter-arrow.svg} {@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. + + + + + + {@img assets/img/enter-arrow.svg} {@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. + + + + + + {@img assets/img/enter-arrow.svg} {@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. + + + + + + {@img assets/img/enter-arrow.svg} {@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. + + + + + + {@img assets/img/enter-arrow.svg} {@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/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. + + + + + + {@img assets/img/enter-arrow.svg} {@link features/basic-styles Bold} + + + Making the letters look like the good time were never gone. + + + + + {@img assets/img/enter-arrow.svg} {@link features/basic-styles Code} + + + Snippet look like a terminal from the 1990s movie. + + + + + {@img assets/img/enter-arrow.svg} {@link features/highlight Highlight} + + + + Highlight makes important content stand out, either with font color or + background fill. + + + + + + {@img assets/img/enter-arrow.svg} {@link features/basic-styles Italic} + + + Making the letters look like seashore pines. + + + + + {@img assets/img/enter-arrow.svg} {@link features/basic-styles Strikethrough} + + + Never mind, will not need it anymore. + + + + + {@img assets/img/enter-arrow.svg} {@link features/style Styles} + + + + The styles feature lets you easily apply predefined styles available for + block and inline content. + + + + + + {@img assets/img/enter-arrow.svg} {@link features/basic-styles Subscript} + + + Fine print at the bottom, like atom numbers. + + + + + {@img assets/img/enter-arrow.svg} {@link features/basic-styles Superscript} + + + Fine print on top, like references in a book. + + + + + {@img assets/img/enter-arrow.svg} {@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. + + + + + + + + + + + + + + + {@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. + + + + + + {@img assets/img/enter-arrow.svg} {@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. + + + + + + {@img assets/img/enter-arrow.svg} {@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. + + + + + + {@img assets/img/enter-arrow.svg} {@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. + + + + + + {@img assets/img/enter-arrow.svg} {@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. + + + + + + {@img assets/img/enter-arrow.svg} {@link features/users-in-real-time-collaboration Co-authoring + + Premium feature + } + + + Multiple user real-time editing and content creation feature. + + + + + {@img assets/img/enter-arrow.svg} {@link @cs onpremises/index On-premises + + Premium feature + } + + + + On-premises real-time collaboration version to deploy to client's own + infrastructure, includes a private cloud. + + + + + + {@img assets/img/enter-arrow.svg} {@link @cs guides/collaboration/quick-start 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. + + + + + + + + + + + + {@link features/export-pdf Content generation + + Premium feature + } + + CKEditor 5 may be your universal starting point for generating content in several recognizable formats. + + + + + {@img assets/img/enter-arrow.svg} {@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. + + + + + + {@img assets/img/enter-arrow.svg} {@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. + + + + + + {@img assets/img/enter-arrow.svg} {@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/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. + + + + + + + + + + + + + + + + + + {@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. + + + + + + {@img assets/img/enter-arrow.svg} {@link features/minimap Content minimap} + + + + Offers a concise, birds-eye view of the document's content, + allowing for quick navigation and content management. + + + + + + {@img assets/img/enter-arrow.svg} {@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. + + + + + + {@img assets/img/enter-arrow.svg} {@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. + + + + + + + + + {@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! + + + + + + {@img assets/img/enter-arrow.svg} {@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. + + + + + + {@img assets/img/enter-arrow.svg} {@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. + + + + + + {@img assets/img/enter-arrow.svg} {@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. + + + + + + {@img assets/img/enter-arrow.svg} {@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/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/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 Paste from Office Enhanced + + 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. + + + + + + + + + + + + + + + + + + + + + {@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. + + + + + + {@img assets/img/enter-arrow.svg} {@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. + + + + + + {@img assets/img/enter-arrow.svg} {@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). + + + + + + {@img assets/img/enter-arrow.svg} {@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. + + + + + + {@img assets/img/enter-arrow.svg} {@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. + + + + + + {@img assets/img/enter-arrow.svg} {@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. + + + + + + {@img assets/img/enter-arrow.svg} {@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 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. + + + + + + {@img assets/img/enter-arrow.svg} {@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. + + + + + + {@img assets/img/enter-arrow.svg} {@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). + + + + + + {@img assets/img/enter-arrow.svg} {@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. + + + + + + {@img assets/img/enter-arrow.svg} {@link getting-started/setup/toolbar#extended-toolbar-configuration-format Collapsible toolbar} + + + Collapsible toolbar for UI space efficiency. + + + + + {@img assets/img/enter-arrow.svg} {@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. + + + + + + {@img assets/img/enter-arrow.svg} {@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. + + + + + + {@img assets/img/enter-arrow.svg} {@link getting-started/setup/toolbar#multiline-wrapping-toolbar Multiline toolbar} + + + Multiline toolbar for easy access to all functions. + + + + + {@img assets/img/enter-arrow.svg} {@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. + + + + + {@img assets/img/enter-arrow.svg} {@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. + + + + + + {@img assets/img/enter-arrow.svg} {@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. + + + + + + + + + + + + + {@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. + + + + + + + + + + + + {@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. + + + + + + {@img assets/img/enter-arrow.svg} {@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}. + + + + + {@img assets/img/enter-arrow.svg} {@link @cs developer-resources/apis/overview 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. + + + + + + + + + + + + + {@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. + + From 94ac0025b2ffa20b1bb945cd3134d20ffb1ca6da Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotrek=20Koszuli=C5=84ski?= Date: Thu, 28 Nov 2024 15:34:17 +0100 Subject: [PATCH 02/20] Rows. --- docs/_snippets/features-digest-source.json | 602 +++++++++++---------- 1 file changed, 302 insertions(+), 300 deletions(-) diff --git a/docs/_snippets/features-digest-source.json b/docs/_snippets/features-digest-source.json index 5c65e7d60e2..f224d094a75 100644 --- a/docs/_snippets/features-digest-source.json +++ b/docs/_snippets/features-digest-source.json @@ -1,4 +1,5 @@ - +[ + { "id": "advanced-html-editing", "type": "feature", {@link features/general-html-support Advanced HTML Editing} @@ -9,8 +10,8 @@ HTML comments, and editing of the full page content, including meta tags. - - + }, + { "id": "full-page-html", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/full-page-html Full page HTML} @@ -25,8 +26,8 @@ <body>), this feature enables markup invisible to the end user. - - + }, + { "id": "general-html-support", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/general-html-support General HTML Support (GHS)} @@ -38,8 +39,8 @@ 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. - - + }, + { "id": "html-comment", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/html-comments HTML comment} @@ -51,8 +52,8 @@ feature lets developers keep HTML comments in the document without displaying them to the user. - - + }, + { "id": "html-embed", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/html-embed HTML embed} @@ -63,8 +64,8 @@ The feature is meant for more advanced users who want to directly interact with HTML fragments. - - + }, + { "id": "show-blocks", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/show-blocks Show blocks} @@ -76,8 +77,8 @@ outline and displays their element name in the top-left corner of the box. - - + }, + { "id": "source-editing", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/source-editing Source editing} @@ -87,8 +88,8 @@ The source editing feature lets you view and edit the source of your document. - - + }, + { "id": "block-formatting", "type": "feature", {@link features/block-quote Block formatting} @@ -100,8 +101,8 @@ for visual hierarchy, insert horizontal lines to delineate sections, and use block quotes to highlight excerpts or important passages. - - + }, + { "id": "block-quotes", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/block-quote Block quote} @@ -112,8 +113,8 @@ quotes in your content. It is also an attractive way to draw the readers' attention to selected parts of the text. - - + }, + { "id": "headings-paragraph", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/headings Headings/paragraph} @@ -124,8 +125,8 @@ to parts of the text. They make your content easier to scan by both readers and search engines. - - + }, + { "id": "horizontal-line", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/horizontal-line Horizontal line} @@ -136,8 +137,8 @@ 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. - - + }, + { "id": "block-indentation", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/indent Block indentation} @@ -148,8 +149,8 @@ such as paragraphs, headings, or lists. This way you can visually distinguish parts of your content. - - + }, + { "id": "bookmark", "type": "feature", {@link features/bookmarks Bookmarks} @@ -158,16 +159,16 @@ attached to the content of the editor. These provide fast access to important content sections, and speed up the navigation boosting efficiency. - - + }, + { "id": "clipboard", "type": "feature", {@link framework/deep-dive/clipboard Clipboard} Copy, cut, and paste content within the editor or from external sources. - - + }, + { "id": "code-blocks", "type": "feature", {@link features/code-blocks Code blocks} @@ -175,8 +176,8 @@ Supports the insertion and management of pre-formatted code snippets with distinct styling. - - + }, + { "id": "drag-and-drop", "type": "feature", {@link features/drag-drop Drag and drop} @@ -184,8 +185,8 @@ Rearrange elements within a document, including moving text blocks, images, or other content types. - - + }, + { "id": "font-formatting", "type": "feature", {@link features/font Font formatting} @@ -193,8 +194,8 @@ The font feature lets you change font family, size, and color (including background color). All of these options are configurable. - - + }, + { "id": "font-background-color", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/font#configuring-the-font-color-and-font-background-color-features Font background color} @@ -203,16 +204,16 @@ Effortlessly make the words stand out even more with a colored background. - - + }, + { "id": "font-color", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/font#configuring-the-font-color-and-font-background-color-features Font color} Effortlessly make the letters stand out with their own color. - - + }, + { "id": "font-family", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/font#configuring-the-font-family-feature Font family} @@ -222,16 +223,16 @@ Choose from a predefined set of fonts, depending on the type of content and its destination - print, screen, etc. - - + }, + { "id": "font-size", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/font#configuring-the-font-size-feature Font size} Easily control the size of the letters. - - + }, + { "id": "image", "type": "feature", {@link features/images-overview Image} @@ -242,8 +243,8 @@ via URL, use responsive images, resize images, add captions, set different image styles, and link images. - - + }, + { "id": "image-all-text", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/images-text-alternative Image alt text} @@ -254,8 +255,8 @@ improves accessibility by telling screen readers and search engines what the image depicts. - - + }, + { "id": "image-captions", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/images-captions Image captions} @@ -264,8 +265,8 @@ Add optional captions for images, which are shown below the picture. - - + }, + { "id": "image-insert-via-url", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/images-inserting Image insert via URL} @@ -276,8 +277,8 @@ 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. - - + }, + { "id": "image-linking", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/images-linking Image linking} @@ -288,8 +289,8 @@ {@link module:link/linkimage~LinkImage} plugin lets you use images as links. - - + }, + { "id": "image-resize", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/images-resizing Image resize} @@ -301,8 +302,8 @@ {@link module:image/imageresize~ImageResize} plugin. - - + }, + { "id": "image-styles", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/images-styles Image styles} @@ -313,8 +314,8 @@ works by applying CSS classes to images or changing their type from inline to block or vice versa. - - + }, + { "id": "image-upload", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/image-upload Image upload} @@ -327,8 +328,8 @@ properly configured rich-text editor, there are several ways for the end user to insert images. - - + }, + { "id": "responsive-images", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/images-responsive Responsive images} @@ -344,8 +345,8 @@ dimensions most suitable for the presented page resolution, which makes the image load much faster and saves bandwidth. - - + }, + { "id": "links", "type": "feature", {@link features/link Links} @@ -354,8 +355,8 @@ typed or pasted URLs into clickable links, and allowing manual insertion and editing of links. - - + }, + { "id": "lists", "type": "feature", {@link features/lists Lists} @@ -366,8 +367,8 @@ creating reversed lists, adjusting list indentation, and crafting nested lists. - - + }, + { "id": "list-indentation", "type": "subfeature", {@link features/lists-editing#indenting-lists List indentation} @@ -377,8 +378,8 @@ the indent and outdent buttons allow for indenting list items (nesting them). - - + }, + { "id": "list-start-index", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/lists#list-start-index List start index} @@ -390,8 +391,8 @@ the list styles section). Sometimes, you may want to start a list with some other digit or letter, though. - - + }, + { "id": "list-styles", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/lists#list-styles List styles} @@ -406,8 +407,8 @@ via the dropdown. It opens when you click the arrow next to the appropriate list button in the toolbar. - - + }, + { "id": "multi-level-lists", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/multi-level-lists Multi-level lists @@ -423,8 +424,8 @@ organization in complex documents. The feature offers full compatibility with Microsoft Word. - - + }, + { "id": "nested-lists", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/lists-editing#indenting-lists Nested lists} @@ -435,8 +436,8 @@ the indent and outdent buttons allow for indenting list items (nesting them). - - + }, + { "id": "ordered-lists", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/lists Ordered lists} @@ -449,8 +450,8 @@ continuity of numbering and indentation. You can also easily control the list markers type. - - + }, + { "id": "reversed-list", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/lists#reversed-list Reversed list} @@ -462,8 +463,8 @@ countdowns and things-to-do lists that need to reproduce steps in a reversed order (for example, in disassembly instructions). - - + }, + { "id": "to-do-lists", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/todo-lists To-do lists} @@ -475,8 +476,8 @@ so you can nest a to-do list together with any combination of other lists. - - + }, + { "id": "unordered-lists", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/lists Unordered lists} @@ -489,8 +490,8 @@ continuity of numbering and indentation. You can also easily control the list markers' shape. - - + }, + { "id": "mermaid", "type": "feature", {@link features/mermaid Mermaid Exp} @@ -501,8 +502,8 @@ Markdown-inspired syntax to create and dynamically modify flowcharts, Gantt diagrams, pie or quadrant charts, graphs, mindmaps, and more. - - + }, + { "id": "remove-formatting", "type": "feature", {@link features/remove-format Remove formatting} @@ -513,8 +514,8 @@ not remove block-level formatting (headings, images) or semantic data (links). - - + }, + { "id": "select-all", "type": "feature", {@link features/select-all Select all} @@ -522,8 +523,8 @@ Enables the selection of all content within the editor with a single command or shortcut. - - + }, + { "id": "tables", "type": "feature", {@link features/tables Tables} @@ -533,8 +534,8 @@ insert and delete columns and rows, as well as create nested tables for complex data presentation. - - + }, + { "id": "columns-resizing", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/tables-resize Columns resizing} @@ -546,8 +547,8 @@ plugin lets you resize tables and individual table columns. It gives you complete control over column width. - - + }, + { "id": "insert-delete-columns-and-rows", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/tables#table-contextual-toolbar Insert/delete columns & rows} @@ -557,8 +558,8 @@ The basic table features allow users to insert tables into content, add or remove columns and rows and merge or split cells. - - + }, + { "id": "merge-and-split-cells", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/tables#table-contextual-toolbar Merge & split cells} @@ -568,8 +569,8 @@ The basic table features allow users to insert tables into content, add or remove columns and rows, and merge or split cells. - - + }, + { "id": "nesting", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/tables#nesting-tables Nesting} @@ -580,8 +581,8 @@ used for creating advanced charts or layouts based on tables. The nested table can be formatted just like a regular one. - - + }, + { "id": "styling-tables-and-cells", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/tables-styling Styling tables & cells} @@ -592,8 +593,8 @@ look of tables and table cells. You can control border color and style, background color, padding, or text alignment. - - + }, + { "id": "table-headers", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/tables#default-table-headers Table headers} @@ -604,8 +605,8 @@ columns as table headers by default, set an optional table configuration property defaultHeadings. - - + }, + { "id": "table-selection", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/tables#table-selection Table selection} @@ -621,8 +622,8 @@ cells at once. The table selection plugin is loaded automatically by the Table plugin. - - + }, + { "id": "tables-caption", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/tables-caption Tables caption} @@ -634,8 +635,8 @@ plugin lets you add captions to your tables. Table captions also improve accessibility as they are recognized by screen readers. - - + }, + { "id": "text-alignment", "type": "feature", {@link features/text-alignment Text alignment} @@ -643,8 +644,8 @@ Allows the adjustment of text alignment to the left, right, center, or justify and permits the alteration of indentation. - - + }, + { "id": "text-formatting", "type": "feature", {@link features/basic-styles Text formatting} @@ -656,24 +657,24 @@ their text to improve readability, match branding guidelines, or highlight important content sections. - - + }, + { "id": "bold", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/basic-styles Bold} Making the letters look like the good time were never gone. - - + }, + { "id": "code", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/basic-styles Code} Snippet look like a terminal from the 1990s movie. - - + }, + { "id": "highlight", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/highlight Highlight} @@ -683,24 +684,24 @@ Highlight makes important content stand out, either with font color or background fill. - - + }, + { "id": "italic", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/basic-styles Italic} Making the letters look like seashore pines. - - + }, + { "id": "strikethrough", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/basic-styles Strikethrough} Never mind, will not need it anymore. - - + }, + { "id": "styles", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/style Styles} @@ -710,37 +711,37 @@ The styles feature lets you easily apply predefined styles available for block and inline content. - - + }, + { "id": "subscript", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/basic-styles Subscript} Fine print at the bottom, like atom numbers. - - + }, + { "id": "superscript", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/basic-styles Superscript} Fine print on top, like references in a book. - - + }, + { "id": "underline", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/basic-styles Underline} Stuff looks important, yo. Or like a link, too. - - + }, + { "id": "undo-redo", "type": "feature", {@link features/undo-redo Undo/redo} Backtrack or repeat actions for editing purposes. - + }, @@ -752,7 +753,7 @@ - + { "id": "asynchronous-collaboration", "type": "feature", {@link features/collaboration Asynchronous collaboration @@ -765,8 +766,8 @@ content within the application. It integrates Track Changes, Comments, and Revision History features to facilitate collaboration. - - + }, + { "id": "local-data-storage", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/collaboration Local data storage @@ -779,8 +780,8 @@ In asynchronous collaboration, data is maintained on the client's servers. - - + }, + { "id": "comments", "type": "feature", {@link features/comments Comments @@ -792,8 +793,8 @@ text and block elements such as images. It also allows the users to discuss in threads and remove comments when they finish the discussion. - - + }, + { "id": "comments-archive", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/comments Comments archive @@ -810,8 +811,8 @@ restore archived comments if necessary. It helps to simplify the feedback management process. - - + }, + { "id": "comments-outside-editor", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/comments-outside-editor Comments outside editor @@ -825,8 +826,8 @@ {@link module:core/context~Context}, lets you create deeper integrations with your application. One such integration is enabling comments on non-editor form fields. - - + }, + { "id": "sidebar-modes", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/annotations-display-mode Sidebar modes @@ -842,8 +843,8 @@ various annotation sources (comments, suggestions) are connected to different UIs or even create your UI for annotations. - - + }, + { "id": "mentions", "type": "feature", {@link features/mentions Mentions} @@ -852,8 +853,8 @@ input. Typing a predetermined marker, like @ or #, prompts a panel to appear, offering autocomplete suggestions. - - + }, + { "id": "real-time-collaboration", "type": "feature", {@link features/real-time-collaboration Real-time collaboration @@ -866,8 +867,8 @@ automatically solves all conflicts if users make changes at the same time. - - + }, + { "id": "co-authoring", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/users-in-real-time-collaboration Co-authoring @@ -877,8 +878,8 @@ Multiple user real-time editing and content creation feature. - - + }, + { "id": "on-premises", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link @cs onpremises/index On-premises @@ -891,8 +892,8 @@ On-premises real-time collaboration version to deploy to client's own infrastructure, includes a private cloud. - - + }, + { "id": "saas", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link @cs guides/collaboration/quick-start SaaS @@ -902,8 +903,8 @@ Real-time collaboration provided as a service by CKSource. - - + }, + { "id": "revision-history", "type": "feature", {@link features/revision-history Revision history @@ -918,8 +919,8 @@ revisions. You can rename, compare, and restore older revisions on the go. - - + }, + { "id": "track-changes", "type": "feature", {@link features/track-changes Track changes @@ -932,8 +933,8 @@ switch to the track changes mode. All their changes will then create suggestions that they can accept or discard. - - + }, + { "id": "users-list-and-permissions", "type": "feature", {@link features/users Users list and permissions @@ -954,7 +955,7 @@ - + { "id": "content-generation", "type": "feature", {@link features/export-pdf Content generation @@ -962,8 +963,8 @@ } CKEditor 5 may be your universal starting point for generating content in several recognizable formats. - - + }, + { "id": "export-to-pdf", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/export-pdf Export to PDF @@ -977,8 +978,8 @@ footers, include page breaks, embed images, and choose from various fonts. - - + }, + { "id": "export-to-word", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/export-word Export to Word @@ -993,8 +994,8 @@ document includes suggestions, comments, page breaks, and embedded images. - - + }, + { "id": "import-from-word", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/import-word Import from Word @@ -1008,8 +1009,8 @@ while retaining the original styling, as well as comments and change tracking annotations. - - + }, + { "id": "markdown-output", "type": "feature", {@link features/markdown Markdown output} @@ -1019,8 +1020,8 @@ efficient Markdown editor, allowing the creation of text documents using the simplified formatting syntax favored by developers. - - + }, + { "id": "media-embed", "type": "feature", {@link features/media-embed Media embed} @@ -1029,8 +1030,8 @@ Pasting a media URL directly into the editor content automatically embeds the media. - - + }, + { "id": "paste-markdown", "type": "feature", {@link features/paste-markdown Paste Markdown Exp @@ -1041,8 +1042,8 @@ straight into the editor. It will be then converted into rich text on the fly. - - + }, + { "id": "xml-output", "type": "feature", {@link module:engine/dataprocessor/xmldataprocessor~XmlDataProcessor XML output} @@ -1050,7 +1051,7 @@ Turn your content into parsable XML files for automation and cross-platform interoperability. - + }, @@ -1064,7 +1065,7 @@ - + { "id": "document-outline", "type": "feature", {@link features/document-outline Document outline @@ -1079,8 +1080,8 @@ allows for customization of the outline's location within the user interface, catering to different user preferences for workspace layout. - - + }, + { "id": "page-utilities", "type": "feature", {@link features/minimap Page utilities} @@ -1088,8 +1089,8 @@ CKEditor 5 Page Utilities enables users to dictate the structuring and print formatting of their documents effectively. - - + }, + { "id": "content-minimap", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/minimap Content minimap} @@ -1099,8 +1100,8 @@ Offers a concise, birds-eye view of the document's content, allowing for quick navigation and content management. - - + }, + { "id": "document-title", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/title Document title} @@ -1110,8 +1111,8 @@ Allows users to set and modify the document's title within the editing interface, ensuring accurate reflection of the contents. - - + }, + { "id": "page-break", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/page-break Page break} @@ -1122,8 +1123,8 @@ the definition of page endings and beginnings for optimal layout and print clarity. - - + }, + { "id": "pagination", "type": "feature", {@link features/pagination Pagination @@ -1139,8 +1140,8 @@ text and elements will appear page-by-page, Pagination aids in the creation of professional and polished documents. - - + }, + { "id": "table-of-contents", "type": "feature", {@link features/table-of-contents Table of contents @@ -1155,12 +1156,12 @@ within the document are reflected immediately in the table of contents, accurately representing the document structure. - + }, - + { "id": "ai-assistant", "type": "feature", {@link features/ai-assistant-overview AI Assistant @@ -1175,15 +1176,15 @@ integration with multiple AI API providers: OpenAI, Azure OpenAI, and Amazon Bedrock. You can also integrate it with custom models. - - + }, + { "id": "automation", "type": "feature", {@link features/autoformat Automation} Automate your workflow with CKEditor 5 automation tools, regardless of whether you write, link, or save! - - + }, + { "id": "autoformatting", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/autoformat Autoformatting} @@ -1194,8 +1195,8 @@ quick formatting without needing to navigate through toolbar buttons or dropdown menus. This feature caters to the most common formatting needs. - - + }, + { "id": "autolink", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/link#autolink-feature Autolink} @@ -1207,8 +1208,8 @@ functionality is enabled by default, ensuring that links are always ready to use. - - + }, + { "id": "automatic-text-transformation", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/text-transformation Automatic text transformations} @@ -1222,8 +1223,8 @@ commonly used to automate the expansion of abbreviations or short phrases into their full forms. - - + }, + { "id": "autosave", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/autosave Autosave} @@ -1235,8 +1236,8 @@ modified. This could involve sending the latest version of the document to the server, providing peace of mind through continuous backup. - - + }, + { "id": "case-change", "type": "feature", {@link features/case-change Case change @@ -1253,8 +1254,8 @@ enhances the editing workflow by removing the need for manual case adjustments. - - + }, + { "id": "find-and-replace", "type": "feature", {@link features/find-and-replace Find and replace} @@ -1264,8 +1265,8 @@ them with different text. This function helps speed up editing and maintain content consistency. - - + }, + { "id": "format-painter", "type": "feature", {@link features/format-painter Format painter @@ -1281,8 +1282,8 @@ uniform style is achieved quickly without the need to repeatedly select the formatting options for each new section. - - + }, + { "id": "keyboard-shortcuts", "type": "feature", {@link features/accessibility#keyboard-shortcuts Keyboard shortcuts} @@ -1290,8 +1291,8 @@ CKEditor 5 supports various keyboard shortcuts that boost productivity and provide necessary accessibility to screen reader users. - - + }, + { "id": "mathtype", "type": "feature", {@link features/math-equations MathType @@ -1307,8 +1308,8 @@ various fonts and colors, enhancing readability and presentation in your content. - - + }, + { "id": "merge-fields", "type": "feature", {@link features/merge-fields Merge fields @@ -1323,8 +1324,8 @@ enabling tasks like mass email distribution or generation of personalized documents. - - + }, + { "id": "paste-from-google-docs", "type": "feature", {@link features/paste-from-google-docs Paste from Google Docs} @@ -1333,8 +1334,8 @@ Microsoft Excel and preserve its original structure and formatting. This is the basic, open-source Paste from Office feature. - - + }, + { "id": "paste-from-office", "type": "feature", {@link features/paste-from-office Paste from Office} @@ -1343,8 +1344,8 @@ Microsoft Excel and preserve its original structure and formatting. This is the basic, open-source Paste from Office feature. - - + }, + { "id": "paste-from-office-enhanced", "type": "feature", {@link features/paste-from-office-enhanced Paste from Office Enhanced @@ -1358,8 +1359,8 @@ layouts. The feature facilitates the transfer of documents from Word to CKEditor 5 without compromising on formatting. - - + }, + { "id": "paste-plain-text", "type": "feature", {@link features/paste-plain-text Paste plain text} @@ -1369,8 +1370,8 @@ 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. - - + }, + { "id": "slash-commands", "type": "feature", {@link features/slash-commands Slash commands @@ -1386,8 +1387,8 @@ to customize personal commands is available, allowing for a tailored editing experience. - - + }, + { "id": "special-characters", "type": "feature", {@link features/special-characters Special characters} @@ -1401,8 +1402,8 @@ useful for enhancing the detail and accuracy of content that requires specialized symbols. - - + }, + { "id": "templates", "type": "feature", {@link features/template Templates @@ -1433,7 +1434,7 @@ - + { "id": "editor-placeholder", "type": "feature", {@link features/editor-placeholder Editor placeholder} @@ -1443,8 +1444,8 @@ native DOM placeholder attribute used by inputs. Not to be confused with content placeholder. - - + }, + { "id": "editor-ui-types", "type": "feature", {@link getting-started/setup/editor-types Editor UI types} @@ -1454,8 +1455,8 @@ configurable toolbar or keyboard shortcuts. Some of these features are only available with certain editor types. - - + }, + { "id": "balloon-block-editor", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link getting-started/setup/editor-types#balloon-editor-and-balloon-block-editor Balloon block editor} @@ -1467,8 +1468,8 @@ content area and following the selection in the document. The toolbar gives access to additional block–level editing features. - - + }, + { "id": "balloon-editor", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link getting-started/setup/editor-types#balloon-editor-and-balloon-block-editor Balloon block editor} @@ -1479,8 +1480,8 @@ is that the toolbar appears in a balloon next to the selection (when the selection is not empty). - - + }, + { "id": "classic-editor", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link getting-started/setup/editor-types#classic-editor Classic editor} @@ -1492,8 +1493,8 @@ specific position on the page, usually as a part of a form that you use to submit some content to the server. - - + }, + { "id": "decoupled-editor", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link getting-started/setup/editor-types#decoupled-editor-document Decoupled editor} @@ -1505,8 +1506,8 @@ best for creating documents, which are usually later printed or exported to PDF files. - - + }, + { "id": "inline-editor", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link getting-started/setup/editor-types#inline-editor Inline editor} @@ -1520,8 +1521,8 @@ location on a web page instead of doing it in a separate administration section. - - + }, + { "id": "multi-root-editor", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link getting-started/setup/editor-types#multi-root-editor Multi-root editor} @@ -1535,8 +1536,8 @@ editor instance share the same configuration, toolbar, undo stack, and produce one document. - - + }, + { "id": "professionally-translated-language-packs", "type": "feature", {@link getting-started/setup/ui-language Professionally translated language packs} @@ -1548,8 +1549,8 @@ including elements like toolbars, dropdowns, and buttons, to ensure an optimal editing experience.1 - - + }, + { "id": "toolbar-and-menus", "type": "feature", {@link getting-started/setup/toolbar Toolbar and menus} @@ -1563,8 +1564,8 @@ Toolbar option allows for the expansion of the standard toolbar over multiple lines to display more tools simultaneously. - - + }, + { "id": "balloon-toolbar", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link getting-started/setup/toolbar#balloon-toolbar Balloon toolbar} @@ -1573,8 +1574,8 @@ 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. - - + }, + { "id": "block-toolbar", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link getting-started/setup/toolbar#block-toolbar Block toolbar} @@ -1585,8 +1586,8 @@ left-hand side of the content area, useful when the main toolbar is not accessible (for example in certain layouts, like balloon block editor). - - + }, + { "id": "classic-toolbar", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link getting-started/setup/toolbar#main-editor-toolbar Classic toolbar} @@ -1598,16 +1599,16 @@ dropdowns that you can use to format, manage, insert, and change elements of your content. - - + }, + { "id": "collapsible-toolbar", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link getting-started/setup/toolbar#extended-toolbar-configuration-format Collapsible toolbar} Collapsible toolbar for UI space efficiency. - - + }, + { "id": "image-contextual-toolbar", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/images-overview#image-contextual-toolbar Image contextual toolbar} @@ -1628,8 +1629,8 @@ by the {@link features/ckbox CKBox asset manager}. Shown below is an example contextual toolbar with an extended set of buttons. - - + }, + { "id": "menu-bar", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link getting-started/setup/menubar Menu bar} @@ -1644,24 +1645,24 @@ 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. - - + }, + { "id": "multiline-toolbar", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link getting-started/setup/toolbar#multiline-wrapping-toolbar Multiline toolbar} Multiline toolbar for easy access to all functions. - - + }, + { "id": "nesting-toolbars-in-dropdowns", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@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. - - + }, + { "id": "sidebar-annotations-bar", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/annotations-display-mode#wide-sidebar Wide sidebar} @@ -1674,8 +1675,8 @@ various annotation sources (comments, suggestions) are connected to different UIs, or even create your own UI for annotations. - - + }, + { "id": "table-contextual-toolbar", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link features/tables#table-contextual-toolbar Table contextual toolbar} @@ -1689,9 +1690,9 @@ 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. - + }, - + { "id": "watchdog", "type": "feature", {@link features/watchdog Watchdog} @@ -1700,7 +1701,7 @@ crashes. It saves your content just before the crash and creates a new instance of the editor with your content intact. - + }, @@ -1709,7 +1710,7 @@ - + { "id": "accessibility-support", "type": "feature", {@link features/accessibility Accessibility support} @@ -1724,8 +1725,8 @@ detailed in the Accessibility Conformance Report, ensuring broad accessibility compliance. - - + }, + { "id": "read-only-support", "type": "feature", {@link features/read-only Read-only support} @@ -1739,8 +1740,8 @@ need to be accessible for copying or by screen readers. This mode can be toggled on and off by system triggers. - - + }, + { "id": "restricted-editing", "type": "feature", {@link features/restricted-editing Restricted editing} @@ -1755,8 +1756,8 @@ fills in editable details such as names, dates, or product names without altering the rest of the document. - - + }, + { "id": "text-part-language", "type": "feature", {@link features/language Text Part Language} @@ -1771,8 +1772,8 @@ specification, facilitating the creation of more accessible and comprehensible multilingual content. - - + }, + { "id": "word-and-character-counter", "type": "feature", {@link features/word-count Word and character counter} @@ -1782,8 +1783,8 @@ This functionality assists in managing content length and ensuring it meets specific requirements or limits. - - + }, + { "id": "wproofreader", "type": "feature", {@link features/spelling-and-grammar-checking WProofreader @@ -1800,7 +1801,7 @@ accessibility standards. It also detects sentence-level errors and offers context-based correction suggestions. - + }, @@ -1808,7 +1809,7 @@ - + { "id": "editor-sdk", "type": "feature", {@link framework/index Editor SDK} @@ -1822,8 +1823,8 @@ Inspector - a comprehensive suite of debugging tools - are provided, helping accelerate development work. - - + }, + { "id": "ckeditor5-inspector", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link framework/development-tools/inspector CKEditor 5 inspector} @@ -1833,8 +1834,8 @@ {@link framework/architecture/editing-engine#model model}, {@link framework/architecture/editing-engine#view view}, and {@link framework/architecture/core-editor-architecture#commands commands}. - - + }, + { "id": "cloud-services-rest-api", "type": "subfeature", {@img assets/img/enter-arrow.svg} {@link @cs developer-resources/apis/overview Cloud Services REST API} @@ -1843,8 +1844,8 @@ 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. - - + }, + { "id": "themes", "type": "feature", {@link framework/theme-customization Themes} @@ -1852,8 +1853,8 @@ The default theme of CKEditor 5 can be customized to match most visual integration requirements. - - + }, + { "id": "ui-library", "type": "feature", {@link framework/architecture/ui-library UI Library} @@ -1865,7 +1866,7 @@ modular UI that seamlessly integrates with other components of the ecosystem. - + }, @@ -1874,7 +1875,7 @@ - + { "id": "base64-upload-adapter", "type": "feature", {@link features/base64-upload-adapter Base64 Upload Adapter} @@ -1883,8 +1884,8 @@ output. Images are stored with other content in the database without server-side processing. - - + }, + { "id": "ckbox", "type": "feature", {@link features/ckbox CKBox @@ -1899,8 +1900,8 @@ and optimal display of your images across devices through an efficient CDN. Deployable on-premises or as cloud SaaS. - - + }, + { "id": "ckfinder", "type": "feature", {@link features/ckfinder CKFinder @@ -1912,8 +1913,8 @@ content. CKFinder is a powerful file manager with various image editing and image upload options. - - + }, + { "id": "custom-upload-adapter", "type": "feature", {@link features/image-upload#implementing-your-own-upload-adapter Custom Upload Adapter} @@ -1921,8 +1922,8 @@ Have your own file management solution? Use this adapter to integrate your preferred software with CKEditor. - - + }, + { "id": "simple-upload-adapter", "type": "feature", {@link features/simple-upload-adapter Simple Upload Adapter} @@ -1930,8 +1931,8 @@ Upload images to your server using the XMLHttpRequest API with a minimal editor configuration. - - + }, + { "id": "uploadcare", "type": "feature", UploadcarePremium @@ -1946,4 +1947,5 @@ conversion, progressive JPEG, and options for preview, resize, stretch, crop, content-aware crop, and setting fill color. - + }, +] \ No newline at end of file From 5be9126a02d69749c43c08828d8861ee2a8278eb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotrek=20Koszuli=C5=84ski?= Date: Thu, 28 Nov 2024 16:12:02 +0100 Subject: [PATCH 03/20] Keys. --- docs/_snippets/features-digest-source.json | 1585 ++++++-------------- 1 file changed, 435 insertions(+), 1150 deletions(-) diff --git a/docs/_snippets/features-digest-source.json b/docs/_snippets/features-digest-source.json index f224d094a75..7f646bbd3af 100644 --- a/docs/_snippets/features-digest-source.json +++ b/docs/_snippets/features-digest-source.json @@ -1,23 +1,16 @@ [ { "id": "advanced-html-editing", "type": "feature", - - {@link features/general-html-support Advanced HTML Editing} - - - Advanced HTML Editing provides general HTML support, offering detailed + "link": "features/general-html-support", "name": "Advanced HTML Editing", + "description: "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. - + " }, { "id": "full-page-html", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/full-page-html Full page HTML} - - - + "link": "features/full-page-html", "name": "Full page HTML", + "description: " 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 @@ -25,317 +18,193 @@ feature focuses on elements inside the content (the document's <body>), this feature enables markup invisible to the end user. - - }, + " }, { "id": "general-html-support", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/general-html-support General HTML Support (GHS)} - - - - With the General HTML Support (GHS) feature, developers can enable HTML + "link": "features/general-html-support", "name": "General HTML Support (GHS)", + "description: "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. - + " }, { "id": "html-comment", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/html-comments HTML comment} - - - + "link": "features/html-comments", "name": "HTML comment", + "description: " 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. - - }, + " }, { "id": "html-embed", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/html-embed HTML embed} - - - - The HTML embed feature lets you embed any HTML snippet in your content. + "link": "features/html-embed", "name": "HTML embed", + "description: "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. - + " }, { "id": "show-blocks", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/show-blocks Show blocks} - - - - The show blocks feature allows the content creators to visualize all + "link": "features/show-blocks", "name": "Show blocks", + "description: "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. - + " }, { "id": "source-editing", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/source-editing Source editing} - - - - The source editing feature lets you view and edit the source of your + "link": "features/source-editing", "name": "Source editing", + "description: "The source editing feature lets you view and edit the source of your document. - + " }, { "id": "block-formatting", "type": "feature", - - {@link features/block-quote Block formatting} - - - Block Formatting allows for the organization and emphasis of content + "link": "features/block-quote", "name": "Block formatting", + "description: "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. - + " }, { "id": "block-quotes", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/block-quote Block quote} - - - - The block quote feature lets you easily include block quotations or pull + "link": "features/block-quote", "name": "Block quote", + "description: "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. - + " }, { "id": "headings-paragraph", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/headings Headings/paragraph} - - - - The heading feature helps you structure your document by adding headings + "link": "features/headings", "name": "Headings/paragraph", + "description: "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. - + " }, { "id": "horizontal-line", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/horizontal-line Horizontal line} - - - - The horizontal line feature lets you visually divide your content into + "link": "features/horizontal-line", "name": "Horizontal line", + "description: "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. - + " }, { "id": "block-indentation", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/indent Block indentation} - - - - The block indentation feature lets you set indentation for text blocks + "link": "features/indent", "name": "Block indentation", + "description: "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. - + " }, { "id": "bookmark", "type": "feature", - - {@link features/bookmarks Bookmarks} - - - The bookmarks feature allows for adding and managing the bookmarks anchors + "link": "features/bookmarks", "name": "Bookmarks", + "description: "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. - + " }, { "id": "clipboard", "type": "feature", - - {@link framework/deep-dive/clipboard Clipboard} - - - Copy, cut, and paste content within the editor or from external sources. - + "link": "framework/deep-dive/clipboard", "name": "Clipboard", + "description: "Copy, cut, and paste content within the editor or from external sources. + " }, { "id": "code-blocks", "type": "feature", - - {@link features/code-blocks Code blocks} - - - Supports the insertion and management of pre-formatted code snippets with + "link": "features/code-blocks", "name": "Code blocks", + "description: "Supports the insertion and management of pre-formatted code snippets with distinct styling. - + " }, { "id": "drag-and-drop", "type": "feature", - - {@link features/drag-drop Drag and drop} - - - Rearrange elements within a document, including moving text blocks, + "link": "features/drag-drop", "name": "Drag and drop", + "description: "Rearrange elements within a document, including moving text blocks, images, or other content types. - + " }, { "id": "font-formatting", "type": "feature", - - {@link features/font Font formatting} - - - The font feature lets you change font family, size, and color (including + "link": "features/font", "name": "Font formatting", + "description: "The font feature lets you change font family, size, and color (including background color). All of these options are configurable. - + " }, { "id": "font-background-color", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@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", "name": "Font background color", + "description: "Effortlessly make the words stand out even more with a colored background. + " }, { "id": "font-color", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@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-color-and-font-background-color-features", "name": "Font color", + "description: "Effortlessly make the letters stand out with their own color." }, { "id": "font-family", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/font#configuring-the-font-family-feature Font family} - - - - Choose from a predefined set of fonts, depending on the type of content + "link": "features/font#configuring-the-font-family-feature", "name": "Font family", + "description: "Choose from a predefined set of fonts, depending on the type of content and its destination - print, screen, etc. - + " }, { "id": "font-size", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/font#configuring-the-font-size-feature Font size} - - - Easily control the size of the letters. + "link": "features/font#configuring-the-font-size-feature", "name": "Font size", + "description: "Easily control the size of the letters." }, { "id": "image", "type": "feature", - - {@link features/images-overview Image} - - - The image feature allows adding images of various kinds to the rich + "link": "features/images-overview", "name": "Image", + "description: "The image feature allows adding images of various kinds to the rich content inside the editor. A large set of subfeature background-grays 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. - + " }, { "id": "image-all-text", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/images-text-alternative Image alt text} - - - - Add description text, AKA alternative text, for images. Alt text + "link": "features/images-text-alternative", "name": "Image alt text", + "description: "Add description text, AKA alternative text, for images. Alt text improves accessibility by telling screen readers and search engines what the image depicts. - + " }, { "id": "image-captions", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/images-captions Image captions} - - - - Add optional captions for images, which are shown below the picture. - + "link": "features/images-captions", "name": "Image captions", + "description: "Add optional captions for images, which are shown below the picture. + " }, { "id": "image-insert-via-url", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/images-inserting Image insert via URL} - - - - You can insert images by uploading them directly from your disk, but you + "link": "features/images-inserting", "name": "Image insert via URL", + "description: "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. - + " }, { "id": "image-linking", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/images-linking Image linking} - - - + "link": "features/images-linking", "name": "Image linking", + "description: " The {@link module:link/linkimage~LinkImage} plugin lets you use images as links. - - }, + " }, { "id": "image-resize", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/images-resizing Image resize} - - - + "link": "features/images-resizing", "name": "Image resize", + "description: " 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. - - }, + " }, { "id": "image-styles", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/images-styles Image styles} - - - - The image styles feature lets you adjust the appearance of images. It + "link": "features/images-styles", "name": "Image styles", + "description: "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. - + " }, { "id": "image-upload", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/image-upload Image upload} - - - - Inserting + "link": "features/image-upload", "name": "Image upload", + "description: "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. - + " }, { "id": "responsive-images", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/images-responsive Responsive images} - - - + "link": "features/images-responsive", "name": "Responsive images", + "description: " 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 @@ -344,275 +213,175 @@ 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. - - }, + " }, { "id": "links", "type": "feature", - - {@link features/link Links} - - - Facilitates the addition of hyperlinks to text, automatically converting + "link": "features/link", "name": "Links", + "description: "Facilitates the addition of hyperlinks to text, automatically converting typed or pasted URLs into clickable links, and allowing manual insertion and editing of links. - + " }, { "id": "lists", "type": "feature", - - {@link features/lists Lists} - - - Lists allow the creation and management of various list types, including + "link": "features/lists", "name": "Lists", + "description: "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. - + " }, { "id": "list-indentation", "type": "subfeature", - - {@link features/lists-editing#indenting-lists List indentation} - - - Besides controlling + "link": "features/lists-editing#indenting-lists", "name": "List indentation", + "description: "Besides controlling {@link features/indent text block indentation}, the indent and outdent buttons allow for indenting list items (nesting them). - + " }, { "id": "list-start-index", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/lists#list-start-index List start index} - - - - The list start index feature allows the user to choose the starting + "link": "features/lists#list-start-index", "name": "List start index", + "description: "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. - + " }, { "id": "list-styles", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/lists#list-styles List styles} - - - - The list style feature introduces some more styles for the list item + "link": "features/lists#list-styles", "name": "List styles", + "description: "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. - + " }, { "id": "multi-level-lists", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/multi-level-lists Multi-level lists - - Premium feature - } - - - - Multi-level lists with the legal style numbering feature allows for easy + "link": "features/multi-level-lists", "name": "Multi-level lists", "isPremium": true, + "description: "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. - + " }, { "id": "nested-lists", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/lists-editing#indenting-lists Nested lists} - - - - Besides controlling {@link features/indent text block indentation}, + "link": "features/lists-editing#indenting-lists", "name": "Nested lists", + "description: "Besides controlling {@link features/indent text block indentation}, the indent and outdent buttons allow for indenting list items (nesting them). - + " }, { "id": "ordered-lists", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/lists Ordered lists} - - - - The list feature lets you create ordered (numbered) lists. The unique + "link": "features/lists", "name": "Ordered lists", + "description: "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. - + " }, { "id": "reversed-list", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/lists#reversed-list Reversed list} - - - - The reversed list feature lets the user reverse the numbering order of a + "link": "features/lists#reversed-list", "name": "Reversed list", + "description: "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). - + " }, { "id": "to-do-lists", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/todo-lists To-do lists} - - - - The to-do list feature lets you create a list of interactive checkboxes + "link": "features/todo-lists", "name": "To-do lists", + "description: "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. - + " }, { "id": "unordered-lists", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/lists Unordered lists} - - - - The list feature lets you create unordered (bulleted) lists. The unique + "link": "features/lists", "name": "Unordered lists", + "description: "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. - + " }, { "id": "mermaid", "type": "feature", - - {@link features/mermaid Mermaid Exp} - - - You can create flowcharts and diagrams in CKEditor 5 thanks to the + "link": "features/mermaid", "name": "Mermaid", "isExperimental": true, + "description: "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. - + " }, { "id": "remove-formatting", "type": "feature", - - {@link features/remove-format Remove formatting} - - - The remove format feature lets you quickly remove any text formatting + "link": "features/remove-format", "name": "Remove formatting", + "description: "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). - + " }, { "id": "select-all", "type": "feature", - - {@link features/select-all Select all} - - - Enables the selection of all content within the editor with a single + "link": "features/select-all", "name": "Select all", + "description: "Enables the selection of all content within the editor with a single command or shortcut. - + " }, { "id": "tables", "type": "feature", - - {@link features/tables Tables} - - - CKEditor 5 provides robust support for tables, with the ability to merge + "link": "features/tables", "name": "Tables", + "description: "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. - + " }, { "id": "columns-resizing", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/tables-resize Columns resizing} - - - + "link": "features/tables-resize", "name": "Columns resizing", + "description: " The {@link module:table/tablecolumnresize~TableColumnResize} plugin lets you resize tables and individual table columns. It gives you complete control over column width. - - }, + " }, { "id": "insert-delete-columns-and-rows", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/tables#table-contextual-toolbar Insert/delete columns & rows} - - - - The basic table features allow users to insert tables into content, add + "link": "features/tables#table-contextual-toolbar", "name": "Insert/delete columns & rows", + "description: "The basic table features allow users to insert tables into content, add or remove columns and rows and merge or split cells. - + " }, { "id": "merge-and-split-cells", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/tables#table-contextual-toolbar Merge & split cells} - - - - The basic table features allow users to insert tables into content, add + "link": "features/tables#table-contextual-toolbar", "name": "Merge & split cells", + "description: "The basic table features allow users to insert tables into content, add or remove columns and rows, and merge or split cells. - + " }, { "id": "nesting", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/tables#nesting-tables Nesting} - - - - CKEditor 5 allows nesting tables inside other table's cells. This may be + "link": "features/tables#nesting-tables", "name": "Nesting", + "description: "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. - + " }, { "id": "styling-tables-and-cells", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/tables-styling Styling tables & cells} - - - - CKEditor 5 comes with some additional tools that help you change the + "link": "features/tables-styling", "name": "Styling tables & cells", + "description: "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. - + " }, { "id": "table-headers", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/tables#default-table-headers Table headers} - - - + "link": "features/tables#default-table-headers", "name": "Table headers", + "description: " To make every inserted table have n number of rows and columns as table headers by default, set an optional table configuration property defaultHeadings. - - }, + " }, { "id": "table-selection", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/tables#table-selection Table selection} - - - + "link": "features/tables#table-selection", "name": "Table selection", + "description: " The {@link module:table/tableselection~TableSelection} plugin introduces support for the custom selection system for tables @@ -621,126 +390,74 @@ 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. - - }, + " }, { "id": "tables-caption", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/tables-caption Tables caption} - - - + "link": "features/tables-caption", "name": "Tables caption", + "description: " 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. - - }, + " }, { "id": "text-alignment", "type": "feature", - - {@link features/text-alignment Text alignment} - - - Allows the adjustment of text alignment to the left, right, center, or + "link": "features/text-alignment", "name": "Text alignment", + "description: "Allows the adjustment of text alignment to the left, right, center, or justify and permits the alteration of indentation. - + " }, { "id": "text-formatting", "type": "feature", - - {@link features/basic-styles Text formatting} - - - CKEditor 5 provides developers with text editing and formatting features + "link": "features/basic-styles", "name": "Text formatting", + "description: "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. - + " }, { "id": "bold", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/basic-styles Bold} - - - Making the letters look like the good time were never gone. + "link": "features/basic-styles", "name": "Bold", + "description: "Making the letters look like the good time were never gone." }, { "id": "code", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/basic-styles Code} - - - Snippet look like a terminal from the 1990s movie. + "link": "features/basic-styles", "name": "Code", + "description: "Snippet look like a terminal from the 1990s movie." }, { "id": "highlight", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/highlight Highlight} - - - - Highlight makes important content stand out, either with font color or + "link": "features/highlight", "name": "Highlight", + "description: "Highlight makes important content stand out, either with font color or background fill. - + " }, { "id": "italic", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/basic-styles Italic} - - - Making the letters look like seashore pines. + "link": "features/basic-styles", "name": "Italic", + "description: "Making the letters look like seashore pines." }, { "id": "strikethrough", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/basic-styles Strikethrough} - - - Never mind, will not need it anymore. + "link": "features/basic-styles", "name": "Strikethrough", + "description: "Never mind, will not need it anymore." }, { "id": "styles", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/style Styles} - - - - The styles feature lets you easily apply predefined styles available for + "link": "features/style", "name": "Styles", + "description: "The styles feature lets you easily apply predefined styles available for block and inline content. - + " }, { "id": "subscript", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/basic-styles Subscript} - - - Fine print at the bottom, like atom numbers. + "link": "features/basic-styles", "name": "Subscript", + "description: "Fine print at the bottom, like atom numbers." }, { "id": "superscript", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/basic-styles Superscript} - - - Fine print on top, like references in a book. + "link": "features/basic-styles", "name": "Superscript", + "description: "Fine print on top, like references in a book." }, { "id": "underline", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/basic-styles Underline} - - - Stuff looks important, yo. Or like a link, too. + "link": "features/basic-styles", "name": "Underline", + "description: "Stuff looks important, yo. Or like a link, too." }, { "id": "undo-redo", "type": "feature", - - {@link features/undo-redo Undo/redo} - - Backtrack or repeat actions for editing purposes. + "link": "features/undo-redo", "name": "Undo/redo", + "description: "Backtrack or repeat actions for editing purposes." }, @@ -754,200 +471,107 @@ { "id": "asynchronous-collaboration", "type": "feature", - - {@link features/collaboration Asynchronous collaboration - - Premium feature - } - - - Asynchronous Collaboration in CKEditor 5 is designed for teams using a + "link": "features/collaboration", "name": "Asynchronous collaboration", "isPremium": true, + "description: "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. - + " }, { "id": "local-data-storage", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/collaboration Local data storage - - Premium feature - } - - - - In asynchronous collaboration, data is maintained on the client's + "link": "features/collaboration", "name": "Local data storage", "isPremium": true, + "description: "In asynchronous collaboration, data is maintained on the client's servers. - + " }, { "id": "comments", "type": "feature", - - {@link features/comments Comments - - Premium feature - } - - - Users can add side notes to marked fragments of the document, including + "link": "features/comments", "name": "Comments", "isPremium": true, + "description: "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. - + " }, { "id": "comments-archive", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/comments Comments archive - - Premium feature - } - - - - Comments threads can be either deleted or resolved. The latter provides + "link": "features/comments", "name": "Comments archive", "isPremium": true, + "description: "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. - + " }, { "id": "comments-outside-editor", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/comments-outside-editor Comments outside editor - - Premiumfeature - } - - - + "link": "features/comments-outside-editor", "name": "Comments outside editor", "isPremium": true, + "description: " 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. - - }, + " }, { "id": "sidebar-modes", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/annotations-display-mode Sidebar modes - - Premium feature - } - - - - There are three built-in UIs to display comment threads and suggestion + "link": "features/annotations-display-mode", "name": "Sidebar modes", "isPremium": true, + "description: "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. - + " }, { "id": "mentions", "type": "feature", - - {@link features/mentions Mentions} - - - The mention feature supports smart autocompletion triggered by user + "link": "features/mentions", "name": "Mentions", + "description: "The mention feature supports smart autocompletion triggered by user input. Typing a predetermined marker, like @ or #, prompts a panel to appear, offering autocomplete suggestions. - + " }, { "id": "real-time-collaboration", "type": "feature", - - {@link features/real-time-collaboration Real-time collaboration - - Premium feature - } - - - Real-Time Collaboration in CKEditor 5 is designed for users who are + "link": "features/real-time-collaboration", "name": "Real-time collaboration", "isPremium": true, + "description: "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. - + " }, { "id": "co-authoring", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/users-in-real-time-collaboration Co-authoring - - Premium feature - } - - - Multiple user real-time editing and content creation feature. + "link": "features/users-in-real-time-collaboration", "name": "Co-authoring", "isPremium": true, + "description: "Multiple user real-time editing and content creation feature." }, { "id": "on-premises", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link @cs onpremises/index On-premises - - Premium feature - } - - - - On-premises real-time collaboration version to deploy to client's own + "link": "@cs", "name": "onpremises/index On-premises", "isPremium": true, + "description: "On-premises real-time collaboration version to deploy to client's own infrastructure, includes a private cloud. - + " }, { "id": "saas", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link @cs guides/collaboration/quick-start SaaS - - Premium feature - } - - - Real-time collaboration provided as a service by CKSource. + "link": "@cs", "name": "guides/collaboration/quick-start SaaS", "isPremium": true, + "description: "Real-time collaboration provided as a service by CKSource." }, { "id": "revision-history", "type": "feature", - - {@link features/revision-history Revision history - - Premium feature - } - - - The revision history feature is a document versioning tool. It allows + "link": "features/revision-history", "name": "Revision history", "isPremium": true, + "description: "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. - + " }, { "id": "track-changes", "type": "feature", - - {@link features/track-changes Track changes - - Premium feature - } - - - The track changes feature brings automatic suggestion marking for the + "link": "features/track-changes", "name": "Track changes", "isPremium": true, + "description: "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. - + " }, { "id": "users-list-and-permissions", "type": "feature", - - {@link features/users Users list and permissions - - Premium feature - } - - + "link": "features/users", "name": "Users list and permissions", "isPremium": true, + "description: " 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. - - + " @@ -956,101 +580,58 @@ { "id": "content-generation", "type": "feature", - - {@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", "name": "Content generation", "isPremium": true, + "description: "CKEditor 5 may be your universal starting point for generating content in several recognizable formats." }, { "id": "export-to-pdf", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/export-pdf Export to PDF - - Premium feature - } - - - - Create a PDF from in-editor content seamlessly. Customize headers and + "link": "features/export-pdf", "name": "Export to PDF", "isPremium": true, + "description: "Create a PDF from in-editor content seamlessly. Customize headers and footers, include page breaks, embed images, and choose from various fonts. - + " }, { "id": "export-to-word", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/export-word Export to Word - - Premium feature - } - - - - Instantly convert content from the editor to a Word document with a + "link": "features/export-word", "name": "Export to Word", "isPremium": true, + "description: "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. - + " }, { "id": "import-from-word", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/import-word Import from Word - - Premium feature - } - - - - Effortlessly transform Word documents into clean HTML within CKEditor 5 + "link": "features/import-word", "name": "Import from Word", "isPremium": true, + "description: "Effortlessly transform Word documents into clean HTML within CKEditor 5 while retaining the original styling, as well as comments and change tracking annotations. - + " }, { "id": "markdown-output", "type": "feature", - - {@link features/markdown Markdown output} - - - Enable Markdown as the default output format instead of HTML with the + "link": "features/markdown", "name": "Markdown output", + "description: "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. - + " }, { "id": "media-embed", "type": "feature", - - {@link features/media-embed Media embed} - - - Use the insert media button in the toolbar to embed media. + "link": "features/media-embed", "name": "Media embed", + "description: "Use the insert media button in the toolbar to embed media. Pasting a media URL directly into the editor content automatically embeds the media. - + " }, { "id": "paste-markdown", "type": "feature", - - {@link features/paste-markdown Paste Markdown - Exp - } - - - The paste Markdown feature lets users paste Markdown-formatted content + "link": "features/paste-markdown", "name": "Paste Markdown", + "description: "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. - + " }, { "id": "xml-output", "type": "feature", - - {@link module:engine/dataprocessor/xmldataprocessor~XmlDataProcessor XML output} - - - Turn your content into parsable XML files for automation and + "link": "module:engine/dataprocessor/xmldataprocessor~XmlDataProcessor", "name": "XML output", + "description: "Turn your content into parsable XML files for automation and cross-platform interoperability. - + " }, @@ -1066,186 +647,115 @@ { "id": "document-outline", "type": "feature", - - {@link features/document-outline Document outline - - Premium feature - } - - - The Document Outline feature automatically detects and lists document + "link": "features/document-outline", "name": "Document outline", "isPremium": true, + "description: "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. - + " }, { "id": "page-utilities", "type": "feature", - - {@link features/minimap Page utilities} - - - CKEditor 5 Page Utilities enables users to dictate the structuring and + "link": "features/minimap", "name": "Page utilities", + "description: "CKEditor 5 Page Utilities enables users to dictate the structuring and print formatting of their documents effectively. - + " }, { "id": "content-minimap", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/minimap Content minimap} - - - - Offers a concise, birds-eye view of the document's content, + "link": "features/minimap", "name": "Content minimap", + "description: "Offers a concise, birds-eye view of the document's content, allowing for quick navigation and content management. - + " }, { "id": "document-title", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/title Document title} - - - - Allows users to set and modify the document's title within the + "link": "features/title", "name": "Document title", + "description: "Allows users to set and modify the document's title within the editing interface, ensuring accurate reflection of the contents. - + " }, { "id": "page-break", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/page-break Page break} - - - - Facilitates the insertion of manual breaks within the document, enabling + "link": "features/page-break", "name": "Page break", + "description: "Facilitates the insertion of manual breaks within the document, enabling the definition of page endings and beginnings for optimal layout and print clarity. - + " }, { "id": "pagination", "type": "feature", - - {@link features/pagination Pagination - - Premium feature - } - - - The Pagination feature visually indicates where pages begin and end within a document. This feature is + "link": "features/pagination", "name": "Pagination", "isPremium": true, + "description: "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. - + " }, { "id": "table-of-contents", "type": "feature", - - {@link features/table-of-contents Table of contents - - Premium feature - } - - - The Table of Contents feature is a dynamic tool for organizing + "link": "features/table-of-contents", "name": "Table of contents", "isPremium": true, + "description: "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. - + " }, { "id": "ai-assistant", "type": "feature", - - {@link features/ai-assistant-overview AI Assistant - - Premium feature - } - - - The AI Assistant feature enhances editing efficiency and creativity with + "link": "features/ai-assistant-overview", "name": "AI Assistant", "isPremium": true, + "description: "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. - + " }, { "id": "automation", "type": "feature", - - {@link features/autoformat Automation} - - Automate your workflow with CKEditor 5 automation tools, regardless of whether you write, link, or save! - - }, + "link": "features/autoformat", "name": "Automation", + "description: "Automate your workflow with CKEditor 5 automation tools, regardless of whether you write, link, or save! + " }, { "id": "autoformatting", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/autoformat Autoformatting} - - - + "link": "features/autoformat", "name": "Autoformatting", + "description: " 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. - - }, + " }, { "id": "autolink", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/link#autolink-feature Autolink} - - - + "link": "features/link#autolink-feature", "name": "Autolink", + "description: " 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. - - }, + " }, { "id": "automatic-text-transformation", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/text-transformation Automatic text transformations} - - - + "link": "features/text-transformation", "name": "Automatic text transformations", + "description: " 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. - - }, + " }, { "id": "autosave", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/autosave Autosave} - - - + "link": "features/autosave", "name": "Autosave", + "description: " 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. - - }, + " }, { "id": "case-change", "type": "feature", - - {@link features/case-change Case change - - Premium feature - } - - - The Case Change feature simplifies adjusting text cases within a + "link": "features/case-change", "name": "Case change", "isPremium": true, + "description: "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) @@ -1253,147 +763,99 @@ a specific fragment of text they wish to modify. This feature enhances the editing workflow by removing the need for manual case adjustments. - + " }, { "id": "find-and-replace", "type": "feature", - - {@link features/find-and-replace Find and replace} - - - The Find and Replace feature in CKEditor 5's Productivity tools + "link": "features/find-and-replace", "name": "Find and replace", + "description: "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. - + " }, { "id": "format-painter", "type": "feature", - - {@link features/format-painter Format painter - - Premium feature - } - - - The Format Painter feature lets users clone formatting from one section + "link": "features/format-painter", "name": "Format painter", "isPremium": true, + "description: "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. - + " }, { "id": "keyboard-shortcuts", "type": "feature", - - {@link features/accessibility#keyboard-shortcuts Keyboard shortcuts} - - - CKEditor 5 supports various keyboard shortcuts that boost productivity + "link": "features/accessibility#keyboard-shortcuts", "name": "Keyboard shortcuts", + "description: "CKEditor 5 supports various keyboard shortcuts that boost productivity and provide necessary accessibility to screen reader users. - + " }, { "id": "mathtype", "type": "feature", - - {@link features/math-equations MathType - - Premium feature - } - - - Math Equations allows you to add properly formatted mathematical + "link": "features/math-equations", "name": "MathType", "isPremium": true, + "description: "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. - + " }, { "id": "merge-fields", "type": "feature", - - {@link features/merge-fields Merge fields - - Premium feature - } - - - Merge Fields allows the inclusion of placeholders in your content, + "link": "features/merge-fields", "name": "Merge fields", "isPremium": true, + "description: "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. - + " }, { "id": "paste-from-google-docs", "type": "feature", - - {@link features/paste-from-google-docs Paste from Google Docs} - - - Paste from Office features let you paste content from Microsoft Word and + "link": "features/paste-from-google-docs", "name": "Paste from Google Docs", + "description: "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. - + " }, { "id": "paste-from-office", "type": "feature", - - {@link features/paste-from-office Paste from Office} - - - Paste from Office features let you paste content from Microsoft Word and + "link": "features/paste-from-office", "name": "Paste from Office", + "description: "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. - + " }, { "id": "paste-from-office-enhanced", "type": "feature", - - {@link features/paste-from-office-enhanced Paste from Office Enhanced - - Premium feature - } - - - The Enhanced Paste from Word/Excel feature accurately retains formatting + "link": "features/paste-from-office-enhanced", "name": "Paste from Office Enhanced", "isPremium": true, + "description: "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. - + " }, { "id": "paste-plain-text", "type": "feature", - - {@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 + "link": "features/paste-plain-text", "name": "Paste plain text", + "description: "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. - + " }, { "id": "slash-commands", "type": "feature", - - {@link features/slash-commands Slash commands - - Premium feature - } - - - The Slash Commands feature lets users insert block elements and apply + "link": "features/slash-commands", "name": "Slash commands", "isPremium": true, + "description: "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. - + " }, { "id": "special-characters", "type": "feature", - - {@link features/special-characters Special characters} - - - Insert a variety of unique symbols and characters into your document + "link": "features/special-characters", "name": "Special characters", + "description: "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 @@ -1401,22 +863,16 @@ feature supports the insertion of emojis. This tool is particularly useful for enhancing the detail and accuracy of content that requires specialized symbols. - + " }, { "id": "templates", "type": "feature", - - {@link features/template Templates - - Premium feature - } - - - The Templates feature enables the insertion of predefined content structures + "link": "features/template", "name": "Templates", "isPremium": true, + "description: "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. - + " @@ -1435,127 +891,85 @@ { "id": "editor-placeholder", "type": "feature", - - {@link features/editor-placeholder Editor placeholder} - - - You can prompt the user to input content by displaying a configurable + "link": "features/editor-placeholder", "name": "Editor placeholder", + "description: "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. - + " }, { "id": "editor-ui-types", "type": "feature", - - {@link getting-started/setup/editor-types Editor UI types} - - - The editor's user interface is dependent on the editor types. The editor + "link": "getting-started/setup/editor-types", "name": "Editor UI types", + "description: "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. - + " }, { "id": "balloon-block-editor", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@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 + "link": "getting-started/setup/editor-types#balloon-editor-and-balloon-block-editor", "name": "Balloon block editor", + "description: "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. - + " }, { "id": "balloon-editor", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@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 + "link": "getting-started/setup/editor-types#balloon-editor-and-balloon-block-editor", "name": "Balloon block editor", + "description: "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). - + " }, { "id": "classic-editor", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link getting-started/setup/editor-types#classic-editor Classic editor} - - - - Classic editor is what most users traditionally learned to associate + "link": "getting-started/setup/editor-types#classic-editor", "name": "Classic editor", + "description: "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. - + " }, { "id": "decoupled-editor", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link getting-started/setup/editor-types#decoupled-editor-document Decoupled editor} - - - - The document editor focuses on a rich-text editing experience similar to + "link": "getting-started/setup/editor-types#decoupled-editor-document", "name": "Decoupled editor", + "description: "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. - + " }, { "id": "inline-editor", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link getting-started/setup/editor-types#inline-editor Inline editor} - - - - The inline editor comes with a floating toolbar that becomes visible + "link": "getting-started/setup/editor-types#inline-editor", "name": "Inline editor", + "description: "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. - + " }, { "id": "multi-root-editor", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link getting-started/setup/editor-types#multi-root-editor Multi-root editor} - - - - The multi-root editor is an editor type that features multiple, separate + "link": "getting-started/setup/editor-types#multi-root-editor", "name": "Multi-root editor", + "description: "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. - + " }, { "id": "professionally-translated-language-packs", "type": "feature", - - {@link getting-started/setup/ui-language Professionally translated language packs} - - - CKEditor 5 provides 38 professionally translated language options, along + "link": "getting-started/setup/ui-language", "name": "Professionally translated language packs", + "description: "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 - + " }, { "id": "toolbar-and-menus", "type": "feature", - - {@link getting-started/setup/toolbar Toolbar and menus} - - - The Toolbar Configuration feature provides different toolbar interfaces + "link": "getting-started/setup/toolbar", "name": "Toolbar and menus", + "description: "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 @@ -1563,58 +977,35 @@ 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. - + " }, { "id": "balloon-toolbar", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@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#balloon-toolbar", "name": "Balloon toolbar", + "description: "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. + " }, { "id": "block-toolbar", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link getting-started/setup/toolbar#block-toolbar Block toolbar} - - - - The block toolbar provides an additional configurable toolbar on the + "link": "getting-started/setup/toolbar#block-toolbar", "name": "Block toolbar", + "description: "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). - + " }, { "id": "classic-toolbar", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link getting-started/setup/toolbar#main-editor-toolbar Classic toolbar} - - - - The toolbar is the most basic user interface element of CKEditor 5 that + "link": "getting-started/setup/toolbar#main-editor-toolbar", "name": "Classic toolbar", + "description: "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. - + " }, { "id": "collapsible-toolbar", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link getting-started/setup/toolbar#extended-toolbar-configuration-format Collapsible toolbar} - - - Collapsible toolbar for UI space efficiency. + "link": "getting-started/setup/toolbar#extended-toolbar-configuration-format", "name": "Collapsible toolbar", + "description: "Collapsible toolbar for UI space efficiency." }, { "id": "image-contextual-toolbar", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/images-overview#image-contextual-toolbar Image contextual toolbar} - - - + "link": "features/images-overview#image-contextual-toolbar", "name": "Image contextual toolbar", + "description: " The {@link module:image/imagetoolbar~ImageToolbar} plugin introduces a contextual toolbar for images. The toolbar appears @@ -1628,79 +1019,51 @@ 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. - - }, + " }, { "id": "menu-bar", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@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, + "link": "getting-started/setup/menubar", "name": "Menu bar", + "description: "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. - + " }, { "id": "multiline-toolbar", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link getting-started/setup/toolbar#multiline-wrapping-toolbar Multiline toolbar} - - - Multiline toolbar for easy access to all functions. + "link": "getting-started/setup/toolbar#multiline-wrapping-toolbar", "name": "Multiline toolbar", + "description: "Multiline toolbar for easy access to all functions." }, { "id": "nesting-toolbars-in-dropdowns", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@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": "getting-started/setup/toolbar#grouping-toolbar-items-in-dropdowns-nested-toolbars", "name": "Nesting toolbars in dropdowns", + "description: "Nested toolbars for space efficiency and task-oriented access." }, { "id": "sidebar-annotations-bar", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/annotations-display-mode#wide-sidebar Wide sidebar} - - - - There are three built-in UIs to display comment threads and suggestion + "link": "features/annotations-display-mode#wide-sidebar", "name": "Wide sidebar", + "description: "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. - + " }, { "id": "table-contextual-toolbar", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link features/tables#table-contextual-toolbar Table contextual toolbar} - - - + "link": "features/tables#table-contextual-toolbar", "name": "Table contextual toolbar", + "description: " 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. - - }, - + " }, { "id": "watchdog", "type": "feature", - - {@link features/watchdog Watchdog} - - - The watchdog utility protects you from data loss in case the editor + "link": "features/watchdog", "name": "Watchdog", + "description: "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. - + " }, @@ -1711,11 +1074,8 @@ { "id": "accessibility-support", "type": "feature", - - {@link features/accessibility Accessibility support} - - - CKEditor 5 includes accessibility functionality designed to ensure + "link": "features/accessibility", "name": "Accessibility support", + "description: "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 @@ -1724,14 +1084,11 @@ levels A and AA, as well as Section 508 of the Rehabilitation Act, as detailed in the Accessibility Conformance Report, ensuring broad accessibility compliance. - + " }, { "id": "read-only-support", "type": "feature", - - {@link features/read-only Read-only support} - - - The Read-Only Mode feature enables content to be locked from editing + "link": "features/read-only", "name": "Read-only support", + "description: "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. @@ -1739,14 +1096,11 @@ 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. - + " }, { "id": "restricted-editing", "type": "feature", - - {@link features/restricted-editing Restricted editing} - - - The Restricted Editing feature allows some sections of a document to be + "link": "features/restricted-editing", "name": "Restricted editing", + "description: "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 @@ -1755,14 +1109,11 @@ 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. - + " }, { "id": "text-part-language", "type": "feature", - - {@link features/language Text Part Language} - - - The Text Part Language feature allows users to specify the language of + "link": "features/language", "name": "Text Part Language", + "description: "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 @@ -1771,28 +1122,19 @@ Arabic citations. It supports the WCAG 3.1.2 Language of Parts specification, facilitating the creation of more accessible and comprehensible multilingual content. - + " }, { "id": "word-and-character-counter", "type": "feature", - - {@link features/word-count Word and character counter} - - - The Word and Character Count feature provides a real-time tracking tool + "link": "features/word-count", "name": "Word and character counter", + "description: "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. - + " }, { "id": "wproofreader", "type": "feature", - - {@link features/spelling-and-grammar-checking WProofreader - - Premium feature - } - - - The Spelling and Grammar Checker is a proofreading tool that supports + "link": "features/spelling-and-grammar-checking", "name": "WProofreader", "isPremium": true, + "description: "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 @@ -1800,7 +1142,7 @@ 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. - + " }, @@ -1810,11 +1152,8 @@ { "id": "editor-sdk", "type": "feature", - - {@link framework/index Editor SDK} - - - Select from numerous toolbar styles and over 100 plugins to tailor an + "link": "framework/index", "name": "Editor SDK", + "description: "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 @@ -1822,50 +1161,34 @@ dedicated resources such as a package generator and the CKEditor 5 Inspector - a comprehensive suite of debugging tools - are provided, helping accelerate development work. - + " }, { "id": "ckeditor5-inspector", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@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/development-tools/inspector", "name": "CKEditor 5 inspector", + "description: "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}. - }, + framework/architecture/core-editor-architecture#commands commands}." }, { "id": "cloud-services-rest-api", "type": "subfeature", - - - {@img assets/img/enter-arrow.svg} {@link @cs developer-resources/apis/overview Cloud Services REST API} - - - The CKEditor Cloud Services is a cloud platform that provides editing and real-time collaboration + "link": "@cs", "name": "developer-resources/apis/overview Cloud Services REST API", + "description: "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. - }, + some features can also be used directly through REST APIs." }, { "id": "themes", "type": "feature", - - {@link framework/theme-customization Themes} - - - The default theme of CKEditor 5 can be customized to match most visual + "link": "framework/theme-customization", "name": "Themes", + "description: "The default theme of CKEditor 5 can be customized to match most visual integration requirements. - + " }, { "id": "ui-library", "type": "feature", - - {@link framework/architecture/ui-library UI Library} - - + "link": "framework/architecture/ui-library", "name": "UI Library", + "description: " The standard UI library of CKEditor 5 is - @ckeditor/ckeditor5-ui@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. - + " }, @@ -1876,76 +1199,38 @@ { "id": "base64-upload-adapter", "type": "feature", - - {@link features/base64-upload-adapter Base64 Upload Adapter} - - - Convert inserted images into Base64-encoded strings in the editor + "link": "features/base64-upload-adapter", "name": "Base64 Upload Adapter", + "description: "Convert inserted images into Base64-encoded strings in the editor output. Images are stored with other content in the database without server-side processing. - + " }, { "id": "ckbox", "type": "feature", - - {@link features/ckbox CKBox - - Premium feature - } - - - Securely upload, store, edit, and utilize your images and files in CKEditor 5. Simplify media discovery + "link": "features/ckbox", "name": "CKBox", "isPremium": true, + "description: "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. - + " }, { "id": "ckfinder", "type": "feature", - - {@link features/ckfinder CKFinder - - Premium feature - } - - - The CKFinder feature lets you insert images and links to files into your + "link": "features/ckfinder", "name": "CKFinder", "isPremium": true, + "description: "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. - + " }, { "id": "custom-upload-adapter", "type": "feature", - - {@link features/image-upload#implementing-your-own-upload-adapter Custom Upload Adapter} - - - Have your own file management solution? Use this adapter to integrate + "link": "features/image-upload#implementing-your-own-upload-adapter", "name": "Custom Upload Adapter", + "description: "Have your own file management solution? Use this adapter to integrate your preferred software with CKEditor. - + " }, { "id": "simple-upload-adapter", "type": "feature", - - {@link features/simple-upload-adapter Simple Upload Adapter} - - + "link": "features/simple-upload-adapter", "name": "Simple Upload Adapter", + "description: " Upload images to your server using the XMLHttpRequest API with a minimal editor configuration. - - }, - { "id": "uploadcare", "type": "feature", - - 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. - - }, -] \ No newline at end of file + " }, From af5912eecbea4e4685b6f614782501ddfbd3f9d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotrek=20Koszuli=C5=84ski?= Date: Thu, 28 Nov 2024 16:20:43 +0100 Subject: [PATCH 04/20] Corrected formatting. --- docs/_snippets/features-digest-source.json | 2319 +++++++++----------- 1 file changed, 1084 insertions(+), 1235 deletions(-) diff --git a/docs/_snippets/features-digest-source.json b/docs/_snippets/features-digest-source.json index 7f646bbd3af..62caa511135 100644 --- a/docs/_snippets/features-digest-source.json +++ b/docs/_snippets/features-digest-source.json @@ -1,1236 +1,1085 @@ [ - { "id": "advanced-html-editing", "type": "feature", - "link": "features/general-html-support", "name": "Advanced HTML Editing", - "description: "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. - " - }, - { "id": "full-page-html", "type": "subfeature", - "link": "features/full-page-html", "name": "Full page HTML", - "description: " - 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. - " }, - { "id": "general-html-support", "type": "subfeature", - "link": "features/general-html-support", "name": "General HTML Support (GHS)", - "description: "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. - " - }, - { "id": "html-comment", "type": "subfeature", - "link": "features/html-comments", "name": "HTML comment", - "description: " - 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. - " }, - { "id": "html-embed", "type": "subfeature", - "link": "features/html-embed", "name": "HTML embed", - "description: "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. - " - }, - { "id": "show-blocks", "type": "subfeature", - "link": "features/show-blocks", "name": "Show blocks", - "description: "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. - " - }, - { "id": "source-editing", "type": "subfeature", - "link": "features/source-editing", "name": "Source editing", - "description: "The source editing feature lets you view and edit the source of your - document. - " - }, - { "id": "block-formatting", "type": "feature", - "link": "features/block-quote", "name": "Block formatting", - "description: "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. - " - }, - { "id": "block-quotes", "type": "subfeature", - "link": "features/block-quote", "name": "Block quote", - "description: "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. - " - }, - { "id": "headings-paragraph", "type": "subfeature", - "link": "features/headings", "name": "Headings/paragraph", - "description: "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. - " - }, - { "id": "horizontal-line", "type": "subfeature", - "link": "features/horizontal-line", "name": "Horizontal line", - "description: "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. - " - }, - { "id": "block-indentation", "type": "subfeature", - "link": "features/indent", "name": "Block indentation", - "description: "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. - " - }, - { "id": "bookmark", "type": "feature", - "link": "features/bookmarks", "name": "Bookmarks", - "description: "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. - " - }, - { "id": "clipboard", "type": "feature", - "link": "framework/deep-dive/clipboard", "name": "Clipboard", - "description: "Copy, cut, and paste content within the editor or from external sources. - " - }, - { "id": "code-blocks", "type": "feature", - "link": "features/code-blocks", "name": "Code blocks", - "description: "Supports the insertion and management of pre-formatted code snippets with - distinct styling. - " - }, - { "id": "drag-and-drop", "type": "feature", - "link": "features/drag-drop", "name": "Drag and drop", - "description: "Rearrange elements within a document, including moving text blocks, - images, or other content types. - " - }, - { "id": "font-formatting", "type": "feature", - "link": "features/font", "name": "Font formatting", - "description: "The font feature lets you change font family, size, and color (including - background color). All of these options are configurable. - " - }, - { "id": "font-background-color", "type": "subfeature", - "link": "features/font#configuring-the-font-color-and-font-background-color-features", "name": "Font background color", - "description: "Effortlessly make the words stand out even more with a colored background. - " - }, - { "id": "font-color", "type": "subfeature", - "link": "features/font#configuring-the-font-color-and-font-background-color-features", "name": "Font color", - "description: "Effortlessly make the letters stand out with their own color." - }, - { "id": "font-family", "type": "subfeature", - "link": "features/font#configuring-the-font-family-feature", "name": "Font family", - "description: "Choose from a predefined set of fonts, depending on the type of content - and its destination - print, screen, etc. - " - }, - { "id": "font-size", "type": "subfeature", - "link": "features/font#configuring-the-font-size-feature", "name": "Font size", - "description: "Easily control the size of the letters." - }, - { "id": "image", "type": "feature", - "link": "features/images-overview", "name": "Image", - "description: "The image feature allows adding images of various kinds to the rich - content inside the editor. A large set of subfeature background-grays 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. - " - }, - { "id": "image-all-text", "type": "subfeature", - "link": "features/images-text-alternative", "name": "Image alt text", - "description: "Add description text, AKA alternative text, for images. Alt text - improves accessibility by telling screen readers and search engines what - the image depicts. - " - }, - { "id": "image-captions", "type": "subfeature", - "link": "features/images-captions", "name": "Image captions", - "description: "Add optional captions for images, which are shown below the picture. - " - }, - { "id": "image-insert-via-url", "type": "subfeature", - "link": "features/images-inserting", "name": "Image insert via URL", - "description: "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. - " - }, - { "id": "image-linking", "type": "subfeature", - "link": "features/images-linking", "name": "Image linking", - "description: " - The - {@link module:link/linkimage~LinkImage} - plugin lets you use images as links. - " }, - { "id": "image-resize", "type": "subfeature", - "link": "features/images-resizing", "name": "Image resize", - "description: " - 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. - " }, - { "id": "image-styles", "type": "subfeature", - "link": "features/images-styles", "name": "Image styles", - "description: "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. - " - }, - { "id": "image-upload", "type": "subfeature", - "link": "features/image-upload", "name": "Image upload", - "description: "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. - " - }, - { "id": "responsive-images", "type": "subfeature", - "link": "features/images-responsive", "name": "Responsive images", - "description: " - 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. - " }, - { "id": "links", "type": "feature", - "link": "features/link", "name": "Links", - "description: "Facilitates the addition of hyperlinks to text, automatically converting - typed or pasted URLs into clickable links, and allowing manual insertion - and editing of links. - " - }, - { "id": "lists", "type": "feature", - "link": "features/lists", "name": "Lists", - "description: "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. - " - }, - { "id": "list-indentation", "type": "subfeature", - "link": "features/lists-editing#indenting-lists", "name": "List indentation", - "description: "Besides controlling - {@link features/indent text block indentation}, - the indent and outdent buttons allow for indenting list items - (nesting them). - " - }, - { "id": "list-start-index", "type": "subfeature", - "link": "features/lists#list-start-index", "name": "List start index", - "description: "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. - " - }, - { "id": "list-styles", "type": "subfeature", - "link": "features/lists#list-styles", "name": "List styles", - "description: "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. - " - }, - { "id": "multi-level-lists", "type": "subfeature", - "link": "features/multi-level-lists", "name": "Multi-level lists", "isPremium": true, - "description: "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. - " - }, - { "id": "nested-lists", "type": "subfeature", - "link": "features/lists-editing#indenting-lists", "name": "Nested lists", - "description: "Besides controlling {@link features/indent text block indentation}, - the indent and outdent buttons allow for indenting list items - (nesting them). - " - }, - { "id": "ordered-lists", "type": "subfeature", - "link": "features/lists", "name": "Ordered lists", - "description: "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. - " - }, - { "id": "reversed-list", "type": "subfeature", - "link": "features/lists#reversed-list", "name": "Reversed list", - "description: "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). - " - }, - { "id": "to-do-lists", "type": "subfeature", - "link": "features/todo-lists", "name": "To-do lists", - "description: "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. - " - }, - { "id": "unordered-lists", "type": "subfeature", - "link": "features/lists", "name": "Unordered lists", - "description: "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. - " - }, - { "id": "mermaid", "type": "feature", - "link": "features/mermaid", "name": "Mermaid", "isExperimental": true, - "description: "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. - " - }, - { "id": "remove-formatting", "type": "feature", - "link": "features/remove-format", "name": "Remove formatting", - "description: "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). - " - }, - { "id": "select-all", "type": "feature", - "link": "features/select-all", "name": "Select all", - "description: "Enables the selection of all content within the editor with a single - command or shortcut. - " - }, - { "id": "tables", "type": "feature", - "link": "features/tables", "name": "Tables", - "description: "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. - " - }, - { "id": "columns-resizing", "type": "subfeature", - "link": "features/tables-resize", "name": "Columns resizing", - "description: " - The - {@link module:table/tablecolumnresize~TableColumnResize} - plugin lets you resize tables and individual table columns. It gives you - complete control over column width. - " }, - { "id": "insert-delete-columns-and-rows", "type": "subfeature", - "link": "features/tables#table-contextual-toolbar", "name": "Insert/delete columns & rows", - "description: "The basic table features allow users to insert tables into content, add - or remove columns and rows and merge or split cells. - " - }, - { "id": "merge-and-split-cells", "type": "subfeature", - "link": "features/tables#table-contextual-toolbar", "name": "Merge & split cells", - "description: "The basic table features allow users to insert tables into content, add - or remove columns and rows, and merge or split cells. - " - }, - { "id": "nesting", "type": "subfeature", - "link": "features/tables#nesting-tables", "name": "Nesting", - "description: "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. - " - }, - { "id": "styling-tables-and-cells", "type": "subfeature", - "link": "features/tables-styling", "name": "Styling tables & cells", - "description: "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. - " - }, - { "id": "table-headers", "type": "subfeature", - "link": "features/tables#default-table-headers", "name": "Table headers", - "description: " - To make every inserted table have n number of rows and - columns as table headers by default, set an optional table configuration - property defaultHeadings. - " }, - { "id": "table-selection", "type": "subfeature", - "link": "features/tables#table-selection", "name": "Table selection", - "description: " - 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. - " }, - { "id": "tables-caption", "type": "subfeature", - "link": "features/tables-caption", "name": "Tables caption", - "description: " - 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. - " }, - { "id": "text-alignment", "type": "feature", - "link": "features/text-alignment", "name": "Text alignment", - "description: "Allows the adjustment of text alignment to the left, right, center, or - justify and permits the alteration of indentation. - " - }, - { "id": "text-formatting", "type": "feature", - "link": "features/basic-styles", "name": "Text formatting", - "description: "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. - " - }, - { "id": "bold", "type": "subfeature", - "link": "features/basic-styles", "name": "Bold", - "description: "Making the letters look like the good time were never gone." - }, - { "id": "code", "type": "subfeature", - "link": "features/basic-styles", "name": "Code", - "description: "Snippet look like a terminal from the 1990s movie." - }, - { "id": "highlight", "type": "subfeature", - "link": "features/highlight", "name": "Highlight", - "description: "Highlight makes important content stand out, either with font color or - background fill. - " - }, - { "id": "italic", "type": "subfeature", - "link": "features/basic-styles", "name": "Italic", - "description: "Making the letters look like seashore pines." - }, - { "id": "strikethrough", "type": "subfeature", - "link": "features/basic-styles", "name": "Strikethrough", - "description: "Never mind, will not need it anymore." - }, - { "id": "styles", "type": "subfeature", - "link": "features/style", "name": "Styles", - "description: "The styles feature lets you easily apply predefined styles available for - block and inline content. - " - }, - { "id": "subscript", "type": "subfeature", - "link": "features/basic-styles", "name": "Subscript", - "description: "Fine print at the bottom, like atom numbers." - }, - { "id": "superscript", "type": "subfeature", - "link": "features/basic-styles", "name": "Superscript", - "description: "Fine print on top, like references in a book." - }, - { "id": "underline", "type": "subfeature", - "link": "features/basic-styles", "name": "Underline", - "description: "Stuff looks important, yo. Or like a link, too." - }, - { "id": "undo-redo", "type": "feature", - "link": "features/undo-redo", "name": "Undo/redo", - "description: "Backtrack or repeat actions for editing purposes." - }, - - - - - - - - - - - - { "id": "asynchronous-collaboration", "type": "feature", - "link": "features/collaboration", "name": "Asynchronous collaboration", "isPremium": true, - "description: "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. - " - }, - { "id": "local-data-storage", "type": "subfeature", - "link": "features/collaboration", "name": "Local data storage", "isPremium": true, - "description: "In asynchronous collaboration, data is maintained on the client's - servers. - " - }, - { "id": "comments", "type": "feature", - "link": "features/comments", "name": "Comments", "isPremium": true, - "description: "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. - " - }, - { "id": "comments-archive", "type": "subfeature", - "link": "features/comments", "name": "Comments archive", "isPremium": true, - "description: "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. - " - }, - { "id": "comments-outside-editor", "type": "subfeature", - "link": "features/comments-outside-editor", "name": "Comments outside editor", "isPremium": true, - "description: " - 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. - " }, - { "id": "sidebar-modes", "type": "subfeature", - "link": "features/annotations-display-mode", "name": "Sidebar modes", "isPremium": true, - "description: "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. - " - }, - { "id": "mentions", "type": "feature", - "link": "features/mentions", "name": "Mentions", - "description: "The mention feature supports smart autocompletion triggered by user - input. Typing a predetermined marker, like @ or #, prompts a panel to - appear, offering autocomplete suggestions. - " - }, - { "id": "real-time-collaboration", "type": "feature", - "link": "features/real-time-collaboration", "name": "Real-time collaboration", "isPremium": true, - "description: "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. - " - }, - { "id": "co-authoring", "type": "subfeature", - "link": "features/users-in-real-time-collaboration", "name": "Co-authoring", "isPremium": true, - "description: "Multiple user real-time editing and content creation feature." - }, - { "id": "on-premises", "type": "subfeature", - "link": "@cs", "name": "onpremises/index On-premises", "isPremium": true, - "description: "On-premises real-time collaboration version to deploy to client's own - infrastructure, includes a private cloud. - " - }, - { "id": "saas", "type": "subfeature", - "link": "@cs", "name": "guides/collaboration/quick-start SaaS", "isPremium": true, - "description: "Real-time collaboration provided as a service by CKSource." - }, - { "id": "revision-history", "type": "feature", - "link": "features/revision-history", "name": "Revision history", "isPremium": true, - "description: "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. - " - }, - { "id": "track-changes", "type": "feature", - "link": "features/track-changes", "name": "Track changes", "isPremium": true, - "description: "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. - " - }, - { "id": "users-list-and-permissions", "type": "feature", - "link": "features/users", "name": "Users list and permissions", "isPremium": true, - "description: " - 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. - " - - - - - - - - { "id": "content-generation", "type": "feature", - "link": "features/export-pdf", "name": "Content generation", "isPremium": true, - "description: "CKEditor 5 may be your universal starting point for generating content in several recognizable formats." - }, - { "id": "export-to-pdf", "type": "subfeature", - "link": "features/export-pdf", "name": "Export to PDF", "isPremium": true, - "description: "Create a PDF from in-editor content seamlessly. Customize headers and - footers, include page breaks, embed images, and choose from various - fonts. - " - }, - { "id": "export-to-word", "type": "subfeature", - "link": "features/export-word", "name": "Export to Word", "isPremium": true, - "description: "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. - " - }, - { "id": "import-from-word", "type": "subfeature", - "link": "features/import-word", "name": "Import from Word", "isPremium": true, - "description: "Effortlessly transform Word documents into clean HTML within CKEditor 5 - while retaining the original styling, as well as comments and change - tracking annotations. - " - }, - { "id": "markdown-output", "type": "feature", - "link": "features/markdown", "name": "Markdown output", - "description: "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. - " - }, - { "id": "media-embed", "type": "feature", - "link": "features/media-embed", "name": "Media embed", - "description: "Use the insert media button in the toolbar to embed media. - Pasting a media URL directly into the editor content automatically - embeds the media. - " - }, - { "id": "paste-markdown", "type": "feature", - "link": "features/paste-markdown", "name": "Paste Markdown", - "description: "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. - " - }, - { "id": "xml-output", "type": "feature", - "link": "module:engine/dataprocessor/xmldataprocessor~XmlDataProcessor", "name": "XML output", - "description: "Turn your content into parsable XML files for automation and - cross-platform interoperability. - " - }, - - - - - - - - - - - - - - { "id": "document-outline", "type": "feature", - "link": "features/document-outline", "name": "Document outline", "isPremium": true, - "description: "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. - " - }, - { "id": "page-utilities", "type": "feature", - "link": "features/minimap", "name": "Page utilities", - "description: "CKEditor 5 Page Utilities enables users to dictate the structuring and - print formatting of their documents effectively. - " - }, - { "id": "content-minimap", "type": "subfeature", - "link": "features/minimap", "name": "Content minimap", - "description: "Offers a concise, birds-eye view of the document's content, - allowing for quick navigation and content management. - " - }, - { "id": "document-title", "type": "subfeature", - "link": "features/title", "name": "Document title", - "description: "Allows users to set and modify the document's title within the - editing interface, ensuring accurate reflection of the contents. - " - }, - { "id": "page-break", "type": "subfeature", - "link": "features/page-break", "name": "Page break", - "description: "Facilitates the insertion of manual breaks within the document, enabling - the definition of page endings and beginnings for optimal layout and - print clarity. - " - }, - { "id": "pagination", "type": "feature", - "link": "features/pagination", "name": "Pagination", "isPremium": true, - "description: "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. - " - }, - { "id": "table-of-contents", "type": "feature", - "link": "features/table-of-contents", "name": "Table of contents", "isPremium": true, - "description: "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. - " - }, - - - - - { "id": "ai-assistant", "type": "feature", - "link": "features/ai-assistant-overview", "name": "AI Assistant", "isPremium": true, - "description: "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. - " - }, - { "id": "automation", "type": "feature", - "link": "features/autoformat", "name": "Automation", - "description: "Automate your workflow with CKEditor 5 automation tools, regardless of whether you write, link, or save! - " }, - { "id": "autoformatting", "type": "subfeature", - "link": "features/autoformat", "name": "Autoformatting", - "description: " - 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. - " }, - { "id": "autolink", "type": "subfeature", - "link": "features/link#autolink-feature", "name": "Autolink", - "description: " - 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. - " }, - { "id": "automatic-text-transformation", "type": "subfeature", - "link": "features/text-transformation", "name": "Automatic text transformations", - "description: " - 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. - " }, - { "id": "autosave", "type": "subfeature", - "link": "features/autosave", "name": "Autosave", - "description: " - 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. - " }, - { "id": "case-change", "type": "feature", - "link": "features/case-change", "name": "Case change", "isPremium": true, - "description: "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. - " - }, - { "id": "find-and-replace", "type": "feature", - "link": "features/find-and-replace", "name": "Find and replace", - "description: "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. - " - }, - { "id": "format-painter", "type": "feature", - "link": "features/format-painter", "name": "Format painter", "isPremium": true, - "description: "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. - " - }, - { "id": "keyboard-shortcuts", "type": "feature", - "link": "features/accessibility#keyboard-shortcuts", "name": "Keyboard shortcuts", - "description: "CKEditor 5 supports various keyboard shortcuts that boost productivity - and provide necessary accessibility to screen reader users. - " - }, - { "id": "mathtype", "type": "feature", - "link": "features/math-equations", "name": "MathType", "isPremium": true, - "description: "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. - " - }, - { "id": "merge-fields", "type": "feature", - "link": "features/merge-fields", "name": "Merge fields", "isPremium": true, - "description: "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. - " - }, - { "id": "paste-from-google-docs", "type": "feature", - "link": "features/paste-from-google-docs", "name": "Paste from Google Docs", - "description: "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. - " - }, - { "id": "paste-from-office", "type": "feature", - "link": "features/paste-from-office", "name": "Paste from Office", - "description: "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. - " - }, - { "id": "paste-from-office-enhanced", "type": "feature", - "link": "features/paste-from-office-enhanced", "name": "Paste from Office Enhanced", "isPremium": true, - "description: "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. - " - }, - { "id": "paste-plain-text", "type": "feature", - "link": "features/paste-plain-text", "name": "Paste plain text", - "description: "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. - " - }, - { "id": "slash-commands", "type": "feature", - "link": "features/slash-commands", "name": "Slash commands", "isPremium": true, - "description: "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. - " - }, - { "id": "special-characters", "type": "feature", - "link": "features/special-characters", "name": "Special characters", - "description: "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. - " - }, - { "id": "templates", "type": "feature", - "link": "features/template", "name": "Templates", "isPremium": true, - "description: "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. - " - - - - - - - - - - - - - - - - - - { "id": "editor-placeholder", "type": "feature", - "link": "features/editor-placeholder", "name": "Editor placeholder", - "description: "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. - " - }, - { "id": "editor-ui-types", "type": "feature", - "link": "getting-started/setup/editor-types", "name": "Editor UI types", - "description: "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. - " - }, - { "id": "balloon-block-editor", "type": "subfeature", - "link": "getting-started/setup/editor-types#balloon-editor-and-balloon-block-editor", "name": "Balloon block editor", - "description: "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. - " - }, - { "id": "balloon-editor", "type": "subfeature", - "link": "getting-started/setup/editor-types#balloon-editor-and-balloon-block-editor", "name": "Balloon block editor", - "description: "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). - " - }, - { "id": "classic-editor", "type": "subfeature", - "link": "getting-started/setup/editor-types#classic-editor", "name": "Classic editor", - "description: "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. - " - }, - { "id": "decoupled-editor", "type": "subfeature", - "link": "getting-started/setup/editor-types#decoupled-editor-document", "name": "Decoupled editor", - "description: "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. - " - }, - { "id": "inline-editor", "type": "subfeature", - "link": "getting-started/setup/editor-types#inline-editor", "name": "Inline editor", - "description: "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. - " - }, - { "id": "multi-root-editor", "type": "subfeature", - "link": "getting-started/setup/editor-types#multi-root-editor", "name": "Multi-root editor", - "description: "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. - " - }, - { "id": "professionally-translated-language-packs", "type": "feature", - "link": "getting-started/setup/ui-language", "name": "Professionally translated language packs", - "description: "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 - " - }, - { "id": "toolbar-and-menus", "type": "feature", - "link": "getting-started/setup/toolbar", "name": "Toolbar and menus", - "description: "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. - " - }, - { "id": "balloon-toolbar", "type": "subfeature", - "link": "getting-started/setup/toolbar#balloon-toolbar", "name": "Balloon toolbar", - "description: "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. - " - }, - { "id": "block-toolbar", "type": "subfeature", - "link": "getting-started/setup/toolbar#block-toolbar", "name": "Block toolbar", - "description: "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). - " - }, - { "id": "classic-toolbar", "type": "subfeature", - "link": "getting-started/setup/toolbar#main-editor-toolbar", "name": "Classic toolbar", - "description: "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. - " - }, - { "id": "collapsible-toolbar", "type": "subfeature", - "link": "getting-started/setup/toolbar#extended-toolbar-configuration-format", "name": "Collapsible toolbar", - "description: "Collapsible toolbar for UI space efficiency." - }, - { "id": "image-contextual-toolbar", "type": "subfeature", - "link": "features/images-overview#image-contextual-toolbar", "name": "Image contextual toolbar", - "description: " - 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. - " }, - { "id": "menu-bar", "type": "subfeature", - "link": "getting-started/setup/menubar", "name": "Menu bar", - "description: "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. - " - }, - { "id": "multiline-toolbar", "type": "subfeature", - "link": "getting-started/setup/toolbar#multiline-wrapping-toolbar", "name": "Multiline toolbar", - "description: "Multiline toolbar for easy access to all functions." - }, - { "id": "nesting-toolbars-in-dropdowns", "type": "subfeature", - "link": "getting-started/setup/toolbar#grouping-toolbar-items-in-dropdowns-nested-toolbars", "name": "Nesting toolbars in dropdowns", - "description: "Nested toolbars for space efficiency and task-oriented access." - }, - { "id": "sidebar-annotations-bar", "type": "subfeature", - "link": "features/annotations-display-mode#wide-sidebar", "name": "Wide sidebar", - "description: "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. - " - }, - { "id": "table-contextual-toolbar", "type": "subfeature", - "link": "features/tables#table-contextual-toolbar", "name": "Table contextual toolbar", - "description: " - 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. - " }, - { "id": "watchdog", "type": "feature", - "link": "features/watchdog", "name": "Watchdog", - "description: "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. - " - }, - - - - - - - - - { "id": "accessibility-support", "type": "feature", - "link": "features/accessibility", "name": "Accessibility support", - "description: "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. - " - }, - { "id": "read-only-support", "type": "feature", - "link": "features/read-only", "name": "Read-only support", - "description: "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. - " - }, - { "id": "restricted-editing", "type": "feature", - "link": "features/restricted-editing", "name": "Restricted editing", - "description: "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. - " - }, - { "id": "text-part-language", "type": "feature", - "link": "features/language", "name": "Text Part Language", - "description: "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. - " - }, - { "id": "word-and-character-counter", "type": "feature", - "link": "features/word-count", "name": "Word and character counter", - "description: "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. - " - }, - { "id": "wproofreader", "type": "feature", - "link": "features/spelling-and-grammar-checking", "name": "WProofreader", "isPremium": true, - "description: "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. - " - }, - - - - - - - - { "id": "editor-sdk", "type": "feature", - "link": "framework/index", "name": "Editor SDK", - "description: "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. - " - }, - { "id": "ckeditor5-inspector", "type": "subfeature", - "link": "framework/development-tools/inspector", "name": "CKEditor 5 inspector", - "description: "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}." }, - { "id": "cloud-services-rest-api", "type": "subfeature", - "link": "@cs", "name": "developer-resources/apis/overview Cloud Services REST API", - "description: "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." }, - { "id": "themes", "type": "feature", - "link": "framework/theme-customization", "name": "Themes", - "description: "The default theme of CKEditor 5 can be customized to match most visual - integration requirements. - " - }, - { "id": "ui-library", "type": "feature", - "link": "framework/architecture/ui-library", "name": "UI Library", - "description: " - 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. - " - }, - - - - - - - - - { "id": "base64-upload-adapter", "type": "feature", - "link": "features/base64-upload-adapter", "name": "Base64 Upload Adapter", - "description: "Convert inserted images into Base64-encoded strings in the editor - output. Images are stored with other content in the database without - server-side processing. - " - }, - { "id": "ckbox", "type": "feature", - "link": "features/ckbox", "name": "CKBox", "isPremium": true, - "description: "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. - " - }, - { "id": "ckfinder", "type": "feature", - "link": "features/ckfinder", "name": "CKFinder", "isPremium": true, - "description: "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. - " - }, - { "id": "custom-upload-adapter", "type": "feature", - "link": "features/image-upload#implementing-your-own-upload-adapter", "name": "Custom Upload Adapter", - "description: "Have your own file management solution? Use this adapter to integrate - your preferred software with CKEditor. - " - }, - { "id": "simple-upload-adapter", "type": "feature", - "link": "features/simple-upload-adapter", "name": "Simple Upload Adapter", - "description: " - Upload images to your server using the XMLHttpRequest API with a - minimal editor configuration. - " }, + { + "id": "advanced-html-editing", + "type": "feature", + "link": "features/general-html-support", + "name": "Advanced HTML Editing", + "description": "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." + }, + { + "id": "full-page-html", + "type": "subfeature", + "link": "features/full-page-html", + "name": "Full page HTML", + "description": "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." + }, + { + "id": "general-html-support", + "type": "subfeature", + "link": "features/general-html-support", + "name": "General HTML Support (GHS)", + "description": "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." + }, + { + "id": "html-comment", + "type": "subfeature", + "link": "features/html-comments", + "name": "HTML comment", + "description": "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." + }, + { + "id": "html-embed", + "type": "subfeature", + "link": "features/html-embed", + "name": "HTML embed", + "description": "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." + }, + { + "id": "show-blocks", + "type": "subfeature", + "link": "features/show-blocks", + "name": "Show blocks", + "description": "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." + }, + { + "id": "source-editing", + "type": "subfeature", + "link": "features/source-editing", + "name": "Source editing", + "description": "The source editing feature lets you view and edit the source of your document." + }, + { + "id": "block-formatting", + "type": "feature", + "link": "features/block-quote", + "name": "Block formatting", + "description": "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." + }, + { + "id": "block-quotes", + "type": "subfeature", + "link": "features/block-quote", + "name": "Block quote", + "description": "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." + }, + { + "id": "headings-paragraph", + "type": "subfeature", + "link": "features/headings", + "name": "Headings/paragraph", + "description": "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." + }, + { + "id": "horizontal-line", + "type": "subfeature", + "link": "features/horizontal-line", + "name": "Horizontal line", + "description": "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." + }, + { + "id": "block-indentation", + "type": "subfeature", + "link": "features/indent", + "name": "Block indentation", + "description": "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." + }, + { + "id": "bookmark", + "type": "feature", + "link": "features/bookmarks", + "name": "Bookmarks", + "description": "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." + }, + { + "id": "clipboard", + "type": "feature", + "link": "framework/deep-dive/clipboard", + "name": "Clipboard", + "description": "Copy, cut, and paste content within the editor or from external sources." + }, + { + "id": "code-blocks", + "type": "feature", + "link": "features/code-blocks", + "name": "Code blocks", + "description": "Supports the insertion and management of pre-formatted code snippets with distinct styling." + }, + { + "id": "drag-and-drop", + "type": "feature", + "link": "features/drag-drop", + "name": "Drag and drop", + "description": "Rearrange elements within a document, including moving text blocks, images, or other content types." + }, + { + "id": "font-formatting", + "type": "feature", + "link": "features/font", + "name": "Font formatting", + "description": "The font feature lets you change font family, size, and color (including background color). All of these options are configurable." + }, + { + "id": "font-background-color", + "type": "subfeature", + "link": "features/font#configuring-the-font-color-and-font-background-color-features", + "name": "Font background color", + "description": "Effortlessly make the words stand out even more with a colored background." + }, + { + "id": "font-color", + "type": "subfeature", + "link": "features/font#configuring-the-font-color-and-font-background-color-features", + "name": "Font color", + "description": "Effortlessly make the letters stand out with their own color." + }, + { + "id": "font-family", + "type": "subfeature", + "link": "features/font#configuring-the-font-family-feature", + "name": "Font family", + "description": "Choose from a predefined set of fonts, depending on the type of content and its destination - print, screen, etc." + }, + { + "id": "font-size", + "type": "subfeature", + "link": "features/font#configuring-the-font-size-feature", + "name": "Font size", + "description": "Easily control the size of the letters." + }, + { + "id": "image", + "type": "feature", + "link": "features/images-overview", + "name": "Image", + "description": "The image feature allows adding images of various kinds to the rich content inside the editor. A large set of subfeature background-grays 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." + }, + { + "id": "image-all-text", + "type": "subfeature", + "link": "features/images-text-alternative", + "name": "Image alt text", + "description": "Add description text, AKA alternative text, for images. Alt text improves accessibility by telling screen readers and search engines what the image depicts." + }, + { + "id": "image-captions", + "type": "subfeature", + "link": "features/images-captions", + "name": "Image captions", + "description": "Add optional captions for images, which are shown below the picture." + }, + { + "id": "image-insert-via-url", + "type": "subfeature", + "link": "features/images-inserting", + "name": "Image insert via URL", + "description": "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." + }, + { + "id": "image-linking", + "type": "subfeature", + "link": "features/images-linking", + "name": "Image linking", + "description": "The {@link module:link/linkimage~LinkImage} plugin lets you use images as links." + }, + { + "id": "image-resize", + "type": "subfeature", + "link": "features/images-resizing", + "name": "Image resize", + "description": "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." + }, + { + "id": "image-styles", + "type": "subfeature", + "link": "features/images-styles", + "name": "Image styles", + "description": "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." + }, + { + "id": "image-upload", + "type": "subfeature", + "link": "features/image-upload", + "name": "Image upload", + "description": "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." + }, + { + "id": "responsive-images", + "type": "subfeature", + "link": "features/images-responsive", + "name": "Responsive images", + "description": "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." + }, + { + "id": "links", + "type": "feature", + "link": "features/link", + "name": "Links", + "description": "Facilitates the addition of hyperlinks to text, automatically converting typed or pasted URLs into clickable links, and allowing manual insertion and editing of links." + }, + { + "id": "lists", + "type": "feature", + "link": "features/lists", + "name": "Lists", + "description": "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." + }, + { + "id": "list-indentation", + "type": "subfeature", + "link": "features/lists-editing#indenting-lists", + "name": "List indentation", + "description": "Besides controlling {@link features/indent text block indentation}, the indent and outdent buttons allow for indenting list items (nesting them)." + }, + { + "id": "list-start-index", + "type": "subfeature", + "link": "features/lists#list-start-index", + "name": "List start index", + "description": "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." + }, + { + "id": "list-styles", + "type": "subfeature", + "link": "features/lists#list-styles", + "name": "List styles", + "description": "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." + }, + { + "id": "multi-level-lists", + "type": "subfeature", + "link": "features/multi-level-lists", + "name": "Multi-level lists", + "isPremium": true, + "description": "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." + }, + { + "id": "nested-lists", + "type": "subfeature", + "link": "features/lists-editing#indenting-lists", + "name": "Nested lists", + "description": "Besides controlling {@link features/indent text block indentation}, the indent and outdent buttons allow for indenting list items (nesting them)." + }, + { + "id": "ordered-lists", + "type": "subfeature", + "link": "features/lists", + "name": "Ordered lists", + "description": "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." + }, + { + "id": "reversed-list", + "type": "subfeature", + "link": "features/lists#reversed-list", + "name": "Reversed list", + "description": "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)." + }, + { + "id": "to-do-lists", + "type": "subfeature", + "link": "features/todo-lists", + "name": "To-do lists", + "description": "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." + }, + { + "id": "unordered-lists", + "type": "subfeature", + "link": "features/lists", + "name": "Unordered lists", + "description": "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." + }, + { + "id": "mermaid", + "type": "feature", + "link": "features/mermaid", + "name": "Mermaid", + "isExperimental": true, + "description": "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." + }, + { + "id": "remove-formatting", + "type": "feature", + "link": "features/remove-format", + "name": "Remove formatting", + "description": "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)." + }, + { + "id": "select-all", + "type": "feature", + "link": "features/select-all", + "name": "Select all", + "description": "Enables the selection of all content within the editor with a single command or shortcut." + }, + { + "id": "tables", + "type": "feature", + "link": "features/tables", + "name": "Tables", + "description": "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." + }, + { + "id": "columns-resizing", + "type": "subfeature", + "link": "features/tables-resize", + "name": "Columns resizing", + "description": "The {@link module:table/tablecolumnresize~TableColumnResize} plugin lets you resize tables and individual table columns. It gives you complete control over column width." + }, + { + "id": "insert-delete-columns-and-rows", + "type": "subfeature", + "link": "features/tables#table-contextual-toolbar", + "name": "Insert/delete columns & rows", + "description": "The basic table features allow users to insert tables into content, add or remove columns and rows and merge or split cells." + }, + { + "id": "merge-and-split-cells", + "type": "subfeature", + "link": "features/tables#table-contextual-toolbar", + "name": "Merge & split cells", + "description": "The basic table features allow users to insert tables into content, add or remove columns and rows, and merge or split cells." + }, + { + "id": "nesting", + "type": "subfeature", + "link": "features/tables#nesting-tables", + "name": "Nesting", + "description": "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." + }, + { + "id": "styling-tables-and-cells", + "type": "subfeature", + "link": "features/tables-styling", + "name": "Styling tables & cells", + "description": "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." + }, + { + "id": "table-headers", + "type": "subfeature", + "link": "features/tables#default-table-headers", + "name": "Table headers", + "description": "To make every inserted table have n number of rows and columns as table headers by default, set an optional table configuration property defaultHeadings." + }, + { + "id": "table-selection", + "type": "subfeature", + "link": "features/tables#table-selection", + "name": "Table selection", + "description": "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." + }, + { + "id": "tables-caption", + "type": "subfeature", + "link": "features/tables-caption", + "name": "Tables caption", + "description": "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." + }, + { + "id": "text-alignment", + "type": "feature", + "link": "features/text-alignment", + "name": "Text alignment", + "description": "Allows the adjustment of text alignment to the left, right, center, or justify and permits the alteration of indentation." + }, + { + "id": "text-formatting", + "type": "feature", + "link": "features/basic-styles", + "name": "Text formatting", + "description": "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." + }, + { + "id": "bold", + "type": "subfeature", + "link": "features/basic-styles", + "name": "Bold", + "description": "Making the letters look like the good time were never gone." + }, + { + "id": "code", + "type": "subfeature", + "link": "features/basic-styles", + "name": "Code", + "description": "Snippet look like a terminal from the 1990s movie." + }, + { + "id": "highlight", + "type": "subfeature", + "link": "features/highlight", + "name": "Highlight", + "description": "Highlight makes important content stand out, either with font color or background fill." + }, + { + "id": "italic", + "type": "subfeature", + "link": "features/basic-styles", + "name": "Italic", + "description": "Making the letters look like seashore pines." + }, + { + "id": "strikethrough", + "type": "subfeature", + "link": "features/basic-styles", + "name": "Strikethrough", + "description": "Never mind, will not need it anymore." + }, + { + "id": "styles", + "type": "subfeature", + "link": "features/style", + "name": "Styles", + "description": "The styles feature lets you easily apply predefined styles available for block and inline content." + }, + { + "id": "subscript", + "type": "subfeature", + "link": "features/basic-styles", + "name": "Subscript", + "description": "Fine print at the bottom, like atom numbers." + }, + { + "id": "superscript", + "type": "subfeature", + "link": "features/basic-styles", + "name": "Superscript", + "description": "Fine print on top, like references in a book." + }, + { + "id": "underline", + "type": "subfeature", + "link": "features/basic-styles", + "name": "Underline", + "description": "Stuff looks important, yo. Or like a link, too." + }, + { + "id": "undo-redo", + "type": "feature", + "link": "features/undo-redo", + "name": "Undo/redo", + "description": "Backtrack or repeat actions for editing purposes." + }, + { + "id": "asynchronous-collaboration", + "type": "feature", + "link": "features/collaboration", + "name": "Asynchronous collaboration", + "isPremium": true, + "description": "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." + }, + { + "id": "local-data-storage", + "type": "subfeature", + "link": "features/collaboration", + "name": "Local data storage", + "isPremium": true, + "description": "In asynchronous collaboration, data is maintained on the client's servers." + }, + { + "id": "comments", + "type": "feature", + "link": "features/comments", + "name": "Comments", + "isPremium": true, + "description": "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." + }, + { + "id": "comments-archive", + "type": "subfeature", + "link": "features/comments", + "name": "Comments archive", + "isPremium": true, + "description": "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." + }, + { + "id": "comments-outside-editor", + "type": "subfeature", + "link": "features/comments-outside-editor", + "name": "Comments outside editor", + "isPremium": true, + "description": "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." + }, + { + "id": "sidebar-modes", + "type": "subfeature", + "link": "features/annotations-display-mode", + "name": "Sidebar modes", + "isPremium": true, + "description": "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." + }, + { + "id": "mentions", + "type": "feature", + "link": "features/mentions", + "name": "Mentions", + "description": "The mention feature supports smart autocompletion triggered by user input. Typing a predetermined marker, like @ or #, prompts a panel to appear, offering autocomplete suggestions." + }, + { + "id": "real-time-collaboration", + "type": "feature", + "link": "features/real-time-collaboration", + "name": "Real-time collaboration", + "isPremium": true, + "description": "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." + }, + { + "id": "co-authoring", + "type": "subfeature", + "link": "features/users-in-real-time-collaboration", + "name": "Co-authoring", + "isPremium": true, + "description": "Multiple user real-time editing and content creation feature." + }, + { + "id": "on-premises", + "type": "subfeature", + "link": "@cs", + "name": "onpremises/index On-premises", + "isPremium": true, + "description": "On-premises real-time collaboration version to deploy to client's own infrastructure, includes a private cloud." + }, + { + "id": "saas", + "type": "subfeature", + "link": "@cs", + "name": "guides/collaboration/quick-start SaaS", + "isPremium": true, + "description": "Real-time collaboration provided as a service by CKSource." + }, + { + "id": "revision-history", + "type": "feature", + "link": "features/revision-history", + "name": "Revision history", + "isPremium": true, + "description": "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." + }, + { + "id": "track-changes", + "type": "feature", + "link": "features/track-changes", + "name": "Track changes", + "isPremium": true, + "description": "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." + }, + { + "id": "users-list-and-permissions", + "type": "feature", + "link": "features/users", + "name": "Users list and permissions", + "isPremium": true, + "description": "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." + }, + { + "id": "content-generation", + "type": "feature", + "link": "features/export-pdf", + "name": "Content generation", + "isPremium": true, + "description": "CKEditor 5 may be your universal starting point for generating content in several recognizable formats." + }, + { + "id": "export-to-pdf", + "type": "subfeature", + "link": "features/export-pdf", + "name": "Export to PDF", + "isPremium": true, + "description": "Create a PDF from in-editor content seamlessly. Customize headers and footers, include page breaks, embed images, and choose from various fonts." + }, + { + "id": "export-to-word", + "type": "subfeature", + "link": "features/export-word", + "name": "Export to Word", + "isPremium": true, + "description": "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." + }, + { + "id": "import-from-word", + "type": "subfeature", + "link": "features/import-word", + "name": "Import from Word", + "isPremium": true, + "description": "Effortlessly transform Word documents into clean HTML within CKEditor 5 while retaining the original styling, as well as comments and change tracking annotations." + }, + { + "id": "markdown-output", + "type": "feature", + "link": "features/markdown", + "name": "Markdown output", + "description": "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." + }, + { + "id": "media-embed", + "type": "feature", + "link": "features/media-embed", + "name": "Media embed", + "description": "Use the insert media button in the toolbar to embed media. Pasting a media URL directly into the editor content automatically embeds the media." + }, + { + "id": "paste-markdown", + "type": "feature", + "link": "features/paste-markdown", + "name": "Paste Markdown", + "description": "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." + }, + { + "id": "xml-output", + "type": "feature", + "link": "module:engine/dataprocessor/xmldataprocessor~XmlDataProcessor", + "name": "XML output", + "description": "Turn your content into parsable XML files for automation and cross-platform interoperability." + }, + { + "id": "document-outline", + "type": "feature", + "link": "features/document-outline", + "name": "Document outline", + "isPremium": true, + "description": "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." + }, + { + "id": "page-utilities", + "type": "feature", + "link": "features/minimap", + "name": "Page utilities", + "description": "CKEditor 5 Page Utilities enables users to dictate the structuring and print formatting of their documents effectively." + }, + { + "id": "content-minimap", + "type": "subfeature", + "link": "features/minimap", + "name": "Content minimap", + "description": "Offers a concise, birds-eye view of the document's content, allowing for quick navigation and content management." + }, + { + "id": "document-title", + "type": "subfeature", + "link": "features/title", + "name": "Document title", + "description": "Allows users to set and modify the document's title within the editing interface, ensuring accurate reflection of the contents." + }, + { + "id": "page-break", + "type": "subfeature", + "link": "features/page-break", + "name": "Page break", + "description": "Facilitates the insertion of manual breaks within the document, enabling the definition of page endings and beginnings for optimal layout and print clarity." + }, + { + "id": "pagination", + "type": "feature", + "link": "features/pagination", + "name": "Pagination", + "isPremium": true, + "description": "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." + }, + { + "id": "table-of-contents", + "type": "feature", + "link": "features/table-of-contents", + "name": "Table of contents", + "isPremium": true, + "description": "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." + }, + { + "id": "ai-assistant", + "type": "feature", + "link": "features/ai-assistant-overview", + "name": "AI Assistant", + "isPremium": true, + "description": "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." + }, + { + "id": "automation", + "type": "feature", + "link": "features/autoformat", + "name": "Automation", + "description": "Automate your workflow with CKEditor 5 automation tools, regardless of whether you write, link, or save!" + }, + { + "id": "autoformatting", + "type": "subfeature", + "link": "features/autoformat", + "name": "Autoformatting", + "description": "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." + }, + { + "id": "autolink", + "type": "subfeature", + "link": "features/link#autolink-feature", + "name": "Autolink", + "description": "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." + }, + { + "id": "automatic-text-transformation", + "type": "subfeature", + "link": "features/text-transformation", + "name": "Automatic text transformations", + "description": "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." + }, + { + "id": "autosave", + "type": "subfeature", + "link": "features/autosave", + "name": "Autosave", + "description": "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." + }, + { + "id": "case-change", + "type": "feature", + "link": "features/case-change", + "name": "Case change", + "isPremium": true, + "description": "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." + }, + { + "id": "find-and-replace", + "type": "feature", + "link": "features/find-and-replace", + "name": "Find and replace", + "description": "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." + }, + { + "id": "format-painter", + "type": "feature", + "link": "features/format-painter", + "name": "Format painter", + "isPremium": true, + "description": "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." + }, + { + "id": "keyboard-shortcuts", + "type": "feature", + "link": "features/accessibility#keyboard-shortcuts", + "name": "Keyboard shortcuts", + "description": "CKEditor 5 supports various keyboard shortcuts that boost productivity and provide necessary accessibility to screen reader users." + }, + { + "id": "mathtype", + "type": "feature", + "link": "features/math-equations", + "name": "MathType", + "isPremium": true, + "description": "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." + }, + { + "id": "merge-fields", + "type": "feature", + "link": "features/merge-fields", + "name": "Merge fields", + "isPremium": true, + "description": "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." + }, + { + "id": "paste-from-google-docs", + "type": "feature", + "link": "features/paste-from-google-docs", + "name": "Paste from Google Docs", + "description": "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." + }, + { + "id": "paste-from-office", + "type": "feature", + "link": "features/paste-from-office", + "name": "Paste from Office", + "description": "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." + }, + { + "id": "paste-from-office-enhanced", + "type": "feature", + "link": "features/paste-from-office-enhanced", + "name": "Paste from Office Enhanced", + "isPremium": true, + "description": "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." + }, + { + "id": "paste-plain-text", + "type": "feature", + "link": "features/paste-plain-text", + "name": "Paste plain text", + "description": "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." + }, + { + "id": "slash-commands", + "type": "feature", + "link": "features/slash-commands", + "name": "Slash commands", + "isPremium": true, + "description": "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." + }, + { + "id": "special-characters", + "type": "feature", + "link": "features/special-characters", + "name": "Special characters", + "description": "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." + }, + { + "id": "templates", + "type": "feature", + "link": "features/template", + "name": "Templates", + "isPremium": true, + "description": "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." + }, + { + "id": "editor-placeholder", + "type": "feature", + "link": "features/editor-placeholder", + "name": "Editor placeholder", + "description": "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." + }, + { + "id": "editor-ui-types", + "type": "feature", + "link": "getting-started/setup/editor-types", + "name": "Editor UI types", + "description": "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." + }, + { + "id": "balloon-block-editor", + "type": "subfeature", + "link": "getting-started/setup/editor-types#balloon-editor-and-balloon-block-editor", + "name": "Balloon block editor", + "description": "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." + }, + { + "id": "balloon-editor", + "type": "subfeature", + "link": "getting-started/setup/editor-types#balloon-editor-and-balloon-block-editor", + "name": "Balloon block editor", + "description": "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)." + }, + { + "id": "classic-editor", + "type": "subfeature", + "link": "getting-started/setup/editor-types#classic-editor", + "name": "Classic editor", + "description": "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." + }, + { + "id": "decoupled-editor", + "type": "subfeature", + "link": "getting-started/setup/editor-types#decoupled-editor-document", + "name": "Decoupled editor", + "description": "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." + }, + { + "id": "inline-editor", + "type": "subfeature", + "link": "getting-started/setup/editor-types#inline-editor", + "name": "Inline editor", + "description": "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." + }, + { + "id": "multi-root-editor", + "type": "subfeature", + "link": "getting-started/setup/editor-types#multi-root-editor", + "name": "Multi-root editor", + "description": "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." + }, + { + "id": "professionally-translated-language-packs", + "type": "feature", + "link": "getting-started/setup/ui-language", + "name": "Professionally translated language packs", + "description": "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" + }, + { + "id": "toolbar-and-menus", + "type": "feature", + "link": "getting-started/setup/toolbar", + "name": "Toolbar and menus", + "description": "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." + }, + { + "id": "balloon-toolbar", + "type": "subfeature", + "link": "getting-started/setup/toolbar#balloon-toolbar", + "name": "Balloon toolbar", + "description": "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." + }, + { + "id": "block-toolbar", + "type": "subfeature", + "link": "getting-started/setup/toolbar#block-toolbar", + "name": "Block toolbar", + "description": "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)." + }, + { + "id": "classic-toolbar", + "type": "subfeature", + "link": "getting-started/setup/toolbar#main-editor-toolbar", + "name": "Classic toolbar", + "description": "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." + }, + { + "id": "collapsible-toolbar", + "type": "subfeature", + "link": "getting-started/setup/toolbar#extended-toolbar-configuration-format", + "name": "Collapsible toolbar", + "description": "Collapsible toolbar for UI space efficiency." + }, + { + "id": "image-contextual-toolbar", + "type": "subfeature", + "link": "features/images-overview#image-contextual-toolbar", + "name": "Image contextual toolbar", + "description": "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." + }, + { + "id": "menu-bar", + "type": "subfeature", + "link": "getting-started/setup/menubar", + "name": "Menu bar", + "description": "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." + }, + { + "id": "multiline-toolbar", + "type": "subfeature", + "link": "getting-started/setup/toolbar#multiline-wrapping-toolbar", + "name": "Multiline toolbar", + "description": "Multiline toolbar for easy access to all functions." + }, + { + "id": "nesting-toolbars-in-dropdowns", + "type": "subfeature", + "link": "getting-started/setup/toolbar#grouping-toolbar-items-in-dropdowns-nested-toolbars", + "name": "Nesting toolbars in dropdowns", + "description": "Nested toolbars for space efficiency and task-oriented access." + }, + { + "id": "sidebar-annotations-bar", + "type": "subfeature", + "link": "features/annotations-display-mode#wide-sidebar", + "name": "Wide sidebar", + "description": "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." + }, + { + "id": "table-contextual-toolbar", + "type": "subfeature", + "link": "features/tables#table-contextual-toolbar", + "name": "Table contextual toolbar", + "description": "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." + }, + { + "id": "watchdog", + "type": "feature", + "link": "features/watchdog", + "name": "Watchdog", + "description": "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." + }, + { + "id": "accessibility-support", + "type": "feature", + "link": "features/accessibility", + "name": "Accessibility support", + "description": "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." + }, + { + "id": "read-only-support", + "type": "feature", + "link": "features/read-only", + "name": "Read-only support", + "description": "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." + }, + { + "id": "restricted-editing", + "type": "feature", + "link": "features/restricted-editing", + "name": "Restricted editing", + "description": "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." + }, + { + "id": "text-part-language", + "type": "feature", + "link": "features/language", + "name": "Text Part Language", + "description": "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." + }, + { + "id": "word-and-character-counter", + "type": "feature", + "link": "features/word-count", + "name": "Word and character counter", + "description": "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." + }, + { + "id": "wproofreader", + "type": "feature", + "link": "features/spelling-and-grammar-checking", + "name": "WProofreader", + "isPremium": true, + "description": "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." + }, + { + "id": "editor-sdk", + "type": "feature", + "link": "framework/index", + "name": "Editor SDK", + "description": "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." + }, + { + "id": "ckeditor5-inspector", + "type": "subfeature", + "link": "framework/development-tools/inspector", + "name": "CKEditor 5 inspector", + "description": "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}." + }, + { + "id": "cloud-services-rest-api", + "type": "subfeature", + "link": "@cs", + "name": "developer-resources/apis/overview Cloud Services REST API", + "description": "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." + }, + { + "id": "themes", + "type": "feature", + "link": "framework/theme-customization", + "name": "Themes", + "description": "The default theme of CKEditor 5 can be customized to match most visual integration requirements." + }, + { + "id": "ui-library", + "type": "feature", + "link": "framework/architecture/ui-library", + "name": "UI Library", + "description": "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." + }, + { + "id": "base64-upload-adapter", + "type": "feature", + "link": "features/base64-upload-adapter", + "name": "Base64 Upload Adapter", + "description": "Convert inserted images into Base64-encoded strings in the editor output. Images are stored with other content in the database without server-side processing." + }, + { + "id": "ckbox", + "type": "feature", + "link": "features/ckbox", + "name": "CKBox", + "isPremium": true, + "description": "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." + }, + { + "id": "ckfinder", + "type": "feature", + "link": "features/ckfinder", + "name": "CKFinder", + "isPremium": true, + "description": "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." + }, + { + "id": "custom-upload-adapter", + "type": "feature", + "link": "features/image-upload#implementing-your-own-upload-adapter", + "name": "Custom Upload Adapter", + "description": "Have your own file management solution? Use this adapter to integrate your preferred software with CKEditor." + }, + { + "id": "simple-upload-adapter", + "type": "feature", + "link": "features/simple-upload-adapter", + "name": "Simple Upload Adapter", + "description": "Upload images to your server using the XMLHttpRequest API with a minimal editor configuration." + } +] From 0759355a16e0dda4d021003286096f8979d0c7ba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotrek=20Koszuli=C5=84ski?= Date: Thu, 28 Nov 2024 16:33:39 +0100 Subject: [PATCH 05/20] Added capabilities. --- docs/_snippets/features-digest-source.json | 2216 ++++++++++---------- 1 file changed, 1135 insertions(+), 1081 deletions(-) diff --git a/docs/_snippets/features-digest-source.json b/docs/_snippets/features-digest-source.json index 62caa511135..6b8a0ae92b0 100644 --- a/docs/_snippets/features-digest-source.json +++ b/docs/_snippets/features-digest-source.json @@ -1,1085 +1,1139 @@ [ { - "id": "advanced-html-editing", - "type": "feature", - "link": "features/general-html-support", - "name": "Advanced HTML Editing", - "description": "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." - }, - { - "id": "full-page-html", - "type": "subfeature", - "link": "features/full-page-html", - "name": "Full page HTML", - "description": "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." - }, - { - "id": "general-html-support", - "type": "subfeature", - "link": "features/general-html-support", - "name": "General HTML Support (GHS)", - "description": "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." - }, - { - "id": "html-comment", - "type": "subfeature", - "link": "features/html-comments", - "name": "HTML comment", - "description": "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." - }, - { - "id": "html-embed", - "type": "subfeature", - "link": "features/html-embed", - "name": "HTML embed", - "description": "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." - }, - { - "id": "show-blocks", - "type": "subfeature", - "link": "features/show-blocks", - "name": "Show blocks", - "description": "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." - }, - { - "id": "source-editing", - "type": "subfeature", - "link": "features/source-editing", - "name": "Source editing", - "description": "The source editing feature lets you view and edit the source of your document." - }, - { - "id": "block-formatting", - "type": "feature", - "link": "features/block-quote", - "name": "Block formatting", - "description": "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." - }, - { - "id": "block-quotes", - "type": "subfeature", - "link": "features/block-quote", - "name": "Block quote", - "description": "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." - }, - { - "id": "headings-paragraph", - "type": "subfeature", - "link": "features/headings", - "name": "Headings/paragraph", - "description": "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." - }, - { - "id": "horizontal-line", - "type": "subfeature", - "link": "features/horizontal-line", - "name": "Horizontal line", - "description": "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." - }, - { - "id": "block-indentation", - "type": "subfeature", - "link": "features/indent", - "name": "Block indentation", - "description": "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." - }, - { - "id": "bookmark", - "type": "feature", - "link": "features/bookmarks", - "name": "Bookmarks", - "description": "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." - }, - { - "id": "clipboard", - "type": "feature", - "link": "framework/deep-dive/clipboard", - "name": "Clipboard", - "description": "Copy, cut, and paste content within the editor or from external sources." - }, - { - "id": "code-blocks", - "type": "feature", - "link": "features/code-blocks", - "name": "Code blocks", - "description": "Supports the insertion and management of pre-formatted code snippets with distinct styling." - }, - { - "id": "drag-and-drop", - "type": "feature", - "link": "features/drag-drop", - "name": "Drag and drop", - "description": "Rearrange elements within a document, including moving text blocks, images, or other content types." - }, - { - "id": "font-formatting", - "type": "feature", - "link": "features/font", - "name": "Font formatting", - "description": "The font feature lets you change font family, size, and color (including background color). All of these options are configurable." - }, - { - "id": "font-background-color", - "type": "subfeature", - "link": "features/font#configuring-the-font-color-and-font-background-color-features", - "name": "Font background color", - "description": "Effortlessly make the words stand out even more with a colored background." - }, - { - "id": "font-color", - "type": "subfeature", - "link": "features/font#configuring-the-font-color-and-font-background-color-features", - "name": "Font color", - "description": "Effortlessly make the letters stand out with their own color." - }, - { - "id": "font-family", - "type": "subfeature", - "link": "features/font#configuring-the-font-family-feature", - "name": "Font family", - "description": "Choose from a predefined set of fonts, depending on the type of content and its destination - print, screen, etc." - }, - { - "id": "font-size", - "type": "subfeature", - "link": "features/font#configuring-the-font-size-feature", - "name": "Font size", - "description": "Easily control the size of the letters." - }, - { - "id": "image", - "type": "feature", - "link": "features/images-overview", - "name": "Image", - "description": "The image feature allows adding images of various kinds to the rich content inside the editor. A large set of subfeature background-grays 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." - }, - { - "id": "image-all-text", - "type": "subfeature", - "link": "features/images-text-alternative", - "name": "Image alt text", - "description": "Add description text, AKA alternative text, for images. Alt text improves accessibility by telling screen readers and search engines what the image depicts." - }, - { - "id": "image-captions", - "type": "subfeature", - "link": "features/images-captions", - "name": "Image captions", - "description": "Add optional captions for images, which are shown below the picture." - }, - { - "id": "image-insert-via-url", - "type": "subfeature", - "link": "features/images-inserting", - "name": "Image insert via URL", - "description": "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." - }, - { - "id": "image-linking", - "type": "subfeature", - "link": "features/images-linking", - "name": "Image linking", - "description": "The {@link module:link/linkimage~LinkImage} plugin lets you use images as links." - }, - { - "id": "image-resize", - "type": "subfeature", - "link": "features/images-resizing", - "name": "Image resize", - "description": "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." - }, - { - "id": "image-styles", - "type": "subfeature", - "link": "features/images-styles", - "name": "Image styles", - "description": "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." - }, - { - "id": "image-upload", - "type": "subfeature", - "link": "features/image-upload", - "name": "Image upload", - "description": "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." - }, - { - "id": "responsive-images", - "type": "subfeature", - "link": "features/images-responsive", - "name": "Responsive images", - "description": "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." - }, - { - "id": "links", - "type": "feature", - "link": "features/link", - "name": "Links", - "description": "Facilitates the addition of hyperlinks to text, automatically converting typed or pasted URLs into clickable links, and allowing manual insertion and editing of links." - }, - { - "id": "lists", - "type": "feature", - "link": "features/lists", - "name": "Lists", - "description": "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." - }, - { - "id": "list-indentation", - "type": "subfeature", - "link": "features/lists-editing#indenting-lists", - "name": "List indentation", - "description": "Besides controlling {@link features/indent text block indentation}, the indent and outdent buttons allow for indenting list items (nesting them)." - }, - { - "id": "list-start-index", - "type": "subfeature", - "link": "features/lists#list-start-index", - "name": "List start index", - "description": "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." - }, - { - "id": "list-styles", - "type": "subfeature", - "link": "features/lists#list-styles", - "name": "List styles", - "description": "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." - }, - { - "id": "multi-level-lists", - "type": "subfeature", - "link": "features/multi-level-lists", - "name": "Multi-level lists", - "isPremium": true, - "description": "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." - }, - { - "id": "nested-lists", - "type": "subfeature", - "link": "features/lists-editing#indenting-lists", - "name": "Nested lists", - "description": "Besides controlling {@link features/indent text block indentation}, the indent and outdent buttons allow for indenting list items (nesting them)." - }, - { - "id": "ordered-lists", - "type": "subfeature", - "link": "features/lists", - "name": "Ordered lists", - "description": "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." - }, - { - "id": "reversed-list", - "type": "subfeature", - "link": "features/lists#reversed-list", - "name": "Reversed list", - "description": "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)." - }, - { - "id": "to-do-lists", - "type": "subfeature", - "link": "features/todo-lists", - "name": "To-do lists", - "description": "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." - }, - { - "id": "unordered-lists", - "type": "subfeature", - "link": "features/lists", - "name": "Unordered lists", - "description": "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." - }, - { - "id": "mermaid", - "type": "feature", - "link": "features/mermaid", - "name": "Mermaid", - "isExperimental": true, - "description": "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." - }, - { - "id": "remove-formatting", - "type": "feature", - "link": "features/remove-format", - "name": "Remove formatting", - "description": "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)." - }, - { - "id": "select-all", - "type": "feature", - "link": "features/select-all", - "name": "Select all", - "description": "Enables the selection of all content within the editor with a single command or shortcut." - }, - { - "id": "tables", - "type": "feature", - "link": "features/tables", - "name": "Tables", - "description": "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." - }, - { - "id": "columns-resizing", - "type": "subfeature", - "link": "features/tables-resize", - "name": "Columns resizing", - "description": "The {@link module:table/tablecolumnresize~TableColumnResize} plugin lets you resize tables and individual table columns. It gives you complete control over column width." - }, - { - "id": "insert-delete-columns-and-rows", - "type": "subfeature", - "link": "features/tables#table-contextual-toolbar", - "name": "Insert/delete columns & rows", - "description": "The basic table features allow users to insert tables into content, add or remove columns and rows and merge or split cells." - }, - { - "id": "merge-and-split-cells", - "type": "subfeature", - "link": "features/tables#table-contextual-toolbar", - "name": "Merge & split cells", - "description": "The basic table features allow users to insert tables into content, add or remove columns and rows, and merge or split cells." - }, - { - "id": "nesting", - "type": "subfeature", - "link": "features/tables#nesting-tables", - "name": "Nesting", - "description": "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." - }, - { - "id": "styling-tables-and-cells", - "type": "subfeature", - "link": "features/tables-styling", - "name": "Styling tables & cells", - "description": "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." - }, - { - "id": "table-headers", - "type": "subfeature", - "link": "features/tables#default-table-headers", - "name": "Table headers", - "description": "To make every inserted table have n number of rows and columns as table headers by default, set an optional table configuration property defaultHeadings." - }, - { - "id": "table-selection", - "type": "subfeature", - "link": "features/tables#table-selection", - "name": "Table selection", - "description": "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." - }, - { - "id": "tables-caption", - "type": "subfeature", - "link": "features/tables-caption", - "name": "Tables caption", - "description": "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." - }, - { - "id": "text-alignment", - "type": "feature", - "link": "features/text-alignment", - "name": "Text alignment", - "description": "Allows the adjustment of text alignment to the left, right, center, or justify and permits the alteration of indentation." - }, - { - "id": "text-formatting", - "type": "feature", - "link": "features/basic-styles", - "name": "Text formatting", - "description": "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." - }, - { - "id": "bold", - "type": "subfeature", - "link": "features/basic-styles", - "name": "Bold", - "description": "Making the letters look like the good time were never gone." - }, - { - "id": "code", - "type": "subfeature", - "link": "features/basic-styles", - "name": "Code", - "description": "Snippet look like a terminal from the 1990s movie." - }, - { - "id": "highlight", - "type": "subfeature", - "link": "features/highlight", - "name": "Highlight", - "description": "Highlight makes important content stand out, either with font color or background fill." - }, - { - "id": "italic", - "type": "subfeature", - "link": "features/basic-styles", - "name": "Italic", - "description": "Making the letters look like seashore pines." - }, - { - "id": "strikethrough", - "type": "subfeature", - "link": "features/basic-styles", - "name": "Strikethrough", - "description": "Never mind, will not need it anymore." - }, - { - "id": "styles", - "type": "subfeature", - "link": "features/style", - "name": "Styles", - "description": "The styles feature lets you easily apply predefined styles available for block and inline content." - }, - { - "id": "subscript", - "type": "subfeature", - "link": "features/basic-styles", - "name": "Subscript", - "description": "Fine print at the bottom, like atom numbers." - }, - { - "id": "superscript", - "type": "subfeature", - "link": "features/basic-styles", - "name": "Superscript", - "description": "Fine print on top, like references in a book." - }, - { - "id": "underline", - "type": "subfeature", - "link": "features/basic-styles", - "name": "Underline", - "description": "Stuff looks important, yo. Or like a link, too." - }, - { - "id": "undo-redo", - "type": "feature", - "link": "features/undo-redo", - "name": "Undo/redo", - "description": "Backtrack or repeat actions for editing purposes." - }, - { - "id": "asynchronous-collaboration", - "type": "feature", - "link": "features/collaboration", - "name": "Asynchronous collaboration", - "isPremium": true, - "description": "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." - }, - { - "id": "local-data-storage", - "type": "subfeature", - "link": "features/collaboration", - "name": "Local data storage", - "isPremium": true, - "description": "In asynchronous collaboration, data is maintained on the client's servers." - }, - { - "id": "comments", - "type": "feature", - "link": "features/comments", - "name": "Comments", - "isPremium": true, - "description": "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." - }, - { - "id": "comments-archive", - "type": "subfeature", - "link": "features/comments", - "name": "Comments archive", - "isPremium": true, - "description": "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." - }, - { - "id": "comments-outside-editor", - "type": "subfeature", - "link": "features/comments-outside-editor", - "name": "Comments outside editor", - "isPremium": true, - "description": "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." - }, - { - "id": "sidebar-modes", - "type": "subfeature", - "link": "features/annotations-display-mode", - "name": "Sidebar modes", - "isPremium": true, - "description": "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." - }, - { - "id": "mentions", - "type": "feature", - "link": "features/mentions", - "name": "Mentions", - "description": "The mention feature supports smart autocompletion triggered by user input. Typing a predetermined marker, like @ or #, prompts a panel to appear, offering autocomplete suggestions." - }, - { - "id": "real-time-collaboration", - "type": "feature", - "link": "features/real-time-collaboration", - "name": "Real-time collaboration", - "isPremium": true, - "description": "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." - }, - { - "id": "co-authoring", - "type": "subfeature", - "link": "features/users-in-real-time-collaboration", - "name": "Co-authoring", - "isPremium": true, - "description": "Multiple user real-time editing and content creation feature." - }, - { - "id": "on-premises", - "type": "subfeature", - "link": "@cs", - "name": "onpremises/index On-premises", - "isPremium": true, - "description": "On-premises real-time collaboration version to deploy to client's own infrastructure, includes a private cloud." - }, - { - "id": "saas", - "type": "subfeature", - "link": "@cs", - "name": "guides/collaboration/quick-start SaaS", - "isPremium": true, - "description": "Real-time collaboration provided as a service by CKSource." - }, - { - "id": "revision-history", - "type": "feature", - "link": "features/revision-history", - "name": "Revision history", - "isPremium": true, - "description": "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." - }, - { - "id": "track-changes", - "type": "feature", - "link": "features/track-changes", - "name": "Track changes", - "isPremium": true, - "description": "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." - }, - { - "id": "users-list-and-permissions", - "type": "feature", - "link": "features/users", - "name": "Users list and permissions", - "isPremium": true, - "description": "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." - }, - { - "id": "content-generation", - "type": "feature", - "link": "features/export-pdf", - "name": "Content generation", - "isPremium": true, - "description": "CKEditor 5 may be your universal starting point for generating content in several recognizable formats." - }, - { - "id": "export-to-pdf", - "type": "subfeature", - "link": "features/export-pdf", - "name": "Export to PDF", - "isPremium": true, - "description": "Create a PDF from in-editor content seamlessly. Customize headers and footers, include page breaks, embed images, and choose from various fonts." - }, - { - "id": "export-to-word", - "type": "subfeature", - "link": "features/export-word", - "name": "Export to Word", - "isPremium": true, - "description": "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." - }, - { - "id": "import-from-word", - "type": "subfeature", - "link": "features/import-word", - "name": "Import from Word", - "isPremium": true, - "description": "Effortlessly transform Word documents into clean HTML within CKEditor 5 while retaining the original styling, as well as comments and change tracking annotations." - }, - { - "id": "markdown-output", - "type": "feature", - "link": "features/markdown", - "name": "Markdown output", - "description": "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." - }, - { - "id": "media-embed", - "type": "feature", - "link": "features/media-embed", - "name": "Media embed", - "description": "Use the insert media button in the toolbar to embed media. Pasting a media URL directly into the editor content automatically embeds the media." - }, - { - "id": "paste-markdown", - "type": "feature", - "link": "features/paste-markdown", - "name": "Paste Markdown", - "description": "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." - }, - { - "id": "xml-output", - "type": "feature", - "link": "module:engine/dataprocessor/xmldataprocessor~XmlDataProcessor", - "name": "XML output", - "description": "Turn your content into parsable XML files for automation and cross-platform interoperability." - }, - { - "id": "document-outline", - "type": "feature", - "link": "features/document-outline", - "name": "Document outline", - "isPremium": true, - "description": "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." - }, - { - "id": "page-utilities", - "type": "feature", - "link": "features/minimap", - "name": "Page utilities", - "description": "CKEditor 5 Page Utilities enables users to dictate the structuring and print formatting of their documents effectively." - }, - { - "id": "content-minimap", - "type": "subfeature", - "link": "features/minimap", - "name": "Content minimap", - "description": "Offers a concise, birds-eye view of the document's content, allowing for quick navigation and content management." - }, - { - "id": "document-title", - "type": "subfeature", - "link": "features/title", - "name": "Document title", - "description": "Allows users to set and modify the document's title within the editing interface, ensuring accurate reflection of the contents." - }, - { - "id": "page-break", - "type": "subfeature", - "link": "features/page-break", - "name": "Page break", - "description": "Facilitates the insertion of manual breaks within the document, enabling the definition of page endings and beginnings for optimal layout and print clarity." - }, - { - "id": "pagination", - "type": "feature", - "link": "features/pagination", - "name": "Pagination", - "isPremium": true, - "description": "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." - }, - { - "id": "table-of-contents", - "type": "feature", - "link": "features/table-of-contents", - "name": "Table of contents", - "isPremium": true, - "description": "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." - }, - { - "id": "ai-assistant", - "type": "feature", - "link": "features/ai-assistant-overview", - "name": "AI Assistant", - "isPremium": true, - "description": "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." - }, - { - "id": "automation", - "type": "feature", - "link": "features/autoformat", - "name": "Automation", - "description": "Automate your workflow with CKEditor 5 automation tools, regardless of whether you write, link, or save!" - }, - { - "id": "autoformatting", - "type": "subfeature", - "link": "features/autoformat", - "name": "Autoformatting", - "description": "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." - }, - { - "id": "autolink", - "type": "subfeature", - "link": "features/link#autolink-feature", - "name": "Autolink", - "description": "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." - }, - { - "id": "automatic-text-transformation", - "type": "subfeature", - "link": "features/text-transformation", - "name": "Automatic text transformations", - "description": "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." - }, - { - "id": "autosave", - "type": "subfeature", - "link": "features/autosave", - "name": "Autosave", - "description": "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." - }, - { - "id": "case-change", - "type": "feature", - "link": "features/case-change", - "name": "Case change", - "isPremium": true, - "description": "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." - }, - { - "id": "find-and-replace", - "type": "feature", - "link": "features/find-and-replace", - "name": "Find and replace", - "description": "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." - }, - { - "id": "format-painter", - "type": "feature", - "link": "features/format-painter", - "name": "Format painter", - "isPremium": true, - "description": "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." - }, - { - "id": "keyboard-shortcuts", - "type": "feature", - "link": "features/accessibility#keyboard-shortcuts", - "name": "Keyboard shortcuts", - "description": "CKEditor 5 supports various keyboard shortcuts that boost productivity and provide necessary accessibility to screen reader users." - }, - { - "id": "mathtype", - "type": "feature", - "link": "features/math-equations", - "name": "MathType", - "isPremium": true, - "description": "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." - }, - { - "id": "merge-fields", - "type": "feature", - "link": "features/merge-fields", - "name": "Merge fields", - "isPremium": true, - "description": "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." - }, - { - "id": "paste-from-google-docs", - "type": "feature", - "link": "features/paste-from-google-docs", - "name": "Paste from Google Docs", - "description": "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." - }, - { - "id": "paste-from-office", - "type": "feature", - "link": "features/paste-from-office", - "name": "Paste from Office", - "description": "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." - }, - { - "id": "paste-from-office-enhanced", - "type": "feature", - "link": "features/paste-from-office-enhanced", - "name": "Paste from Office Enhanced", - "isPremium": true, - "description": "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." - }, - { - "id": "paste-plain-text", - "type": "feature", - "link": "features/paste-plain-text", - "name": "Paste plain text", - "description": "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." - }, - { - "id": "slash-commands", - "type": "feature", - "link": "features/slash-commands", - "name": "Slash commands", - "isPremium": true, - "description": "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." - }, - { - "id": "special-characters", - "type": "feature", - "link": "features/special-characters", - "name": "Special characters", - "description": "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." - }, - { - "id": "templates", - "type": "feature", - "link": "features/template", - "name": "Templates", - "isPremium": true, - "description": "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." - }, - { - "id": "editor-placeholder", - "type": "feature", - "link": "features/editor-placeholder", - "name": "Editor placeholder", - "description": "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." - }, - { - "id": "editor-ui-types", - "type": "feature", - "link": "getting-started/setup/editor-types", - "name": "Editor UI types", - "description": "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." - }, - { - "id": "balloon-block-editor", - "type": "subfeature", - "link": "getting-started/setup/editor-types#balloon-editor-and-balloon-block-editor", - "name": "Balloon block editor", - "description": "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." - }, - { - "id": "balloon-editor", - "type": "subfeature", - "link": "getting-started/setup/editor-types#balloon-editor-and-balloon-block-editor", - "name": "Balloon block editor", - "description": "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)." - }, - { - "id": "classic-editor", - "type": "subfeature", - "link": "getting-started/setup/editor-types#classic-editor", - "name": "Classic editor", - "description": "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." - }, - { - "id": "decoupled-editor", - "type": "subfeature", - "link": "getting-started/setup/editor-types#decoupled-editor-document", - "name": "Decoupled editor", - "description": "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." - }, - { - "id": "inline-editor", - "type": "subfeature", - "link": "getting-started/setup/editor-types#inline-editor", - "name": "Inline editor", - "description": "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." - }, - { - "id": "multi-root-editor", - "type": "subfeature", - "link": "getting-started/setup/editor-types#multi-root-editor", - "name": "Multi-root editor", - "description": "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." - }, - { - "id": "professionally-translated-language-packs", - "type": "feature", - "link": "getting-started/setup/ui-language", - "name": "Professionally translated language packs", - "description": "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" - }, - { - "id": "toolbar-and-menus", - "type": "feature", - "link": "getting-started/setup/toolbar", - "name": "Toolbar and menus", - "description": "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." - }, - { - "id": "balloon-toolbar", - "type": "subfeature", - "link": "getting-started/setup/toolbar#balloon-toolbar", - "name": "Balloon toolbar", - "description": "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." - }, - { - "id": "block-toolbar", - "type": "subfeature", - "link": "getting-started/setup/toolbar#block-toolbar", - "name": "Block toolbar", - "description": "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)." - }, - { - "id": "classic-toolbar", - "type": "subfeature", - "link": "getting-started/setup/toolbar#main-editor-toolbar", - "name": "Classic toolbar", - "description": "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." - }, - { - "id": "collapsible-toolbar", - "type": "subfeature", - "link": "getting-started/setup/toolbar#extended-toolbar-configuration-format", - "name": "Collapsible toolbar", - "description": "Collapsible toolbar for UI space efficiency." - }, - { - "id": "image-contextual-toolbar", - "type": "subfeature", - "link": "features/images-overview#image-contextual-toolbar", - "name": "Image contextual toolbar", - "description": "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." - }, - { - "id": "menu-bar", - "type": "subfeature", - "link": "getting-started/setup/menubar", - "name": "Menu bar", - "description": "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." - }, - { - "id": "multiline-toolbar", - "type": "subfeature", - "link": "getting-started/setup/toolbar#multiline-wrapping-toolbar", - "name": "Multiline toolbar", - "description": "Multiline toolbar for easy access to all functions." - }, - { - "id": "nesting-toolbars-in-dropdowns", - "type": "subfeature", - "link": "getting-started/setup/toolbar#grouping-toolbar-items-in-dropdowns-nested-toolbars", - "name": "Nesting toolbars in dropdowns", - "description": "Nested toolbars for space efficiency and task-oriented access." - }, - { - "id": "sidebar-annotations-bar", - "type": "subfeature", - "link": "features/annotations-display-mode#wide-sidebar", - "name": "Wide sidebar", - "description": "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." - }, - { - "id": "table-contextual-toolbar", - "type": "subfeature", - "link": "features/tables#table-contextual-toolbar", - "name": "Table contextual toolbar", - "description": "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." - }, - { - "id": "watchdog", - "type": "feature", - "link": "features/watchdog", - "name": "Watchdog", - "description": "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." - }, - { - "id": "accessibility-support", - "type": "feature", - "link": "features/accessibility", - "name": "Accessibility support", - "description": "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." - }, - { - "id": "read-only-support", - "type": "feature", - "link": "features/read-only", - "name": "Read-only support", - "description": "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." - }, - { - "id": "restricted-editing", - "type": "feature", - "link": "features/restricted-editing", - "name": "Restricted editing", - "description": "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." - }, - { - "id": "text-part-language", - "type": "feature", - "link": "features/language", - "name": "Text Part Language", - "description": "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." - }, - { - "id": "word-and-character-counter", - "type": "feature", - "link": "features/word-count", - "name": "Word and character counter", - "description": "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." - }, - { - "id": "wproofreader", - "type": "feature", - "link": "features/spelling-and-grammar-checking", - "name": "WProofreader", - "isPremium": true, - "description": "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." - }, - { - "id": "editor-sdk", - "type": "feature", - "link": "framework/index", - "name": "Editor SDK", - "description": "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." - }, - { - "id": "ckeditor5-inspector", - "type": "subfeature", - "link": "framework/development-tools/inspector", - "name": "CKEditor 5 inspector", - "description": "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}." - }, - { - "id": "cloud-services-rest-api", - "type": "subfeature", - "link": "@cs", - "name": "developer-resources/apis/overview Cloud Services REST API", - "description": "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." - }, - { - "id": "themes", - "type": "feature", - "link": "framework/theme-customization", - "name": "Themes", - "description": "The default theme of CKEditor 5 can be customized to match most visual integration requirements." - }, - { - "id": "ui-library", - "type": "feature", - "link": "framework/architecture/ui-library", - "name": "UI Library", - "description": "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." - }, - { - "id": "base64-upload-adapter", - "type": "feature", - "link": "features/base64-upload-adapter", - "name": "Base64 Upload Adapter", - "description": "Convert inserted images into Base64-encoded strings in the editor output. Images are stored with other content in the database without server-side processing." - }, - { - "id": "ckbox", - "type": "feature", - "link": "features/ckbox", - "name": "CKBox", - "isPremium": true, - "description": "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." - }, - { - "id": "ckfinder", - "type": "feature", - "link": "features/ckfinder", - "name": "CKFinder", - "isPremium": true, - "description": "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." - }, - { - "id": "custom-upload-adapter", - "type": "feature", - "link": "features/image-upload#implementing-your-own-upload-adapter", - "name": "Custom Upload Adapter", - "description": "Have your own file management solution? Use this adapter to integrate your preferred software with CKEditor." - }, - { - "id": "simple-upload-adapter", - "type": "feature", - "link": "features/simple-upload-adapter", - "name": "Simple Upload Adapter", - "description": "Upload images to your server using the XMLHttpRequest API with a minimal editor configuration." + "name": "Core editing", + "description": "Core editing capability provides tools to create, edit, and style content. Here are essentials that every writer needs in their tool belt, like bold or italics. There is also something for coders - advanced HTML editing capabilities where you can directly edit HTML elements.", + "features": [ + { + "id": "advanced-html-editing", + "type": "feature", + "link": "features/general-html-support", + "name": "Advanced HTML Editing", + "description": "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." + }, + { + "id": "full-page-html", + "type": "subfeature", + "link": "features/full-page-html", + "name": "Full page HTML", + "description": "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." + }, + { + "id": "general-html-support", + "type": "subfeature", + "link": "features/general-html-support", + "name": "General HTML Support (GHS)", + "description": "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." + }, + { + "id": "html-comment", + "type": "subfeature", + "link": "features/html-comments", + "name": "HTML comment", + "description": "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." + }, + { + "id": "html-embed", + "type": "subfeature", + "link": "features/html-embed", + "name": "HTML embed", + "description": "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." + }, + { + "id": "show-blocks", + "type": "subfeature", + "link": "features/show-blocks", + "name": "Show blocks", + "description": "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." + }, + { + "id": "source-editing", + "type": "subfeature", + "link": "features/source-editing", + "name": "Source editing", + "description": "The source editing feature lets you view and edit the source of your document." + }, + { + "id": "block-formatting", + "type": "feature", + "link": "features/block-quote", + "name": "Block formatting", + "description": "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." + }, + { + "id": "block-quotes", + "type": "subfeature", + "link": "features/block-quote", + "name": "Block quote", + "description": "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." + }, + { + "id": "headings-paragraph", + "type": "subfeature", + "link": "features/headings", + "name": "Headings/paragraph", + "description": "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." + }, + { + "id": "horizontal-line", + "type": "subfeature", + "link": "features/horizontal-line", + "name": "Horizontal line", + "description": "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." + }, + { + "id": "block-indentation", + "type": "subfeature", + "link": "features/indent", + "name": "Block indentation", + "description": "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." + }, + { + "id": "bookmark", + "type": "feature", + "link": "features/bookmarks", + "name": "Bookmarks", + "description": "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." + }, + { + "id": "clipboard", + "type": "feature", + "link": "framework/deep-dive/clipboard", + "name": "Clipboard", + "description": "Copy, cut, and paste content within the editor or from external sources." + }, + { + "id": "code-blocks", + "type": "feature", + "link": "features/code-blocks", + "name": "Code blocks", + "description": "Supports the insertion and management of pre-formatted code snippets with distinct styling." + }, + { + "id": "drag-and-drop", + "type": "feature", + "link": "features/drag-drop", + "name": "Drag and drop", + "description": "Rearrange elements within a document, including moving text blocks, images, or other content types." + }, + { + "id": "font-formatting", + "type": "feature", + "link": "features/font", + "name": "Font formatting", + "description": "The font feature lets you change font family, size, and color (including background color). All of these options are configurable." + }, + { + "id": "font-background-color", + "type": "subfeature", + "link": "features/font#configuring-the-font-color-and-font-background-color-features", + "name": "Font background color", + "description": "Effortlessly make the words stand out even more with a colored background." + }, + { + "id": "font-color", + "type": "subfeature", + "link": "features/font#configuring-the-font-color-and-font-background-color-features", + "name": "Font color", + "description": "Effortlessly make the letters stand out with their own color." + }, + { + "id": "font-family", + "type": "subfeature", + "link": "features/font#configuring-the-font-family-feature", + "name": "Font family", + "description": "Choose from a predefined set of fonts, depending on the type of content and its destination - print, screen, etc." + }, + { + "id": "font-size", + "type": "subfeature", + "link": "features/font#configuring-the-font-size-feature", + "name": "Font size", + "description": "Easily control the size of the letters." + }, + { + "id": "image", + "type": "feature", + "link": "features/images-overview", + "name": "Image", + "description": "The image feature allows adding images of various kinds to the rich content inside the editor. A large set of subfeature background-grays 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." + }, + { + "id": "image-all-text", + "type": "subfeature", + "link": "features/images-text-alternative", + "name": "Image alt text", + "description": "Add description text, AKA alternative text, for images. Alt text improves accessibility by telling screen readers and search engines what the image depicts." + }, + { + "id": "image-captions", + "type": "subfeature", + "link": "features/images-captions", + "name": "Image captions", + "description": "Add optional captions for images, which are shown below the picture." + }, + { + "id": "image-insert-via-url", + "type": "subfeature", + "link": "features/images-inserting", + "name": "Image insert via URL", + "description": "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." + }, + { + "id": "image-linking", + "type": "subfeature", + "link": "features/images-linking", + "name": "Image linking", + "description": "The {@link module:link/linkimage~LinkImage} plugin lets you use images as links." + }, + { + "id": "image-resize", + "type": "subfeature", + "link": "features/images-resizing", + "name": "Image resize", + "description": "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." + }, + { + "id": "image-styles", + "type": "subfeature", + "link": "features/images-styles", + "name": "Image styles", + "description": "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." + }, + { + "id": "image-upload", + "type": "subfeature", + "link": "features/image-upload", + "name": "Image upload", + "description": "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." + }, + { + "id": "responsive-images", + "type": "subfeature", + "link": "features/images-responsive", + "name": "Responsive images", + "description": "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." + }, + { + "id": "links", + "type": "feature", + "link": "features/link", + "name": "Links", + "description": "Facilitates the addition of hyperlinks to text, automatically converting typed or pasted URLs into clickable links, and allowing manual insertion and editing of links." + }, + { + "id": "lists", + "type": "feature", + "link": "features/lists", + "name": "Lists", + "description": "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." + }, + { + "id": "list-indentation", + "type": "subfeature", + "link": "features/lists-editing#indenting-lists", + "name": "List indentation", + "description": "Besides controlling {@link features/indent text block indentation}, the indent and outdent buttons allow for indenting list items (nesting them)." + }, + { + "id": "list-start-index", + "type": "subfeature", + "link": "features/lists#list-start-index", + "name": "List start index", + "description": "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." + }, + { + "id": "list-styles", + "type": "subfeature", + "link": "features/lists#list-styles", + "name": "List styles", + "description": "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." + }, + { + "id": "multi-level-lists", + "type": "subfeature", + "link": "features/multi-level-lists", + "name": "Multi-level lists", + "isPremium": true, + "description": "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." + }, + { + "id": "nested-lists", + "type": "subfeature", + "link": "features/lists-editing#indenting-lists", + "name": "Nested lists", + "description": "Besides controlling {@link features/indent text block indentation}, the indent and outdent buttons allow for indenting list items (nesting them)." + }, + { + "id": "ordered-lists", + "type": "subfeature", + "link": "features/lists", + "name": "Ordered lists", + "description": "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." + }, + { + "id": "reversed-list", + "type": "subfeature", + "link": "features/lists#reversed-list", + "name": "Reversed list", + "description": "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)." + }, + { + "id": "to-do-lists", + "type": "subfeature", + "link": "features/todo-lists", + "name": "To-do lists", + "description": "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." + }, + { + "id": "unordered-lists", + "type": "subfeature", + "link": "features/lists", + "name": "Unordered lists", + "description": "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." + }, + { + "id": "mermaid", + "type": "feature", + "link": "features/mermaid", + "name": "Mermaid", + "isExperimental": true, + "description": "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." + }, + { + "id": "remove-formatting", + "type": "feature", + "link": "features/remove-format", + "name": "Remove formatting", + "description": "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)." + }, + { + "id": "select-all", + "type": "feature", + "link": "features/select-all", + "name": "Select all", + "description": "Enables the selection of all content within the editor with a single command or shortcut." + }, + { + "id": "tables", + "type": "feature", + "link": "features/tables", + "name": "Tables", + "description": "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." + }, + { + "id": "columns-resizing", + "type": "subfeature", + "link": "features/tables-resize", + "name": "Columns resizing", + "description": "The {@link module:table/tablecolumnresize~TableColumnResize} plugin lets you resize tables and individual table columns. It gives you complete control over column width." + }, + { + "id": "insert-delete-columns-and-rows", + "type": "subfeature", + "link": "features/tables#table-contextual-toolbar", + "name": "Insert/delete columns & rows", + "description": "The basic table features allow users to insert tables into content, add or remove columns and rows and merge or split cells." + }, + { + "id": "merge-and-split-cells", + "type": "subfeature", + "link": "features/tables#table-contextual-toolbar", + "name": "Merge & split cells", + "description": "The basic table features allow users to insert tables into content, add or remove columns and rows, and merge or split cells." + }, + { + "id": "nesting", + "type": "subfeature", + "link": "features/tables#nesting-tables", + "name": "Nesting", + "description": "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." + }, + { + "id": "styling-tables-and-cells", + "type": "subfeature", + "link": "features/tables-styling", + "name": "Styling tables & cells", + "description": "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." + }, + { + "id": "table-headers", + "type": "subfeature", + "link": "features/tables#default-table-headers", + "name": "Table headers", + "description": "To make every inserted table have n number of rows and columns as table headers by default, set an optional table configuration property defaultHeadings." + }, + { + "id": "table-selection", + "type": "subfeature", + "link": "features/tables#table-selection", + "name": "Table selection", + "description": "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." + }, + { + "id": "tables-caption", + "type": "subfeature", + "link": "features/tables-caption", + "name": "Tables caption", + "description": "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." + }, + { + "id": "text-alignment", + "type": "feature", + "link": "features/text-alignment", + "name": "Text alignment", + "description": "Allows the adjustment of text alignment to the left, right, center, or justify and permits the alteration of indentation." + }, + { + "id": "text-formatting", + "type": "feature", + "link": "features/basic-styles", + "name": "Text formatting", + "description": "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." + }, + { + "id": "bold", + "type": "subfeature", + "link": "features/basic-styles", + "name": "Bold", + "description": "Making the letters look like the good time were never gone." + }, + { + "id": "code", + "type": "subfeature", + "link": "features/basic-styles", + "name": "Code", + "description": "Snippet look like a terminal from the 1990s movie." + }, + { + "id": "highlight", + "type": "subfeature", + "link": "features/highlight", + "name": "Highlight", + "description": "Highlight makes important content stand out, either with font color or background fill." + }, + { + "id": "italic", + "type": "subfeature", + "link": "features/basic-styles", + "name": "Italic", + "description": "Making the letters look like seashore pines." + }, + { + "id": "strikethrough", + "type": "subfeature", + "link": "features/basic-styles", + "name": "Strikethrough", + "description": "Never mind, will not need it anymore." + }, + { + "id": "styles", + "type": "subfeature", + "link": "features/style", + "name": "Styles", + "description": "The styles feature lets you easily apply predefined styles available for block and inline content." + }, + { + "id": "subscript", + "type": "subfeature", + "link": "features/basic-styles", + "name": "Subscript", + "description": "Fine print at the bottom, like atom numbers." + }, + { + "id": "superscript", + "type": "subfeature", + "link": "features/basic-styles", + "name": "Superscript", + "description": "Fine print on top, like references in a book." + }, + { + "id": "underline", + "type": "subfeature", + "link": "features/basic-styles", + "name": "Underline", + "description": "Stuff looks important, yo. Or like a link, too." + }, + { + "id": "undo-redo", + "type": "feature", + "link": "features/undo-redo", + "name": "Undo/redo", + "description": "Backtrack or repeat actions for editing purposes." + } + ] + }, + { + "name": "Collaboration", + "description": "Collaborate with others - real-time or asynchronously. Comment, co-author, and mention team members in your documents. With collaboration features review process should be a breeze.", + "features": [ + { + "id": "asynchronous-collaboration", + "type": "feature", + "link": "features/collaboration", + "name": "Asynchronous collaboration", + "isPremium": true, + "description": "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." + }, + { + "id": "local-data-storage", + "type": "subfeature", + "link": "features/collaboration", + "name": "Local data storage", + "isPremium": true, + "description": "In asynchronous collaboration, data is maintained on the client's servers." + }, + { + "id": "comments", + "type": "feature", + "link": "features/comments", + "name": "Comments", + "isPremium": true, + "description": "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." + }, + { + "id": "comments-archive", + "type": "subfeature", + "link": "features/comments", + "name": "Comments archive", + "isPremium": true, + "description": "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." + }, + { + "id": "comments-outside-editor", + "type": "subfeature", + "link": "features/comments-outside-editor", + "name": "Comments outside editor", + "isPremium": true, + "description": "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." + }, + { + "id": "sidebar-modes", + "type": "subfeature", + "link": "features/annotations-display-mode", + "name": "Sidebar modes", + "isPremium": true, + "description": "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." + }, + { + "id": "mentions", + "type": "feature", + "link": "features/mentions", + "name": "Mentions", + "description": "The mention feature supports smart autocompletion triggered by user input. Typing a predetermined marker, like @ or #, prompts a panel to appear, offering autocomplete suggestions." + }, + { + "id": "real-time-collaboration", + "type": "feature", + "link": "features/real-time-collaboration", + "name": "Real-time collaboration", + "isPremium": true, + "description": "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." + }, + { + "id": "co-authoring", + "type": "subfeature", + "link": "features/users-in-real-time-collaboration", + "name": "Co-authoring", + "isPremium": true, + "description": "Multiple user real-time editing and content creation feature." + }, + { + "id": "on-premises", + "type": "subfeature", + "link": "@cs", + "name": "onpremises/index On-premises", + "isPremium": true, + "description": "On-premises real-time collaboration version to deploy to client's own infrastructure, includes a private cloud." + }, + { + "id": "saas", + "type": "subfeature", + "link": "@cs", + "name": "guides/collaboration/quick-start SaaS", + "isPremium": true, + "description": "Real-time collaboration provided as a service by CKSource." + }, + { + "id": "revision-history", + "type": "feature", + "link": "features/revision-history", + "name": "Revision history", + "isPremium": true, + "description": "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." + }, + { + "id": "track-changes", + "type": "feature", + "link": "features/track-changes", + "name": "Track changes", + "isPremium": true, + "description": "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." + }, + { + "id": "users-list-and-permissions", + "type": "feature", + "link": "features/users", + "name": "Users list and permissions", + "isPremium": true, + "description": "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": "Content conversion & embedding", + "description": "", + "features": [ + { + "id": "content-generation", + "type": "feature", + "link": "features/export-pdf", + "name": "Content generation", + "isPremium": true, + "description": "CKEditor 5 may be your universal starting point for generating content in several recognizable formats." + }, + { + "id": "export-to-pdf", + "type": "subfeature", + "link": "features/export-pdf", + "name": "Export to PDF", + "isPremium": true, + "description": "Create a PDF from in-editor content seamlessly. Customize headers and footers, include page breaks, embed images, and choose from various fonts." + }, + { + "id": "export-to-word", + "type": "subfeature", + "link": "features/export-word", + "name": "Export to Word", + "isPremium": true, + "description": "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." + }, + { + "id": "import-from-word", + "type": "subfeature", + "link": "features/import-word", + "name": "Import from Word", + "isPremium": true, + "description": "Effortlessly transform Word documents into clean HTML within CKEditor 5 while retaining the original styling, as well as comments and change tracking annotations." + }, + { + "id": "markdown-output", + "type": "feature", + "link": "features/markdown", + "name": "Markdown output", + "description": "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." + }, + { + "id": "media-embed", + "type": "feature", + "link": "features/media-embed", + "name": "Media embed", + "description": "Use the insert media button in the toolbar to embed media. Pasting a media URL directly into the editor content automatically embeds the media." + }, + { + "id": "paste-markdown", + "type": "feature", + "link": "features/paste-markdown", + "name": "Paste Markdown", + "description": "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." + }, + { + "id": "xml-output", + "type": "feature", + "link": "module:engine/dataprocessor/xmldataprocessor~XmlDataProcessor", + "name": "XML output", + "description": "Turn your content into parsable XML files for automation and cross-platform interoperability." + } + ] + }, + { + "name": "Page management", + "description": "Format, organize, and navigate your documents easily with page management features. Create a table of contents, insert page breaks, and manage pagination.", + "features": [ + { + "id": "document-outline", + "type": "feature", + "link": "features/document-outline", + "name": "Document outline", + "isPremium": true, + "description": "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." + }, + { + "id": "page-utilities", + "type": "feature", + "link": "features/minimap", + "name": "Page utilities", + "description": "CKEditor 5 Page Utilities enables users to dictate the structuring and print formatting of their documents effectively." + }, + { + "id": "content-minimap", + "type": "subfeature", + "link": "features/minimap", + "name": "Content minimap", + "description": "Offers a concise, birds-eye view of the document's content, allowing for quick navigation and content management." + }, + { + "id": "document-title", + "type": "subfeature", + "link": "features/title", + "name": "Document title", + "description": "Allows users to set and modify the document's title within the editing interface, ensuring accurate reflection of the contents." + }, + { + "id": "page-break", + "type": "subfeature", + "link": "features/page-break", + "name": "Page break", + "description": "Facilitates the insertion of manual breaks within the document, enabling the definition of page endings and beginnings for optimal layout and print clarity." + }, + { + "id": "pagination", + "type": "feature", + "link": "features/pagination", + "name": "Pagination", + "isPremium": true, + "description": "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." + }, + { + "id": "table-of-contents", + "type": "feature", + "link": "features/table-of-contents", + "name": "Table of contents", + "isPremium": true, + "description": "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": "Productivity", + "description": "Speed up the content creation process with dedicated productivity utilities. Autoformat your content as you write (or paste from other editors) or even delegate some tasks to an AI Assistant.", + "features": [ + { + "id": "ai-assistant", + "type": "feature", + "link": "features/ai-assistant-overview", + "name": "AI Assistant", + "isPremium": true, + "description": "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." + }, + { + "id": "automation", + "type": "feature", + "link": "features/autoformat", + "name": "Automation", + "description": "Automate your workflow with CKEditor 5 automation tools, regardless of whether you write, link, or save!" + }, + { + "id": "autoformatting", + "type": "subfeature", + "link": "features/autoformat", + "name": "Autoformatting", + "description": "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." + }, + { + "id": "autolink", + "type": "subfeature", + "link": "features/link#autolink-feature", + "name": "Autolink", + "description": "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." + }, + { + "id": "automatic-text-transformation", + "type": "subfeature", + "link": "features/text-transformation", + "name": "Automatic text transformations", + "description": "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." + }, + { + "id": "autosave", + "type": "subfeature", + "link": "features/autosave", + "name": "Autosave", + "description": "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." + }, + { + "id": "case-change", + "type": "feature", + "link": "features/case-change", + "name": "Case change", + "isPremium": true, + "description": "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." + }, + { + "id": "find-and-replace", + "type": "feature", + "link": "features/find-and-replace", + "name": "Find and replace", + "description": "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." + }, + { + "id": "format-painter", + "type": "feature", + "link": "features/format-painter", + "name": "Format painter", + "isPremium": true, + "description": "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." + }, + { + "id": "keyboard-shortcuts", + "type": "feature", + "link": "features/accessibility#keyboard-shortcuts", + "name": "Keyboard shortcuts", + "description": "CKEditor 5 supports various keyboard shortcuts that boost productivity and provide necessary accessibility to screen reader users." + }, + { + "id": "mathtype", + "type": "feature", + "link": "features/math-equations", + "name": "MathType", + "isPremium": true, + "description": "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." + }, + { + "id": "merge-fields", + "type": "feature", + "link": "features/merge-fields", + "name": "Merge fields", + "isPremium": true, + "description": "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." + }, + { + "id": "paste-from-google-docs", + "type": "feature", + "link": "features/paste-from-google-docs", + "name": "Paste from Google Docs", + "description": "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." + }, + { + "id": "paste-from-office", + "type": "feature", + "link": "features/paste-from-office", + "name": "Paste from Office", + "description": "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." + }, + { + "id": "paste-from-office-enhanced", + "type": "feature", + "link": "features/paste-from-office-enhanced", + "name": "Paste from Office Enhanced", + "isPremium": true, + "description": "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." + }, + { + "id": "paste-plain-text", + "type": "feature", + "link": "features/paste-plain-text", + "name": "Paste plain text", + "description": "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." + }, + { + "id": "slash-commands", + "type": "feature", + "link": "features/slash-commands", + "name": "Slash commands", + "isPremium": true, + "description": "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." + }, + { + "id": "special-characters", + "type": "feature", + "link": "features/special-characters", + "name": "Special characters", + "description": "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." + }, + { + "id": "templates", + "type": "feature", + "link": "features/template", + "name": "Templates", + "isPremium": true, + "description": "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": "Configurations", + "description": "Configure CKEditor 5 to your liking. Choose the editor type, modify the toolbar, and select a language from our translated language packs.", + "features": [ + { + "id": "editor-placeholder", + "type": "feature", + "link": "features/editor-placeholder", + "name": "Editor placeholder", + "description": "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." + }, + { + "id": "editor-ui-types", + "type": "feature", + "link": "getting-started/setup/editor-types", + "name": "Editor UI types", + "description": "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." + }, + { + "id": "balloon-block-editor", + "type": "subfeature", + "link": "getting-started/setup/editor-types#balloon-editor-and-balloon-block-editor", + "name": "Balloon block editor", + "description": "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." + }, + { + "id": "balloon-editor", + "type": "subfeature", + "link": "getting-started/setup/editor-types#balloon-editor-and-balloon-block-editor", + "name": "Balloon block editor", + "description": "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)." + }, + { + "id": "classic-editor", + "type": "subfeature", + "link": "getting-started/setup/editor-types#classic-editor", + "name": "Classic editor", + "description": "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." + }, + { + "id": "decoupled-editor", + "type": "subfeature", + "link": "getting-started/setup/editor-types#decoupled-editor-document", + "name": "Decoupled editor", + "description": "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." + }, + { + "id": "inline-editor", + "type": "subfeature", + "link": "getting-started/setup/editor-types#inline-editor", + "name": "Inline editor", + "description": "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." + }, + { + "id": "multi-root-editor", + "type": "subfeature", + "link": "getting-started/setup/editor-types#multi-root-editor", + "name": "Multi-root editor", + "description": "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." + }, + { + "id": "professionally-translated-language-packs", + "type": "feature", + "link": "getting-started/setup/ui-language", + "name": "Professionally translated language packs", + "description": "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" + }, + { + "id": "toolbar-and-menus", + "type": "feature", + "link": "getting-started/setup/toolbar", + "name": "Toolbar and menus", + "description": "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." + }, + { + "id": "balloon-toolbar", + "type": "subfeature", + "link": "getting-started/setup/toolbar#balloon-toolbar", + "name": "Balloon toolbar", + "description": "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." + }, + { + "id": "block-toolbar", + "type": "subfeature", + "link": "getting-started/setup/toolbar#block-toolbar", + "name": "Block toolbar", + "description": "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)." + }, + { + "id": "classic-toolbar", + "type": "subfeature", + "link": "getting-started/setup/toolbar#main-editor-toolbar", + "name": "Classic toolbar", + "description": "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." + }, + { + "id": "collapsible-toolbar", + "type": "subfeature", + "link": "getting-started/setup/toolbar#extended-toolbar-configuration-format", + "name": "Collapsible toolbar", + "description": "Collapsible toolbar for UI space efficiency." + }, + { + "id": "image-contextual-toolbar", + "type": "subfeature", + "link": "features/images-overview#image-contextual-toolbar", + "name": "Image contextual toolbar", + "description": "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." + }, + { + "id": "menu-bar", + "type": "subfeature", + "link": "getting-started/setup/menubar", + "name": "Menu bar", + "description": "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." + }, + { + "id": "multiline-toolbar", + "type": "subfeature", + "link": "getting-started/setup/toolbar#multiline-wrapping-toolbar", + "name": "Multiline toolbar", + "description": "Multiline toolbar for easy access to all functions." + }, + { + "id": "nesting-toolbars-in-dropdowns", + "type": "subfeature", + "link": "getting-started/setup/toolbar#grouping-toolbar-items-in-dropdowns-nested-toolbars", + "name": "Nesting toolbars in dropdowns", + "description": "Nested toolbars for space efficiency and task-oriented access." + }, + { + "id": "sidebar-annotations-bar", + "type": "subfeature", + "link": "features/annotations-display-mode#wide-sidebar", + "name": "Wide sidebar", + "description": "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." + }, + { + "id": "table-contextual-toolbar", + "type": "subfeature", + "link": "features/tables#table-contextual-toolbar", + "name": "Table contextual toolbar", + "description": "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." + }, + { + "id": "watchdog", + "type": "feature", + "link": "features/watchdog", + "name": "Watchdog", + "description": "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": "Compliance", + "description": "Make your content accessible to any person or restrict it to specific users.", + "features": [ + { + "id": "accessibility-support", + "type": "feature", + "link": "features/accessibility", + "name": "Accessibility support", + "description": "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." + }, + { + "id": "read-only-support", + "type": "feature", + "link": "features/read-only", + "name": "Read-only support", + "description": "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." + }, + { + "id": "restricted-editing", + "type": "feature", + "link": "features/restricted-editing", + "name": "Restricted editing", + "description": "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." + }, + { + "id": "text-part-language", + "type": "feature", + "link": "features/language", + "name": "Text Part Language", + "description": "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." + }, + { + "id": "word-and-character-counter", + "type": "feature", + "link": "features/word-count", + "name": "Word and character counter", + "description": "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." + }, + { + "id": "wproofreader", + "type": "feature", + "link": "features/spelling-and-grammar-checking", + "name": "WProofreader", + "isPremium": true, + "description": "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": "Customization", + "description": "Customize your editor even further. Use components and helpers from our UI library to create a UI that will match your design system.", + "features": [ + { + "id": "editor-sdk", + "type": "feature", + "link": "framework/index", + "name": "Editor SDK", + "description": "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." + }, + { + "id": "ckeditor5-inspector", + "type": "subfeature", + "link": "framework/development-tools/inspector", + "name": "CKEditor 5 inspector", + "description": "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}." + }, + { + "id": "cloud-services-rest-api", + "type": "subfeature", + "link": "@cs", + "name": "developer-resources/apis/overview Cloud Services REST API", + "description": "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." + }, + { + "id": "themes", + "type": "feature", + "link": "framework/theme-customization", + "name": "Themes", + "description": "The default theme of CKEditor 5 can be customized to match most visual integration requirements." + }, + { + "id": "ui-library", + "type": "feature", + "link": "framework/architecture/ui-library", + "name": "UI Library", + "description": "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": "File management", + "description": "Upload and manage your files using file management features. Take advantage of CKBox, our file management solution, or create your own using an adapter.", + "features": [ + { + "id": "base64-upload-adapter", + "type": "feature", + "link": "features/base64-upload-adapter", + "name": "Base64 Upload Adapter", + "description": "Convert inserted images into Base64-encoded strings in the editor output. Images are stored with other content in the database without server-side processing." + }, + { + "id": "ckbox", + "type": "feature", + "link": "features/ckbox", + "name": "CKBox", + "isPremium": true, + "description": "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." + }, + { + "id": "ckfinder", + "type": "feature", + "link": "features/ckfinder", + "name": "CKFinder", + "isPremium": true, + "description": "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." + }, + { + "id": "custom-upload-adapter", + "type": "feature", + "link": "features/image-upload#implementing-your-own-upload-adapter", + "name": "Custom Upload Adapter", + "description": "Have your own file management solution? Use this adapter to integrate your preferred software with CKEditor." + }, + { + "id": "simple-upload-adapter", + "type": "feature", + "link": "features/simple-upload-adapter", + "name": "Simple Upload Adapter", + "description": "Upload images to your server using the XMLHttpRequest API with a minimal editor configuration." + } + ] } ] From b0757b21378e3f33b23c46404d3ae3468a020630 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotrek=20Koszuli=C5=84ski?= Date: Thu, 28 Nov 2024 23:31:51 +0100 Subject: [PATCH 06/20] First batch of short descriptions. --- docs/_snippets/features-digest-source.json | 195 ++++++++++++++------- 1 file changed, 130 insertions(+), 65 deletions(-) diff --git a/docs/_snippets/features-digest-source.json b/docs/_snippets/features-digest-source.json index 6b8a0ae92b0..5fa57e21314 100644 --- a/docs/_snippets/features-digest-source.json +++ b/docs/_snippets/features-digest-source.json @@ -8,245 +8,280 @@ "type": "feature", "link": "features/general-html-support", "name": "Advanced HTML Editing", - "description": "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." + "description": "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.", + "shortDescription": "Edit and customize HTML elements, attributes, and styles with full control." }, { "id": "full-page-html", "type": "subfeature", "link": "features/full-page-html", "name": "Full page HTML", - "description": "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." + "description": "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.", + "shortDescription": "Edit entire HTML documents, including metadata, beyond visible content." }, { "id": "general-html-support", "type": "subfeature", "link": "features/general-html-support", "name": "General HTML Support (GHS)", - "description": "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." + "description": "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.", + "shortDescription": "Enable unsupported HTML elements, attributes, and styles in the editor." }, { "id": "html-comment", "type": "subfeature", "link": "features/html-comments", "name": "HTML comment", - "description": "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." + "description": "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.", + "shortDescription": "Keep HTML comments in your document without displaying them to users." }, { "id": "html-embed", "type": "subfeature", "link": "features/html-embed", "name": "HTML embed", - "description": "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." + "description": "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.", + "shortDescription": "Embed custom HTML snippets directly into your content." }, { "id": "show-blocks", "type": "subfeature", "link": "features/show-blocks", "name": "Show blocks", - "description": "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." + "description": "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.", + "shortDescription": "Visualize and outline all block-level elements in your content." }, { "id": "source-editing", "type": "subfeature", "link": "features/source-editing", "name": "Source editing", - "description": "The source editing feature lets you view and edit the source of your document." + "description": "The source editing feature lets you view and edit the source of your document.", + "shortDescription": "View and edit the source code of your document." }, { "id": "block-formatting", "type": "feature", "link": "features/block-quote", "name": "Block formatting", - "description": "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." + "description": "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.", + "shortDescription": "Organize and emphasize content with headings, block quotes, and horizontal lines." }, { "id": "block-quotes", "type": "subfeature", "link": "features/block-quote", "name": "Block quote", - "description": "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." + "description": "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.", + "shortDescription": "Add visually distinct block quotes to emphasize key excerpts." }, { "id": "headings-paragraph", "type": "subfeature", "link": "features/headings", "name": "Headings/paragraph", - "description": "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." + "description": "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.", + "shortDescription": "Structure content with headings for better readability and hierarchy." }, { "id": "horizontal-line", "type": "subfeature", "link": "features/horizontal-line", "name": "Horizontal line", - "description": "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." + "description": "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.", + "shortDescription": "Insert horizontal lines to divide content or indicate topic changes." }, { "id": "block-indentation", "type": "subfeature", "link": "features/indent", "name": "Block indentation", - "description": "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." + "description": "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.", + "shortDescription": "Adjust text block indentation for better content structure." }, { "id": "bookmark", "type": "feature", "link": "features/bookmarks", "name": "Bookmarks", - "description": "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." + "description": "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.", + "shortDescription": "Add bookmarks for quick navigation to key content sections." }, { "id": "clipboard", "type": "feature", "link": "framework/deep-dive/clipboard", "name": "Clipboard", - "description": "Copy, cut, and paste content within the editor or from external sources." + "description": "Copy, cut, and paste content within the editor or from external sources.", + "shortDescription": "Easily copy, cut, and paste content within or outside the editor." }, { "id": "code-blocks", "type": "feature", "link": "features/code-blocks", "name": "Code blocks", - "description": "Supports the insertion and management of pre-formatted code snippets with distinct styling." + "description": "Supports the insertion and management of pre-formatted code snippets with distinct styling.", + "shortDescription": "Insert preformatted code snippets with distinct styling." }, { "id": "drag-and-drop", "type": "feature", "link": "features/drag-drop", "name": "Drag and drop", - "description": "Rearrange elements within a document, including moving text blocks, images, or other content types." + "description": "Rearrange elements within a document, including moving text blocks, images, or other content types.", + "shortDescription": "Reorganize text and elements using drag-and-drop functionality." }, { "id": "font-formatting", "type": "feature", "link": "features/font", "name": "Font formatting", - "description": "The font feature lets you change font family, size, and color (including background color). All of these options are configurable." + "description": "The font feature lets you change font family, size, and color (including background color). All of these options are configurable.", + "shortDescription": "Customize font family, size, and color for tailored text presentation." }, { "id": "font-background-color", "type": "subfeature", "link": "features/font#configuring-the-font-color-and-font-background-color-features", "name": "Font background color", - "description": "Effortlessly make the words stand out even more with a colored background." + "description": "Effortlessly make the words stand out even more with a colored background.", + "shortDescription": "Highlight text with a colored background for emphasis." }, { "id": "font-color", "type": "subfeature", "link": "features/font#configuring-the-font-color-and-font-background-color-features", "name": "Font color", - "description": "Effortlessly make the letters stand out with their own color." + "description": "Effortlessly make the letters stand out with their own color.", + "shortDescription": "Apply custom colors to text for improved readability or style." }, { "id": "font-family", "type": "subfeature", "link": "features/font#configuring-the-font-family-feature", "name": "Font family", - "description": "Choose from a predefined set of fonts, depending on the type of content and its destination - print, screen, etc." + "description": "Choose from a predefined set of fonts, depending on the type of content and its destination - print, screen, etc.", + "shortDescription": "Choose suitable font families for your content needs." }, { "id": "font-size", "type": "subfeature", "link": "features/font#configuring-the-font-size-feature", "name": "Font size", - "description": "Easily control the size of the letters." + "description": "Easily control the size of the letters.", + "shortDescription": "Adjust font size for better readability and emphasis." }, { "id": "image", "type": "feature", "link": "features/images-overview", "name": "Image", - "description": "The image feature allows adding images of various kinds to the rich content inside the editor. A large set of subfeature background-grays 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." + "description": "The image feature allows adding images of various kinds to the rich content inside the editor. A large set of subfeature background-grays 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.", + "shortDescription": "Add, style, and manage images with captions, resizing, and linking options." }, { "id": "image-all-text", "type": "subfeature", "link": "features/images-text-alternative", "name": "Image alt text", - "description": "Add description text, AKA alternative text, for images. Alt text improves accessibility by telling screen readers and search engines what the image depicts." + "description": "Add description text, AKA alternative text, for images. Alt text improves accessibility by telling screen readers and search engines what the image depicts.", + "shortDescription": "Add alt text to images for accessibility and SEO improvements." }, { "id": "image-captions", "type": "subfeature", "link": "features/images-captions", "name": "Image captions", - "description": "Add optional captions for images, which are shown below the picture." + "description": "Add optional captions for images, which are shown below the picture.", + "shortDescription": "Add captions below images to provide context." }, { "id": "image-insert-via-url", "type": "subfeature", "link": "features/images-inserting", "name": "Image insert via URL", - "description": "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." + "description": "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.", + "shortDescription": "Insert images directly using their URLs." }, { "id": "image-linking", "type": "subfeature", "link": "features/images-linking", "name": "Image linking", - "description": "The {@link module:link/linkimage~LinkImage} plugin lets you use images as links." + "description": "The {@link module:link/linkimage~LinkImage} plugin lets you use images as links.", + "shortDescription": "Turn images into clickable links for interactive content." }, { "id": "image-resize", "type": "subfeature", "link": "features/images-resizing", "name": "Image resize", - "description": "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." + "description": "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.", + "shortDescription": "Easily resize images for better content fit." }, { "id": "image-styles", "type": "subfeature", "link": "features/images-styles", "name": "Image styles", - "description": "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." + "description": "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.", + "shortDescription": "Apply custom styles and alignments to images." }, { "id": "image-upload", "type": "subfeature", "link": "features/image-upload", "name": "Image upload", - "description": "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." + "description": "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.", + "shortDescription": "Upload images directly from your device to the editor." }, { "id": "responsive-images", "type": "subfeature", "link": "features/images-responsive", "name": "Responsive images", - "description": "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." + "description": "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.", + "shortDescription": "Automatically optimize images for different screen sizes." }, { "id": "links", "type": "feature", "link": "features/link", "name": "Links", - "description": "Facilitates the addition of hyperlinks to text, automatically converting typed or pasted URLs into clickable links, and allowing manual insertion and editing of links." + "description": "Facilitates the addition of hyperlinks to text, automatically converting typed or pasted URLs into clickable links, and allowing manual insertion and editing of links.", + "shortDescription": "Add and manage hyperlinks in your text." }, { "id": "lists", "type": "feature", "link": "features/lists", "name": "Lists", - "description": "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." + "description": "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.", + "shortDescription": "Create to-do, bulleted, and numbered lists with customizable styles." }, { "id": "list-indentation", "type": "subfeature", "link": "features/lists-editing#indenting-lists", "name": "List indentation", - "description": "Besides controlling {@link features/indent text block indentation}, the indent and outdent buttons allow for indenting list items (nesting them)." + "description": "Besides controlling {@link features/indent text block indentation}, the indent and outdent buttons allow for indenting list items (nesting them).", + "shortDescription": "Control list item indentation for nested lists." }, { "id": "list-start-index", "type": "subfeature", "link": "features/lists#list-start-index", "name": "List start index", - "description": "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." + "description": "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.", + "shortDescription": "Set custom start numbers for ordered lists." }, { "id": "list-styles", "type": "subfeature", "link": "features/lists#list-styles", "name": "List styles", - "description": "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." + "description": "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.", + "shortDescription": "Customize list markers for unique styles." }, { "id": "multi-level-lists", @@ -254,42 +289,48 @@ "link": "features/multi-level-lists", "name": "Multi-level lists", "isPremium": true, - "description": "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." + "description": "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.", + "shortDescription": "Create hierarchical multi-level lists with numbering." }, { "id": "nested-lists", "type": "subfeature", "link": "features/lists-editing#indenting-lists", "name": "Nested lists", - "description": "Besides controlling {@link features/indent text block indentation}, the indent and outdent buttons allow for indenting list items (nesting them)." + "description": "Besides controlling {@link features/indent text block indentation}, the indent and outdent buttons allow for indenting list items (nesting them).", + "shortDescription": "Easily create nested lists for complex content." }, { "id": "ordered-lists", "type": "subfeature", "link": "features/lists", "name": "Ordered lists", - "description": "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." + "description": "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.", + "shortDescription": "Add structured ordered lists with flexible formatting options." }, { "id": "reversed-list", "type": "subfeature", "link": "features/lists#reversed-list", "name": "Reversed list", - "description": "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)." + "description": "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).", + "shortDescription": "Reverse list numbering for countdowns or steps." }, { "id": "to-do-lists", "type": "subfeature", "link": "features/todo-lists", "name": "To-do lists", - "description": "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." + "description": "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.", + "shortDescription": "Create interactive to-do lists with checkboxes." }, { "id": "unordered-lists", "type": "subfeature", "link": "features/lists", "name": "Unordered lists", - "description": "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." + "description": "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.", + "shortDescription": "Add unordered lists with customizable markers." }, { "id": "mermaid", @@ -297,168 +338,192 @@ "link": "features/mermaid", "name": "Mermaid", "isExperimental": true, - "description": "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." + "description": "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.", + "shortDescription": "Create diagrams and charts using Markdown-inspired syntax." }, { "id": "remove-formatting", "type": "feature", "link": "features/remove-format", "name": "Remove formatting", - "description": "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)." + "description": "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).", + "shortDescription": "Quickly strip inline styles and formatting from text." }, { "id": "select-all", "type": "feature", "link": "features/select-all", "name": "Select all", - "description": "Enables the selection of all content within the editor with a single command or shortcut." + "description": "Enables the selection of all content within the editor with a single command or shortcut.", + "shortDescription": "Select all content within the editor instantly." }, { "id": "tables", "type": "feature", "link": "features/tables", "name": "Tables", - "description": "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." + "description": "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.", + "shortDescription": "Design and manage tables with advanced editing options." }, { "id": "columns-resizing", "type": "subfeature", "link": "features/tables-resize", "name": "Columns resizing", - "description": "The {@link module:table/tablecolumnresize~TableColumnResize} plugin lets you resize tables and individual table columns. It gives you complete control over column width." + "description": "The {@link module:table/tablecolumnresize~TableColumnResize} plugin lets you resize tables and individual table columns. It gives you complete control over column width.", + "shortDescription": "Resize table columns for precise layout control." }, { "id": "insert-delete-columns-and-rows", "type": "subfeature", "link": "features/tables#table-contextual-toolbar", "name": "Insert/delete columns & rows", - "description": "The basic table features allow users to insert tables into content, add or remove columns and rows and merge or split cells." + "description": "The basic table features allow users to insert tables into content, add or remove columns and rows and merge or split cells.", + "shortDescription": "Easily add or remove table rows and columns." }, { "id": "merge-and-split-cells", "type": "subfeature", "link": "features/tables#table-contextual-toolbar", "name": "Merge & split cells", - "description": "The basic table features allow users to insert tables into content, add or remove columns and rows, and merge or split cells." + "description": "The basic table features allow users to insert tables into content, add or remove columns and rows, and merge or split cells.", + "shortDescription": "Merge or split table cells as needed." }, { "id": "nesting", "type": "subfeature", "link": "features/tables#nesting-tables", "name": "Nesting", - "description": "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." + "description": "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.", + "shortDescription": "Nest tables within other tables for complex layouts." }, { "id": "styling-tables-and-cells", "type": "subfeature", "link": "features/tables-styling", "name": "Styling tables & cells", - "description": "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." + "description": "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.", + "shortDescription": "Apply custom styles to tables and individual cells." }, { "id": "table-headers", "type": "subfeature", "link": "features/tables#default-table-headers", "name": "Table headers", - "description": "To make every inserted table have n number of rows and columns as table headers by default, set an optional table configuration property defaultHeadings." + "description": "To make every inserted table have n number of rows and columns as table headers by default, set an optional table configuration property defaultHeadings.", + "shortDescription": "Set default table headers for better structure." }, { "id": "table-selection", "type": "subfeature", "link": "features/tables#table-selection", "name": "Table selection", - "description": "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." + "description": "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.", + "shortDescription": "Select and format specific table areas easily." }, { "id": "tables-caption", "type": "subfeature", "link": "features/tables-caption", "name": "Tables caption", - "description": "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." + "description": "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.", + "shortDescription": "Add captions to tables to improve accessibility." }, { "id": "text-alignment", "type": "feature", "link": "features/text-alignment", "name": "Text alignment", - "description": "Allows the adjustment of text alignment to the left, right, center, or justify and permits the alteration of indentation." + "description": "Allows the adjustment of text alignment to the left, right, center, or justify and permits the alteration of indentation.", + "shortDescription": "Align text left, right, center, or justify with ease." }, { "id": "text-formatting", "type": "feature", "link": "features/basic-styles", "name": "Text formatting", - "description": "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." + "description": "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.", + "shortDescription": "Apply bold, italic, underline, and other formatting styles to text." }, { "id": "bold", "type": "subfeature", "link": "features/basic-styles", "name": "Bold", - "description": "Making the letters look like the good time were never gone." + "description": "Making the letters look like the good time were never gone.", + "shortDescription": "Make text bold for emphasis." }, { "id": "code", "type": "subfeature", "link": "features/basic-styles", "name": "Code", - "description": "Snippet look like a terminal from the 1990s movie." + "description": "Snippet look like a terminal from the 1990s movie.", + "shortDescription": "Insert inline code snippets for technical content." }, { "id": "highlight", "type": "subfeature", "link": "features/highlight", "name": "Highlight", - "description": "Highlight makes important content stand out, either with font color or background fill." + "description": "Highlight makes important content stand out, either with font color or background fill.", + "shortDescription": "Highlight text with color for emphasis." }, { "id": "italic", "type": "subfeature", "link": "features/basic-styles", "name": "Italic", - "description": "Making the letters look like seashore pines." + "description": "Making the letters look like seashore pines.", + "shortDescription": "Italicize text for subtle emphasis." }, { "id": "strikethrough", "type": "subfeature", "link": "features/basic-styles", "name": "Strikethrough", - "description": "Never mind, will not need it anymore." + "description": "Never mind, will not need it anymore.", + "shortDescription": "Strike through text to indicate removal." }, { "id": "styles", "type": "subfeature", "link": "features/style", "name": "Styles", - "description": "The styles feature lets you easily apply predefined styles available for block and inline content." + "description": "The styles feature lets you easily apply predefined styles available for block and inline content.", + "shortDescription": "Apply predefined styles to block and inline elements." }, { "id": "subscript", "type": "subfeature", "link": "features/basic-styles", "name": "Subscript", - "description": "Fine print at the bottom, like atom numbers." + "description": "Fine print at the bottom, like atom numbers.", + "shortDescription": "Add subscript text for chemical formulas or footnotes." }, { "id": "superscript", "type": "subfeature", "link": "features/basic-styles", "name": "Superscript", - "description": "Fine print on top, like references in a book." + "description": "Fine print on top, like references in a book.", + "shortDescription": "Add superscript text for exponents or references." }, { "id": "underline", "type": "subfeature", "link": "features/basic-styles", "name": "Underline", - "description": "Stuff looks important, yo. Or like a link, too." + "description": "Stuff looks important, yo. Or like a link, too.", + "shortDescription": "Underline text to highlight importance." }, { "id": "undo-redo", "type": "feature", "link": "features/undo-redo", "name": "Undo/redo", - "description": "Backtrack or repeat actions for editing purposes." + "description": "Backtrack or repeat actions for editing purposes.", + "shortDescription": "Easily undo or redo recent actions." } ] }, From 6d09d21b1e5fb4fbe93245c38599872ca151419c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotrek=20Koszuli=C5=84ski?= Date: Thu, 28 Nov 2024 23:33:30 +0100 Subject: [PATCH 07/20] Second batch of short descriptions. --- docs/_snippets/features-digest-source.json | 42 ++++++++++++++-------- 1 file changed, 28 insertions(+), 14 deletions(-) diff --git a/docs/_snippets/features-digest-source.json b/docs/_snippets/features-digest-source.json index 5fa57e21314..4e0d32c84b1 100644 --- a/docs/_snippets/features-digest-source.json +++ b/docs/_snippets/features-digest-source.json @@ -537,7 +537,8 @@ "link": "features/collaboration", "name": "Asynchronous collaboration", "isPremium": true, - "description": "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." + "description": "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.", + "shortDescription": "Work collaboratively with team members asynchronously using Track Changes, Comments, and Revision History." }, { "id": "local-data-storage", @@ -545,7 +546,8 @@ "link": "features/collaboration", "name": "Local data storage", "isPremium": true, - "description": "In asynchronous collaboration, data is maintained on the client's servers." + "description": "In asynchronous collaboration, data is maintained on the client's servers.", + "shortDescription": "Store collaborative data on local client servers for security and control." }, { "id": "comments", @@ -553,7 +555,8 @@ "link": "features/comments", "name": "Comments", "isPremium": true, - "description": "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." + "description": "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.", + "shortDescription": "Add, discuss, and resolve comments for seamless content collaboration." }, { "id": "comments-archive", @@ -561,7 +564,8 @@ "link": "features/comments", "name": "Comments archive", "isPremium": true, - "description": "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." + "description": "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.", + "shortDescription": "Archive resolved comments for streamlined feedback management and future reference." }, { "id": "comments-outside-editor", @@ -569,7 +573,8 @@ "link": "features/comments-outside-editor", "name": "Comments outside editor", "isPremium": true, - "description": "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." + "description": "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.", + "shortDescription": "Extend comment functionality to non-editor fields for enhanced application integration." }, { "id": "sidebar-modes", @@ -577,14 +582,16 @@ "link": "features/annotations-display-mode", "name": "Sidebar modes", "isPremium": true, - "description": "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." + "description": "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.", + "shortDescription": "Choose between wide, narrow, or inline UIs to display annotations and comments." }, { "id": "mentions", "type": "feature", "link": "features/mentions", "name": "Mentions", - "description": "The mention feature supports smart autocompletion triggered by user input. Typing a predetermined marker, like @ or #, prompts a panel to appear, offering autocomplete suggestions." + "description": "The mention feature supports smart autocompletion triggered by user input. Typing a predetermined marker, like @ or #, prompts a panel to appear, offering autocomplete suggestions.", + "shortDescription": "Notify and tag users in content using smart autocompletion with @mentions." }, { "id": "real-time-collaboration", @@ -592,7 +599,8 @@ "link": "features/real-time-collaboration", "name": "Real-time collaboration", "isPremium": true, - "description": "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." + "description": "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.", + "shortDescription": "Collaborate in real-time with automatic conflict resolution for seamless teamwork." }, { "id": "co-authoring", @@ -600,7 +608,8 @@ "link": "features/users-in-real-time-collaboration", "name": "Co-authoring", "isPremium": true, - "description": "Multiple user real-time editing and content creation feature." + "description": "Multiple user real-time editing and content creation feature.", + "shortDescription": "Edit and create content simultaneously with multiple users in real time." }, { "id": "on-premises", @@ -608,7 +617,8 @@ "link": "@cs", "name": "onpremises/index On-premises", "isPremium": true, - "description": "On-premises real-time collaboration version to deploy to client's own infrastructure, includes a private cloud." + "description": "On-premises real-time collaboration version to deploy to client's own infrastructure, includes a private cloud.", + "shortDescription": "Deploy real-time collaboration on your infrastructure for full control and privacy." }, { "id": "saas", @@ -616,7 +626,8 @@ "link": "@cs", "name": "guides/collaboration/quick-start SaaS", "isPremium": true, - "description": "Real-time collaboration provided as a service by CKSource." + "description": "Real-time collaboration provided as a service by CKSource.", + "shortDescription": "Access real-time collaboration as a cloud service managed by CKSource." }, { "id": "revision-history", @@ -624,7 +635,8 @@ "link": "features/revision-history", "name": "Revision history", "isPremium": true, - "description": "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." + "description": "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.", + "shortDescription": "Track, compare, and restore document versions with detailed revision history." }, { "id": "track-changes", @@ -632,7 +644,8 @@ "link": "features/track-changes", "name": "Track changes", "isPremium": true, - "description": "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." + "description": "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.", + "shortDescription": "Monitor and manage document edits with automatic suggestion tracking." }, { "id": "users-list-and-permissions", @@ -640,7 +653,8 @@ "link": "features/users", "name": "Users list and permissions", "isPremium": true, - "description": "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." + "description": "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.", + "shortDescription": "Manage user roles and permissions for secure, collaborative editing." } ] }, From 031e2a53b369aea6a1b61b952eecd60036445dbf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotrek=20Koszuli=C5=84ski?= Date: Thu, 28 Nov 2024 23:45:42 +0100 Subject: [PATCH 08/20] Third batch of short descriptions. --- docs/_snippets/features-digest-source.json | 57 ++++++++++++++-------- 1 file changed, 38 insertions(+), 19 deletions(-) diff --git a/docs/_snippets/features-digest-source.json b/docs/_snippets/features-digest-source.json index 4e0d32c84b1..afb9f3434dd 100644 --- a/docs/_snippets/features-digest-source.json +++ b/docs/_snippets/features-digest-source.json @@ -792,42 +792,48 @@ "link": "features/ai-assistant-overview", "name": "AI Assistant", "isPremium": true, - "description": "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." + "description": "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.", + "shortDescription": "Leverage AI for content creation, processing, and customizable integrations." }, { "id": "automation", "type": "feature", "link": "features/autoformat", "name": "Automation", - "description": "Automate your workflow with CKEditor 5 automation tools, regardless of whether you write, link, or save!" + "description": "Automate your workflow with CKEditor 5 automation tools, regardless of whether you write, link, or save!", + "shortDescription": "Streamline tasks like formatting, linking, and saving with automation tools." }, { "id": "autoformatting", "type": "subfeature", "link": "features/autoformat", "name": "Autoformatting", - "description": "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." + "description": "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.", + "shortDescription": "Quickly format content using Markdown-like shortcuts." }, { "id": "autolink", "type": "subfeature", "link": "features/link#autolink-feature", "name": "Autolink", - "description": "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." + "description": "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.", + "shortDescription": "Automatically convert URLs and emails into clickable links." }, { "id": "automatic-text-transformation", "type": "subfeature", "link": "features/text-transformation", "name": "Automatic text transformations", - "description": "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." + "description": "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.", + "shortDescription": "Automatically expand abbreviations or autocorrect text based on predefined rules." }, { "id": "autosave", "type": "subfeature", "link": "features/autosave", "name": "Autosave", - "description": "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." + "description": "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.", + "shortDescription": "Automatically save changes for uninterrupted workflow." }, { "id": "case-change", @@ -835,14 +841,16 @@ "link": "features/case-change", "name": "Case change", "isPremium": true, - "description": "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." + "description": "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.", + "shortDescription": "Easily switch text cases between uppercase, lowercase, and title case." }, { "id": "find-and-replace", "type": "feature", "link": "features/find-and-replace", "name": "Find and replace", - "description": "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." + "description": "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.", + "shortDescription": "Search and replace text efficiently across your document." }, { "id": "format-painter", @@ -850,14 +858,16 @@ "link": "features/format-painter", "name": "Format painter", "isPremium": true, - "description": "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." + "description": "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.", + "shortDescription": "Clone and apply formatting for consistent styling across sections." }, { "id": "keyboard-shortcuts", "type": "feature", "link": "features/accessibility#keyboard-shortcuts", "name": "Keyboard shortcuts", - "description": "CKEditor 5 supports various keyboard shortcuts that boost productivity and provide necessary accessibility to screen reader users." + "description": "CKEditor 5 supports various keyboard shortcuts that boost productivity and provide necessary accessibility to screen reader users.", + "shortDescription": "Boost productivity with keyboard shortcuts for editing and accessibility." }, { "id": "mathtype", @@ -865,7 +875,8 @@ "link": "features/math-equations", "name": "MathType", "isPremium": true, - "description": "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." + "description": "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.", + "shortDescription": "Insert formatted math equations and chemical formulas into your content." }, { "id": "merge-fields", @@ -873,21 +884,24 @@ "link": "features/merge-fields", "name": "Merge fields", "isPremium": true, - "description": "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." + "description": "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.", + "shortDescription": "Add placeholders for dynamic values in templates and documents." }, { "id": "paste-from-google-docs", "type": "feature", "link": "features/paste-from-google-docs", "name": "Paste from Google Docs", - "description": "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." + "description": "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.", + "shortDescription": "Retain formatting when pasting content from Google Docs." }, { "id": "paste-from-office", "type": "feature", "link": "features/paste-from-office", "name": "Paste from Office", - "description": "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." + "description": "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.", + "shortDescription": "Preserve formatting and structure when pasting from Microsoft Office." }, { "id": "paste-from-office-enhanced", @@ -895,14 +909,16 @@ "link": "features/paste-from-office-enhanced", "name": "Paste from Office Enhanced", "isPremium": true, - "description": "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." + "description": "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.", + "shortDescription": "Accurately preserve advanced formatting when pasting from Word or Excel." }, { "id": "paste-plain-text", "type": "feature", "link": "features/paste-plain-text", "name": "Paste plain text", - "description": "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." + "description": "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.", + "shortDescription": "Paste content without formatting for clean and consistent styling." }, { "id": "slash-commands", @@ -910,14 +926,16 @@ "link": "features/slash-commands", "name": "Slash commands", "isPremium": true, - "description": "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." + "description": "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.", + "shortDescription": "Quickly add and style content using slash commands for efficiency." }, { "id": "special-characters", "type": "feature", "link": "features/special-characters", "name": "Special characters", - "description": "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." + "description": "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.", + "shortDescription": "Add unique symbols, characters, and emojis to your content." }, { "id": "templates", @@ -925,7 +943,8 @@ "link": "features/template", "name": "Templates", "isPremium": true, - "description": "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." + "description": "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.", + "shortDescription": "Insert predefined templates for faster and consistent document creation." } ] }, From c0af3157bbd8f963de23c4e47a2632d7f695f800 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotrek=20Koszuli=C5=84ski?= Date: Fri, 29 Nov 2024 12:19:43 +0100 Subject: [PATCH 09/20] Changed the format. Subfeatures moved inside their parents. --- docs/_snippets/features-digest-source.json | 1370 ++++++++++---------- 1 file changed, 701 insertions(+), 669 deletions(-) diff --git a/docs/_snippets/features-digest-source.json b/docs/_snippets/features-digest-source.json index afb9f3434dd..6b13b0e26f6 100644 --- a/docs/_snippets/features-digest-source.json +++ b/docs/_snippets/features-digest-source.json @@ -9,55 +9,57 @@ "link": "features/general-html-support", "name": "Advanced HTML Editing", "description": "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.", - "shortDescription": "Edit and customize HTML elements, attributes, and styles with full control." - }, - { - "id": "full-page-html", - "type": "subfeature", - "link": "features/full-page-html", - "name": "Full page HTML", - "description": "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.", - "shortDescription": "Edit entire HTML documents, including metadata, beyond visible content." - }, - { - "id": "general-html-support", - "type": "subfeature", - "link": "features/general-html-support", - "name": "General HTML Support (GHS)", - "description": "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.", - "shortDescription": "Enable unsupported HTML elements, attributes, and styles in the editor." - }, - { - "id": "html-comment", - "type": "subfeature", - "link": "features/html-comments", - "name": "HTML comment", - "description": "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.", - "shortDescription": "Keep HTML comments in your document without displaying them to users." - }, - { - "id": "html-embed", - "type": "subfeature", - "link": "features/html-embed", - "name": "HTML embed", - "description": "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.", - "shortDescription": "Embed custom HTML snippets directly into your content." - }, - { - "id": "show-blocks", - "type": "subfeature", - "link": "features/show-blocks", - "name": "Show blocks", - "description": "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.", - "shortDescription": "Visualize and outline all block-level elements in your content." - }, - { - "id": "source-editing", - "type": "subfeature", - "link": "features/source-editing", - "name": "Source editing", - "description": "The source editing feature lets you view and edit the source of your document.", - "shortDescription": "View and edit the source code of your document." + "shortDescription": "Edit and customize HTML elements, attributes, and styles with full control.", + "subFeatures": [ + { + "id": "full-page-html", + "type": "subFeature", + "link": "features/full-page-html", + "name": "Full page HTML", + "description": "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.", + "shortDescription": "Edit entire HTML documents, including metadata, beyond visible content." + }, + { + "id": "general-html-support", + "type": "subFeature", + "link": "features/general-html-support", + "name": "General HTML Support (GHS)", + "description": "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.", + "shortDescription": "Enable unsupported HTML elements, attributes, and styles in the editor." + }, + { + "id": "html-comment", + "type": "subFeature", + "link": "features/html-comments", + "name": "HTML comment", + "description": "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.", + "shortDescription": "Keep HTML comments in your document without displaying them to users." + }, + { + "id": "html-embed", + "type": "subFeature", + "link": "features/html-embed", + "name": "HTML embed", + "description": "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.", + "shortDescription": "Embed custom HTML snippets directly into your content." + }, + { + "id": "show-blocks", + "type": "subFeature", + "link": "features/show-blocks", + "name": "Show blocks", + "description": "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.", + "shortDescription": "Visualize and outline all block-level elements in your content." + }, + { + "id": "source-editing", + "type": "subFeature", + "link": "features/source-editing", + "name": "Source editing", + "description": "The source editing feature lets you view and edit the source of your document.", + "shortDescription": "View and edit the source code of your document." + } + ] }, { "id": "block-formatting", @@ -65,39 +67,41 @@ "link": "features/block-quote", "name": "Block formatting", "description": "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.", - "shortDescription": "Organize and emphasize content with headings, block quotes, and horizontal lines." - }, - { - "id": "block-quotes", - "type": "subfeature", - "link": "features/block-quote", - "name": "Block quote", - "description": "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.", - "shortDescription": "Add visually distinct block quotes to emphasize key excerpts." - }, - { - "id": "headings-paragraph", - "type": "subfeature", - "link": "features/headings", - "name": "Headings/paragraph", - "description": "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.", - "shortDescription": "Structure content with headings for better readability and hierarchy." - }, - { - "id": "horizontal-line", - "type": "subfeature", - "link": "features/horizontal-line", - "name": "Horizontal line", - "description": "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.", - "shortDescription": "Insert horizontal lines to divide content or indicate topic changes." - }, - { - "id": "block-indentation", - "type": "subfeature", - "link": "features/indent", - "name": "Block indentation", - "description": "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.", - "shortDescription": "Adjust text block indentation for better content structure." + "shortDescription": "Organize and emphasize content with headings, block quotes, and horizontal lines.", + "subFeatures": [ + { + "id": "block-quotes", + "type": "subFeature", + "link": "features/block-quote", + "name": "Block quote", + "description": "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.", + "shortDescription": "Add visually distinct block quotes to emphasize key excerpts." + }, + { + "id": "headings-paragraph", + "type": "subFeature", + "link": "features/headings", + "name": "Headings/paragraph", + "description": "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.", + "shortDescription": "Structure content with headings for better readability and hierarchy." + }, + { + "id": "horizontal-line", + "type": "subFeature", + "link": "features/horizontal-line", + "name": "Horizontal line", + "description": "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.", + "shortDescription": "Insert horizontal lines to divide content or indicate topic changes." + }, + { + "id": "block-indentation", + "type": "subFeature", + "link": "features/indent", + "name": "Block indentation", + "description": "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.", + "shortDescription": "Adjust text block indentation for better content structure." + } + ] }, { "id": "bookmark", @@ -137,111 +141,115 @@ "link": "features/font", "name": "Font formatting", "description": "The font feature lets you change font family, size, and color (including background color). All of these options are configurable.", - "shortDescription": "Customize font family, size, and color for tailored text presentation." - }, - { - "id": "font-background-color", - "type": "subfeature", - "link": "features/font#configuring-the-font-color-and-font-background-color-features", - "name": "Font background color", - "description": "Effortlessly make the words stand out even more with a colored background.", - "shortDescription": "Highlight text with a colored background for emphasis." - }, - { - "id": "font-color", - "type": "subfeature", - "link": "features/font#configuring-the-font-color-and-font-background-color-features", - "name": "Font color", - "description": "Effortlessly make the letters stand out with their own color.", - "shortDescription": "Apply custom colors to text for improved readability or style." - }, - { - "id": "font-family", - "type": "subfeature", - "link": "features/font#configuring-the-font-family-feature", - "name": "Font family", - "description": "Choose from a predefined set of fonts, depending on the type of content and its destination - print, screen, etc.", - "shortDescription": "Choose suitable font families for your content needs." - }, - { - "id": "font-size", - "type": "subfeature", - "link": "features/font#configuring-the-font-size-feature", - "name": "Font size", - "description": "Easily control the size of the letters.", - "shortDescription": "Adjust font size for better readability and emphasis." + "shortDescription": "Customize font family, size, and color for tailored text presentation.", + "subFeatures": [ + { + "id": "font-background-color", + "type": "subFeature", + "link": "features/font#configuring-the-font-color-and-font-background-color-features", + "name": "Font background color", + "description": "Effortlessly make the words stand out even more with a colored background.", + "shortDescription": "Highlight text with a colored background for emphasis." + }, + { + "id": "font-color", + "type": "subFeature", + "link": "features/font#configuring-the-font-color-and-font-background-color-features", + "name": "Font color", + "description": "Effortlessly make the letters stand out with their own color.", + "shortDescription": "Apply custom colors to text for improved readability or style." + }, + { + "id": "font-family", + "type": "subFeature", + "link": "features/font#configuring-the-font-family-feature", + "name": "Font family", + "description": "Choose from a predefined set of fonts, depending on the type of content and its destination - print, screen, etc.", + "shortDescription": "Choose suitable font families for your content needs." + }, + { + "id": "font-size", + "type": "subFeature", + "link": "features/font#configuring-the-font-size-feature", + "name": "Font size", + "description": "Easily control the size of the letters.", + "shortDescription": "Adjust font size for better readability and emphasis." + } + ] }, { "id": "image", "type": "feature", "link": "features/images-overview", "name": "Image", - "description": "The image feature allows adding images of various kinds to the rich content inside the editor. A large set of subfeature background-grays 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.", - "shortDescription": "Add, style, and manage images with captions, resizing, and linking options." - }, - { - "id": "image-all-text", - "type": "subfeature", - "link": "features/images-text-alternative", - "name": "Image alt text", - "description": "Add description text, AKA alternative text, for images. Alt text improves accessibility by telling screen readers and search engines what the image depicts.", - "shortDescription": "Add alt text to images for accessibility and SEO improvements." - }, - { - "id": "image-captions", - "type": "subfeature", - "link": "features/images-captions", - "name": "Image captions", - "description": "Add optional captions for images, which are shown below the picture.", - "shortDescription": "Add captions below images to provide context." - }, - { - "id": "image-insert-via-url", - "type": "subfeature", - "link": "features/images-inserting", - "name": "Image insert via URL", - "description": "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.", - "shortDescription": "Insert images directly using their URLs." - }, - { - "id": "image-linking", - "type": "subfeature", - "link": "features/images-linking", - "name": "Image linking", - "description": "The {@link module:link/linkimage~LinkImage} plugin lets you use images as links.", - "shortDescription": "Turn images into clickable links for interactive content." - }, - { - "id": "image-resize", - "type": "subfeature", - "link": "features/images-resizing", - "name": "Image resize", - "description": "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.", - "shortDescription": "Easily resize images for better content fit." - }, - { - "id": "image-styles", - "type": "subfeature", - "link": "features/images-styles", - "name": "Image styles", - "description": "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.", - "shortDescription": "Apply custom styles and alignments to images." - }, - { - "id": "image-upload", - "type": "subfeature", - "link": "features/image-upload", - "name": "Image upload", - "description": "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.", - "shortDescription": "Upload images directly from your device to the editor." - }, - { - "id": "responsive-images", - "type": "subfeature", - "link": "features/images-responsive", - "name": "Responsive images", - "description": "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.", - "shortDescription": "Automatically optimize images for different screen sizes." + "description": "The image feature allows adding images of various kinds to the rich content inside the editor. A large set of subFeature background-grays 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.", + "shortDescription": "Add, style, and manage images with captions, resizing, and linking options.", + "subFeatures": [ + { + "id": "image-all-text", + "type": "subFeature", + "link": "features/images-text-alternative", + "name": "Image alt text", + "description": "Add description text, AKA alternative text, for images. Alt text improves accessibility by telling screen readers and search engines what the image depicts.", + "shortDescription": "Add alt text to images for accessibility and SEO improvements." + }, + { + "id": "image-captions", + "type": "subFeature", + "link": "features/images-captions", + "name": "Image captions", + "description": "Add optional captions for images, which are shown below the picture.", + "shortDescription": "Add captions below images to provide context." + }, + { + "id": "image-insert-via-url", + "type": "subFeature", + "link": "features/images-inserting", + "name": "Image insert via URL", + "description": "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.", + "shortDescription": "Insert images directly using their URLs." + }, + { + "id": "image-linking", + "type": "subFeature", + "link": "features/images-linking", + "name": "Image linking", + "description": "The {@link module:link/linkimage~LinkImage} plugin lets you use images as links.", + "shortDescription": "Turn images into clickable links for interactive content." + }, + { + "id": "image-resize", + "type": "subFeature", + "link": "features/images-resizing", + "name": "Image resize", + "description": "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.", + "shortDescription": "Easily resize images for better content fit." + }, + { + "id": "image-styles", + "type": "subFeature", + "link": "features/images-styles", + "name": "Image styles", + "description": "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.", + "shortDescription": "Apply custom styles and alignments to images." + }, + { + "id": "image-upload", + "type": "subFeature", + "link": "features/image-upload", + "name": "Image upload", + "description": "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.", + "shortDescription": "Upload images directly from your device to the editor." + }, + { + "id": "responsive-images", + "type": "subFeature", + "link": "features/images-responsive", + "name": "Responsive images", + "description": "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.", + "shortDescription": "Automatically optimize images for different screen sizes." + } + ] }, { "id": "links", @@ -257,80 +265,82 @@ "link": "features/lists", "name": "Lists", "description": "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.", - "shortDescription": "Create to-do, bulleted, and numbered lists with customizable styles." - }, - { - "id": "list-indentation", - "type": "subfeature", - "link": "features/lists-editing#indenting-lists", - "name": "List indentation", - "description": "Besides controlling {@link features/indent text block indentation}, the indent and outdent buttons allow for indenting list items (nesting them).", - "shortDescription": "Control list item indentation for nested lists." - }, - { - "id": "list-start-index", - "type": "subfeature", - "link": "features/lists#list-start-index", - "name": "List start index", - "description": "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.", - "shortDescription": "Set custom start numbers for ordered lists." - }, - { - "id": "list-styles", - "type": "subfeature", - "link": "features/lists#list-styles", - "name": "List styles", - "description": "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.", - "shortDescription": "Customize list markers for unique styles." - }, - { - "id": "multi-level-lists", - "type": "subfeature", - "link": "features/multi-level-lists", - "name": "Multi-level lists", - "isPremium": true, - "description": "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.", - "shortDescription": "Create hierarchical multi-level lists with numbering." - }, - { - "id": "nested-lists", - "type": "subfeature", - "link": "features/lists-editing#indenting-lists", - "name": "Nested lists", - "description": "Besides controlling {@link features/indent text block indentation}, the indent and outdent buttons allow for indenting list items (nesting them).", - "shortDescription": "Easily create nested lists for complex content." - }, - { - "id": "ordered-lists", - "type": "subfeature", - "link": "features/lists", - "name": "Ordered lists", - "description": "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.", - "shortDescription": "Add structured ordered lists with flexible formatting options." - }, - { - "id": "reversed-list", - "type": "subfeature", - "link": "features/lists#reversed-list", - "name": "Reversed list", - "description": "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).", - "shortDescription": "Reverse list numbering for countdowns or steps." - }, - { - "id": "to-do-lists", - "type": "subfeature", - "link": "features/todo-lists", - "name": "To-do lists", - "description": "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.", - "shortDescription": "Create interactive to-do lists with checkboxes." - }, - { - "id": "unordered-lists", - "type": "subfeature", - "link": "features/lists", - "name": "Unordered lists", - "description": "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.", - "shortDescription": "Add unordered lists with customizable markers." + "shortDescription": "Create to-do, bulleted, and numbered lists with customizable styles.", + "subFeatures": [ + { + "id": "list-indentation", + "type": "subFeature", + "link": "features/lists-editing#indenting-lists", + "name": "List indentation", + "description": "Besides controlling {@link features/indent text block indentation}, the indent and outdent buttons allow for indenting list items (nesting them).", + "shortDescription": "Control list item indentation for nested lists." + }, + { + "id": "list-start-index", + "type": "subFeature", + "link": "features/lists#list-start-index", + "name": "List start index", + "description": "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.", + "shortDescription": "Set custom start numbers for ordered lists." + }, + { + "id": "list-styles", + "type": "subFeature", + "link": "features/lists#list-styles", + "name": "List styles", + "description": "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.", + "shortDescription": "Customize list markers for unique styles." + }, + { + "id": "multi-level-lists", + "type": "subFeature", + "link": "features/multi-level-lists", + "name": "Multi-level lists", + "isPremium": true, + "description": "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.", + "shortDescription": "Create hierarchical multi-level lists with numbering." + }, + { + "id": "nested-lists", + "type": "subFeature", + "link": "features/lists-editing#indenting-lists", + "name": "Nested lists", + "description": "Besides controlling {@link features/indent text block indentation}, the indent and outdent buttons allow for indenting list items (nesting them).", + "shortDescription": "Easily create nested lists for complex content." + }, + { + "id": "ordered-lists", + "type": "subFeature", + "link": "features/lists", + "name": "Ordered lists", + "description": "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.", + "shortDescription": "Add structured ordered lists with flexible formatting options." + }, + { + "id": "reversed-list", + "type": "subFeature", + "link": "features/lists#reversed-list", + "name": "Reversed list", + "description": "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).", + "shortDescription": "Reverse list numbering for countdowns or steps." + }, + { + "id": "to-do-lists", + "type": "subFeature", + "link": "features/todo-lists", + "name": "To-do lists", + "description": "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.", + "shortDescription": "Create interactive to-do lists with checkboxes." + }, + { + "id": "unordered-lists", + "type": "subFeature", + "link": "features/lists", + "name": "Unordered lists", + "description": "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.", + "shortDescription": "Add unordered lists with customizable markers." + } + ] }, { "id": "mermaid", @@ -363,71 +373,73 @@ "link": "features/tables", "name": "Tables", "description": "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.", - "shortDescription": "Design and manage tables with advanced editing options." - }, - { - "id": "columns-resizing", - "type": "subfeature", - "link": "features/tables-resize", - "name": "Columns resizing", - "description": "The {@link module:table/tablecolumnresize~TableColumnResize} plugin lets you resize tables and individual table columns. It gives you complete control over column width.", - "shortDescription": "Resize table columns for precise layout control." - }, - { - "id": "insert-delete-columns-and-rows", - "type": "subfeature", - "link": "features/tables#table-contextual-toolbar", - "name": "Insert/delete columns & rows", - "description": "The basic table features allow users to insert tables into content, add or remove columns and rows and merge or split cells.", - "shortDescription": "Easily add or remove table rows and columns." - }, - { - "id": "merge-and-split-cells", - "type": "subfeature", - "link": "features/tables#table-contextual-toolbar", - "name": "Merge & split cells", - "description": "The basic table features allow users to insert tables into content, add or remove columns and rows, and merge or split cells.", - "shortDescription": "Merge or split table cells as needed." - }, - { - "id": "nesting", - "type": "subfeature", - "link": "features/tables#nesting-tables", - "name": "Nesting", - "description": "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.", - "shortDescription": "Nest tables within other tables for complex layouts." - }, - { - "id": "styling-tables-and-cells", - "type": "subfeature", - "link": "features/tables-styling", - "name": "Styling tables & cells", - "description": "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.", - "shortDescription": "Apply custom styles to tables and individual cells." - }, - { - "id": "table-headers", - "type": "subfeature", - "link": "features/tables#default-table-headers", - "name": "Table headers", - "description": "To make every inserted table have n number of rows and columns as table headers by default, set an optional table configuration property defaultHeadings.", - "shortDescription": "Set default table headers for better structure." - }, - { - "id": "table-selection", - "type": "subfeature", - "link": "features/tables#table-selection", - "name": "Table selection", - "description": "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.", - "shortDescription": "Select and format specific table areas easily." - }, - { - "id": "tables-caption", - "type": "subfeature", - "link": "features/tables-caption", - "name": "Tables caption", - "description": "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.", - "shortDescription": "Add captions to tables to improve accessibility." + "shortDescription": "Design and manage tables with advanced editing options.", + "subFeatures": [ + { + "id": "columns-resizing", + "type": "subFeature", + "link": "features/tables-resize", + "name": "Columns resizing", + "description": "The {@link module:table/tablecolumnresize~TableColumnResize} plugin lets you resize tables and individual table columns. It gives you complete control over column width.", + "shortDescription": "Resize table columns for precise layout control." + }, + { + "id": "insert-delete-columns-and-rows", + "type": "subFeature", + "link": "features/tables#table-contextual-toolbar", + "name": "Insert/delete columns & rows", + "description": "The basic table features allow users to insert tables into content, add or remove columns and rows and merge or split cells.", + "shortDescription": "Easily add or remove table rows and columns." + }, + { + "id": "merge-and-split-cells", + "type": "subFeature", + "link": "features/tables#table-contextual-toolbar", + "name": "Merge & split cells", + "description": "The basic table features allow users to insert tables into content, add or remove columns and rows, and merge or split cells.", + "shortDescription": "Merge or split table cells as needed." + }, + { + "id": "nesting", + "type": "subFeature", + "link": "features/tables#nesting-tables", + "name": "Nesting", + "description": "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.", + "shortDescription": "Nest tables within other tables for complex layouts." + }, + { + "id": "styling-tables-and-cells", + "type": "subFeature", + "link": "features/tables-styling", + "name": "Styling tables & cells", + "description": "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.", + "shortDescription": "Apply custom styles to tables and individual cells." + }, + { + "id": "table-headers", + "type": "subFeature", + "link": "features/tables#default-table-headers", + "name": "Table headers", + "description": "To make every inserted table have n number of rows and columns as table headers by default, set an optional table configuration property defaultHeadings.", + "shortDescription": "Set default table headers for better structure." + }, + { + "id": "table-selection", + "type": "subFeature", + "link": "features/tables#table-selection", + "name": "Table selection", + "description": "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.", + "shortDescription": "Select and format specific table areas easily." + }, + { + "id": "tables-caption", + "type": "subFeature", + "link": "features/tables-caption", + "name": "Tables caption", + "description": "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.", + "shortDescription": "Add captions to tables to improve accessibility." + } + ] }, { "id": "text-alignment", @@ -443,79 +455,81 @@ "link": "features/basic-styles", "name": "Text formatting", "description": "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.", - "shortDescription": "Apply bold, italic, underline, and other formatting styles to text." - }, - { - "id": "bold", - "type": "subfeature", - "link": "features/basic-styles", - "name": "Bold", - "description": "Making the letters look like the good time were never gone.", - "shortDescription": "Make text bold for emphasis." - }, - { - "id": "code", - "type": "subfeature", - "link": "features/basic-styles", - "name": "Code", - "description": "Snippet look like a terminal from the 1990s movie.", - "shortDescription": "Insert inline code snippets for technical content." - }, - { - "id": "highlight", - "type": "subfeature", - "link": "features/highlight", - "name": "Highlight", - "description": "Highlight makes important content stand out, either with font color or background fill.", - "shortDescription": "Highlight text with color for emphasis." - }, - { - "id": "italic", - "type": "subfeature", - "link": "features/basic-styles", - "name": "Italic", - "description": "Making the letters look like seashore pines.", - "shortDescription": "Italicize text for subtle emphasis." - }, - { - "id": "strikethrough", - "type": "subfeature", - "link": "features/basic-styles", - "name": "Strikethrough", - "description": "Never mind, will not need it anymore.", - "shortDescription": "Strike through text to indicate removal." - }, - { - "id": "styles", - "type": "subfeature", - "link": "features/style", - "name": "Styles", - "description": "The styles feature lets you easily apply predefined styles available for block and inline content.", - "shortDescription": "Apply predefined styles to block and inline elements." - }, - { - "id": "subscript", - "type": "subfeature", - "link": "features/basic-styles", - "name": "Subscript", - "description": "Fine print at the bottom, like atom numbers.", - "shortDescription": "Add subscript text for chemical formulas or footnotes." - }, - { - "id": "superscript", - "type": "subfeature", - "link": "features/basic-styles", - "name": "Superscript", - "description": "Fine print on top, like references in a book.", - "shortDescription": "Add superscript text for exponents or references." - }, - { - "id": "underline", - "type": "subfeature", - "link": "features/basic-styles", - "name": "Underline", - "description": "Stuff looks important, yo. Or like a link, too.", - "shortDescription": "Underline text to highlight importance." + "shortDescription": "Apply bold, italic, underline, and other formatting styles to text.", + "subFeatures": [ + { + "id": "bold", + "type": "subFeature", + "link": "features/basic-styles", + "name": "Bold", + "description": "Making the letters look like the good time were never gone.", + "shortDescription": "Make text bold for emphasis." + }, + { + "id": "code", + "type": "subFeature", + "link": "features/basic-styles", + "name": "Code", + "description": "Snippet look like a terminal from the 1990s movie.", + "shortDescription": "Insert inline code snippets for technical content." + }, + { + "id": "highlight", + "type": "subFeature", + "link": "features/highlight", + "name": "Highlight", + "description": "Highlight makes important content stand out, either with font color or background fill.", + "shortDescription": "Highlight text with color for emphasis." + }, + { + "id": "italic", + "type": "subFeature", + "link": "features/basic-styles", + "name": "Italic", + "description": "Making the letters look like seashore pines.", + "shortDescription": "Italicize text for subtle emphasis." + }, + { + "id": "strikethrough", + "type": "subFeature", + "link": "features/basic-styles", + "name": "Strikethrough", + "description": "Never mind, will not need it anymore.", + "shortDescription": "Strike through text to indicate removal." + }, + { + "id": "styles", + "type": "subFeature", + "link": "features/style", + "name": "Styles", + "description": "The styles feature lets you easily apply predefined styles available for block and inline content.", + "shortDescription": "Apply predefined styles to block and inline elements." + }, + { + "id": "subscript", + "type": "subFeature", + "link": "features/basic-styles", + "name": "Subscript", + "description": "Fine print at the bottom, like atom numbers.", + "shortDescription": "Add subscript text for chemical formulas or footnotes." + }, + { + "id": "superscript", + "type": "subFeature", + "link": "features/basic-styles", + "name": "Superscript", + "description": "Fine print on top, like references in a book.", + "shortDescription": "Add superscript text for exponents or references." + }, + { + "id": "underline", + "type": "subFeature", + "link": "features/basic-styles", + "name": "Underline", + "description": "Stuff looks important, yo. Or like a link, too.", + "shortDescription": "Underline text to highlight importance." + } + ] }, { "id": "undo-redo", @@ -538,16 +552,18 @@ "name": "Asynchronous collaboration", "isPremium": true, "description": "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.", - "shortDescription": "Work collaboratively with team members asynchronously using Track Changes, Comments, and Revision History." - }, - { - "id": "local-data-storage", - "type": "subfeature", - "link": "features/collaboration", - "name": "Local data storage", - "isPremium": true, - "description": "In asynchronous collaboration, data is maintained on the client's servers.", - "shortDescription": "Store collaborative data on local client servers for security and control." + "shortDescription": "Work collaboratively with team members asynchronously using Track Changes, Comments, and Revision History.", + "subFeatures": [ + { + "id": "local-data-storage", + "type": "subFeature", + "link": "features/collaboration", + "name": "Local data storage", + "isPremium": true, + "description": "In asynchronous collaboration, data is maintained on the client's servers.", + "shortDescription": "Store collaborative data on local client servers for security and control." + } + ] }, { "id": "comments", @@ -556,34 +572,36 @@ "name": "Comments", "isPremium": true, "description": "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.", - "shortDescription": "Add, discuss, and resolve comments for seamless content collaboration." - }, - { - "id": "comments-archive", - "type": "subfeature", - "link": "features/comments", - "name": "Comments archive", - "isPremium": true, - "description": "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.", - "shortDescription": "Archive resolved comments for streamlined feedback management and future reference." - }, - { - "id": "comments-outside-editor", - "type": "subfeature", - "link": "features/comments-outside-editor", - "name": "Comments outside editor", - "isPremium": true, - "description": "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.", - "shortDescription": "Extend comment functionality to non-editor fields for enhanced application integration." - }, - { - "id": "sidebar-modes", - "type": "subfeature", - "link": "features/annotations-display-mode", - "name": "Sidebar modes", - "isPremium": true, - "description": "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.", - "shortDescription": "Choose between wide, narrow, or inline UIs to display annotations and comments." + "shortDescription": "Add, discuss, and resolve comments for seamless content collaboration.", + "subFeatures": [ + { + "id": "comments-archive", + "type": "subFeature", + "link": "features/comments", + "name": "Comments archive", + "isPremium": true, + "description": "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.", + "shortDescription": "Archive resolved comments for streamlined feedback management and future reference." + }, + { + "id": "comments-outside-editor", + "type": "subFeature", + "link": "features/comments-outside-editor", + "name": "Comments outside editor", + "isPremium": true, + "description": "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.", + "shortDescription": "Extend comment functionality to non-editor fields for enhanced application integration." + }, + { + "id": "sidebar-modes", + "type": "subFeature", + "link": "features/annotations-display-mode", + "name": "Sidebar modes", + "isPremium": true, + "description": "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.", + "shortDescription": "Choose between wide, narrow, or inline UIs to display annotations and comments." + } + ] }, { "id": "mentions", @@ -600,34 +618,36 @@ "name": "Real-time collaboration", "isPremium": true, "description": "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.", - "shortDescription": "Collaborate in real-time with automatic conflict resolution for seamless teamwork." - }, - { - "id": "co-authoring", - "type": "subfeature", - "link": "features/users-in-real-time-collaboration", - "name": "Co-authoring", - "isPremium": true, - "description": "Multiple user real-time editing and content creation feature.", - "shortDescription": "Edit and create content simultaneously with multiple users in real time." - }, - { - "id": "on-premises", - "type": "subfeature", - "link": "@cs", - "name": "onpremises/index On-premises", - "isPremium": true, - "description": "On-premises real-time collaboration version to deploy to client's own infrastructure, includes a private cloud.", - "shortDescription": "Deploy real-time collaboration on your infrastructure for full control and privacy." - }, - { - "id": "saas", - "type": "subfeature", - "link": "@cs", - "name": "guides/collaboration/quick-start SaaS", - "isPremium": true, - "description": "Real-time collaboration provided as a service by CKSource.", - "shortDescription": "Access real-time collaboration as a cloud service managed by CKSource." + "shortDescription": "Collaborate in real-time with automatic conflict resolution for seamless teamwork.", + "subFeatures": [ + { + "id": "co-authoring", + "type": "subFeature", + "link": "features/users-in-real-time-collaboration", + "name": "Co-authoring", + "isPremium": true, + "description": "Multiple user real-time editing and content creation feature.", + "shortDescription": "Edit and create content simultaneously with multiple users in real time." + }, + { + "id": "on-premises", + "type": "subFeature", + "link": "@cs", + "name": "onpremises/index On-premises", + "isPremium": true, + "description": "On-premises real-time collaboration version to deploy to client's own infrastructure, includes a private cloud.", + "shortDescription": "Deploy real-time collaboration on your infrastructure for full control and privacy." + }, + { + "id": "saas", + "type": "subFeature", + "link": "@cs", + "name": "guides/collaboration/quick-start SaaS", + "isPremium": true, + "description": "Real-time collaboration provided as a service by CKSource.", + "shortDescription": "Access real-time collaboration as a cloud service managed by CKSource." + } + ] }, { "id": "revision-history", @@ -668,31 +688,33 @@ "link": "features/export-pdf", "name": "Content generation", "isPremium": true, - "description": "CKEditor 5 may be your universal starting point for generating content in several recognizable formats." - }, - { - "id": "export-to-pdf", - "type": "subfeature", - "link": "features/export-pdf", - "name": "Export to PDF", - "isPremium": true, - "description": "Create a PDF from in-editor content seamlessly. Customize headers and footers, include page breaks, embed images, and choose from various fonts." - }, - { - "id": "export-to-word", - "type": "subfeature", - "link": "features/export-word", - "name": "Export to Word", - "isPremium": true, - "description": "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." - }, - { - "id": "import-from-word", - "type": "subfeature", - "link": "features/import-word", - "name": "Import from Word", - "isPremium": true, - "description": "Effortlessly transform Word documents into clean HTML within CKEditor 5 while retaining the original styling, as well as comments and change tracking annotations." + "description": "CKEditor 5 may be your universal starting point for generating content in several recognizable formats.", + "subFeatures": [ + { + "id": "export-to-pdf", + "type": "subFeature", + "link": "features/export-pdf", + "name": "Export to PDF", + "isPremium": true, + "description": "Create a PDF from in-editor content seamlessly. Customize headers and footers, include page breaks, embed images, and choose from various fonts." + }, + { + "id": "export-to-word", + "type": "subFeature", + "link": "features/export-word", + "name": "Export to Word", + "isPremium": true, + "description": "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." + }, + { + "id": "import-from-word", + "type": "subFeature", + "link": "features/import-word", + "name": "Import from Word", + "isPremium": true, + "description": "Effortlessly transform Word documents into clean HTML within CKEditor 5 while retaining the original styling, as well as comments and change tracking annotations." + } + ] }, { "id": "markdown-output", @@ -741,28 +763,30 @@ "type": "feature", "link": "features/minimap", "name": "Page utilities", - "description": "CKEditor 5 Page Utilities enables users to dictate the structuring and print formatting of their documents effectively." - }, - { - "id": "content-minimap", - "type": "subfeature", - "link": "features/minimap", - "name": "Content minimap", - "description": "Offers a concise, birds-eye view of the document's content, allowing for quick navigation and content management." - }, - { - "id": "document-title", - "type": "subfeature", - "link": "features/title", - "name": "Document title", - "description": "Allows users to set and modify the document's title within the editing interface, ensuring accurate reflection of the contents." - }, - { - "id": "page-break", - "type": "subfeature", - "link": "features/page-break", - "name": "Page break", - "description": "Facilitates the insertion of manual breaks within the document, enabling the definition of page endings and beginnings for optimal layout and print clarity." + "description": "CKEditor 5 Page Utilities enables users to dictate the structuring and print formatting of their documents effectively.", + "subFeatures": [ + { + "id": "content-minimap", + "type": "subFeature", + "link": "features/minimap", + "name": "Content minimap", + "description": "Offers a concise, birds-eye view of the document's content, allowing for quick navigation and content management." + }, + { + "id": "document-title", + "type": "subFeature", + "link": "features/title", + "name": "Document title", + "description": "Allows users to set and modify the document's title within the editing interface, ensuring accurate reflection of the contents." + }, + { + "id": "page-break", + "type": "subFeature", + "link": "features/page-break", + "name": "Page break", + "description": "Facilitates the insertion of manual breaks within the document, enabling the definition of page endings and beginnings for optimal layout and print clarity." + } + ] }, { "id": "pagination", @@ -801,39 +825,41 @@ "link": "features/autoformat", "name": "Automation", "description": "Automate your workflow with CKEditor 5 automation tools, regardless of whether you write, link, or save!", - "shortDescription": "Streamline tasks like formatting, linking, and saving with automation tools." - }, - { - "id": "autoformatting", - "type": "subfeature", - "link": "features/autoformat", - "name": "Autoformatting", - "description": "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.", - "shortDescription": "Quickly format content using Markdown-like shortcuts." - }, - { - "id": "autolink", - "type": "subfeature", - "link": "features/link#autolink-feature", - "name": "Autolink", - "description": "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.", - "shortDescription": "Automatically convert URLs and emails into clickable links." - }, - { - "id": "automatic-text-transformation", - "type": "subfeature", - "link": "features/text-transformation", - "name": "Automatic text transformations", - "description": "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.", - "shortDescription": "Automatically expand abbreviations or autocorrect text based on predefined rules." - }, - { - "id": "autosave", - "type": "subfeature", - "link": "features/autosave", - "name": "Autosave", - "description": "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.", - "shortDescription": "Automatically save changes for uninterrupted workflow." + "shortDescription": "Streamline tasks like formatting, linking, and saving with automation tools.", + "subFeatures": [ + { + "id": "autoformatting", + "type": "subFeature", + "link": "features/autoformat", + "name": "Autoformatting", + "description": "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.", + "shortDescription": "Quickly format content using Markdown-like shortcuts." + }, + { + "id": "autolink", + "type": "subFeature", + "link": "features/link#autolink-feature", + "name": "Autolink", + "description": "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.", + "shortDescription": "Automatically convert URLs and emails into clickable links." + }, + { + "id": "automatic-text-transformation", + "type": "subFeature", + "link": "features/text-transformation", + "name": "Automatic text transformations", + "description": "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.", + "shortDescription": "Automatically expand abbreviations or autocorrect text based on predefined rules." + }, + { + "id": "autosave", + "type": "subFeature", + "link": "features/autosave", + "name": "Autosave", + "description": "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.", + "shortDescription": "Automatically save changes for uninterrupted workflow." + } + ] }, { "id": "case-change", @@ -964,49 +990,51 @@ "type": "feature", "link": "getting-started/setup/editor-types", "name": "Editor UI types", - "description": "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." - }, - { - "id": "balloon-block-editor", - "type": "subfeature", - "link": "getting-started/setup/editor-types#balloon-editor-and-balloon-block-editor", - "name": "Balloon block editor", - "description": "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." - }, - { - "id": "balloon-editor", - "type": "subfeature", - "link": "getting-started/setup/editor-types#balloon-editor-and-balloon-block-editor", - "name": "Balloon block editor", - "description": "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)." - }, - { - "id": "classic-editor", - "type": "subfeature", - "link": "getting-started/setup/editor-types#classic-editor", - "name": "Classic editor", - "description": "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." - }, - { - "id": "decoupled-editor", - "type": "subfeature", - "link": "getting-started/setup/editor-types#decoupled-editor-document", - "name": "Decoupled editor", - "description": "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." - }, - { - "id": "inline-editor", - "type": "subfeature", - "link": "getting-started/setup/editor-types#inline-editor", - "name": "Inline editor", - "description": "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." - }, - { - "id": "multi-root-editor", - "type": "subfeature", - "link": "getting-started/setup/editor-types#multi-root-editor", - "name": "Multi-root editor", - "description": "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." + "description": "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.", + "subFeatures": [ + { + "id": "balloon-block-editor", + "type": "subFeature", + "link": "getting-started/setup/editor-types#balloon-editor-and-balloon-block-editor", + "name": "Balloon block editor", + "description": "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." + }, + { + "id": "balloon-editor", + "type": "subFeature", + "link": "getting-started/setup/editor-types#balloon-editor-and-balloon-block-editor", + "name": "Balloon block editor", + "description": "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)." + }, + { + "id": "classic-editor", + "type": "subFeature", + "link": "getting-started/setup/editor-types#classic-editor", + "name": "Classic editor", + "description": "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." + }, + { + "id": "decoupled-editor", + "type": "subFeature", + "link": "getting-started/setup/editor-types#decoupled-editor-document", + "name": "Decoupled editor", + "description": "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." + }, + { + "id": "inline-editor", + "type": "subFeature", + "link": "getting-started/setup/editor-types#inline-editor", + "name": "Inline editor", + "description": "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." + }, + { + "id": "multi-root-editor", + "type": "subFeature", + "link": "getting-started/setup/editor-types#multi-root-editor", + "name": "Multi-root editor", + "description": "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." + } + ] }, { "id": "professionally-translated-language-packs", @@ -1020,77 +1048,79 @@ "type": "feature", "link": "getting-started/setup/toolbar", "name": "Toolbar and menus", - "description": "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." - }, - { - "id": "balloon-toolbar", - "type": "subfeature", - "link": "getting-started/setup/toolbar#balloon-toolbar", - "name": "Balloon toolbar", - "description": "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." - }, - { - "id": "block-toolbar", - "type": "subfeature", - "link": "getting-started/setup/toolbar#block-toolbar", - "name": "Block toolbar", - "description": "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)." - }, - { - "id": "classic-toolbar", - "type": "subfeature", - "link": "getting-started/setup/toolbar#main-editor-toolbar", - "name": "Classic toolbar", - "description": "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." - }, - { - "id": "collapsible-toolbar", - "type": "subfeature", - "link": "getting-started/setup/toolbar#extended-toolbar-configuration-format", - "name": "Collapsible toolbar", - "description": "Collapsible toolbar for UI space efficiency." - }, - { - "id": "image-contextual-toolbar", - "type": "subfeature", - "link": "features/images-overview#image-contextual-toolbar", - "name": "Image contextual toolbar", - "description": "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." - }, - { - "id": "menu-bar", - "type": "subfeature", - "link": "getting-started/setup/menubar", - "name": "Menu bar", - "description": "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." - }, - { - "id": "multiline-toolbar", - "type": "subfeature", - "link": "getting-started/setup/toolbar#multiline-wrapping-toolbar", - "name": "Multiline toolbar", - "description": "Multiline toolbar for easy access to all functions." - }, - { - "id": "nesting-toolbars-in-dropdowns", - "type": "subfeature", - "link": "getting-started/setup/toolbar#grouping-toolbar-items-in-dropdowns-nested-toolbars", - "name": "Nesting toolbars in dropdowns", - "description": "Nested toolbars for space efficiency and task-oriented access." - }, - { - "id": "sidebar-annotations-bar", - "type": "subfeature", - "link": "features/annotations-display-mode#wide-sidebar", - "name": "Wide sidebar", - "description": "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." - }, - { - "id": "table-contextual-toolbar", - "type": "subfeature", - "link": "features/tables#table-contextual-toolbar", - "name": "Table contextual toolbar", - "description": "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." + "description": "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.", + "subFeatures": [ + { + "id": "balloon-toolbar", + "type": "subFeature", + "link": "getting-started/setup/toolbar#balloon-toolbar", + "name": "Balloon toolbar", + "description": "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." + }, + { + "id": "block-toolbar", + "type": "subFeature", + "link": "getting-started/setup/toolbar#block-toolbar", + "name": "Block toolbar", + "description": "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)." + }, + { + "id": "classic-toolbar", + "type": "subFeature", + "link": "getting-started/setup/toolbar#main-editor-toolbar", + "name": "Classic toolbar", + "description": "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." + }, + { + "id": "collapsible-toolbar", + "type": "subFeature", + "link": "getting-started/setup/toolbar#extended-toolbar-configuration-format", + "name": "Collapsible toolbar", + "description": "Collapsible toolbar for UI space efficiency." + }, + { + "id": "image-contextual-toolbar", + "type": "subFeature", + "link": "features/images-overview#image-contextual-toolbar", + "name": "Image contextual toolbar", + "description": "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." + }, + { + "id": "menu-bar", + "type": "subFeature", + "link": "getting-started/setup/menubar", + "name": "Menu bar", + "description": "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." + }, + { + "id": "multiline-toolbar", + "type": "subFeature", + "link": "getting-started/setup/toolbar#multiline-wrapping-toolbar", + "name": "Multiline toolbar", + "description": "Multiline toolbar for easy access to all functions." + }, + { + "id": "nesting-toolbars-in-dropdowns", + "type": "subFeature", + "link": "getting-started/setup/toolbar#grouping-toolbar-items-in-dropdowns-nested-toolbars", + "name": "Nesting toolbars in dropdowns", + "description": "Nested toolbars for space efficiency and task-oriented access." + }, + { + "id": "sidebar-annotations-bar", + "type": "subFeature", + "link": "features/annotations-display-mode#wide-sidebar", + "name": "Wide sidebar", + "description": "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." + }, + { + "id": "table-contextual-toolbar", + "type": "subFeature", + "link": "features/tables#table-contextual-toolbar", + "name": "Table contextual toolbar", + "description": "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." + } + ] }, { "id": "watchdog", @@ -1159,21 +1189,23 @@ "type": "feature", "link": "framework/index", "name": "Editor SDK", - "description": "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." - }, - { - "id": "ckeditor5-inspector", - "type": "subfeature", - "link": "framework/development-tools/inspector", - "name": "CKEditor 5 inspector", - "description": "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}." - }, - { - "id": "cloud-services-rest-api", - "type": "subfeature", - "link": "@cs", - "name": "developer-resources/apis/overview Cloud Services REST API", - "description": "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." + "description": "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.", + "subFeatures": [ + { + "id": "ckeditor5-inspector", + "type": "subFeature", + "link": "framework/development-tools/inspector", + "name": "CKEditor 5 inspector", + "description": "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}." + }, + { + "id": "cloud-services-rest-api", + "type": "subFeature", + "link": "@cs", + "name": "developer-resources/apis/overview Cloud Services REST API", + "description": "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." + } + ] }, { "id": "themes", @@ -1234,4 +1266,4 @@ } ] } -] +] \ No newline at end of file From 2bdb0426d1c4b48a693aa3fff64ee454357b9311 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotrek=20Koszuli=C5=84ski?= Date: Fri, 29 Nov 2024 13:13:04 +0100 Subject: [PATCH 10/20] HTML output. --- docs/_snippets/features-digest-generator.mjs | 57 + docs/_snippets/features-digest-output.html | 1620 ++++++++++++++++++ 2 files changed, 1677 insertions(+) create mode 100644 docs/_snippets/features-digest-generator.mjs create mode 100644 docs/_snippets/features-digest-output.html diff --git a/docs/_snippets/features-digest-generator.mjs b/docs/_snippets/features-digest-generator.mjs new file mode 100644 index 00000000000..ad8628d359c --- /dev/null +++ b/docs/_snippets/features-digest-generator.mjs @@ -0,0 +1,57 @@ +/** + * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved. + * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license + */ + +/* eslint-env node */ + +import upath from 'upath'; +import fs from 'fs-extra'; + +( async () => { + const digest = await fs.readJson( upath.join( import.meta.dirname, './features-digest-source.json' ) ); + + const output = []; + + digest.forEach( capability => { + output.push( generateCapability( capability ) ); + } ); + + await fs.writeFile( upath.join( import.meta.dirname, './features-digest-output.html' ), output.join( '\n' ) ); +} )(); + +function generateCapability( capability ) { + return ` +
+

${ capability.name }

+

${ capability.description }

+
+ ${ capability.features.map( feature => generateFeature( feature ) ).join( '\n' ) } +
+
+ `; +} + +function generateFeature( feature, isSubFeature = false ) { + const subFeatures = feature.subFeatures; + let subFeaturesOutput = ''; + + if ( subFeatures ) { + subFeaturesOutput = ` +
+ ${ subFeatures.map( subFeatures => generateFeature( subFeatures, true ) ).join( '\n' ) } +
+ `; + } + + return ` +
+

${ feature.name }

+

+ ${ feature.shortDescription } + ${ feature.description } +

+ ${ subFeaturesOutput } +
+ `; +} diff --git a/docs/_snippets/features-digest-output.html b/docs/_snippets/features-digest-output.html new file mode 100644 index 00000000000..2cf1c3d8f71 --- /dev/null +++ b/docs/_snippets/features-digest-output.html @@ -0,0 +1,1620 @@ + +
+

Core editing

+

Core editing capability provides tools to create, edit, and style content. Here are essentials that every writer needs in their tool belt, like bold or italics. There is also something for coders - advanced HTML editing capabilities where you can directly edit HTML elements.

+
+ +
+

Advanced HTML Editing

+

+ Edit and customize HTML elements, attributes, and styles with full control. + 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. +

+ +
+ +
+

Full page HTML

+

+ Edit entire HTML documents, including metadata, beyond visible content. + 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. +

+ +
+ + +
+

General HTML Support (GHS)

+

+ Enable unsupported HTML elements, attributes, and styles in the editor. + 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. +

+ +
+ + +
+

HTML comment

+

+ Keep HTML comments in your document without displaying them to users. + 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. +

+ +
+ + +
+

HTML embed

+

+ Embed custom HTML snippets directly into your content. + 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. +

+ +
+ + +
+

Show blocks

+

+ Visualize and outline all block-level elements in your content. + 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. +

+ +
+ + +
+

Source editing

+

+ View and edit the source code of your document. + The source editing feature lets you view and edit the source of your document. +

+ +
+ +
+ +
+ + +
+

Block formatting

+

+ Organize and emphasize content with headings, block quotes, and horizontal lines. + 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. +

+ +
+ +
+

Block quote

+

+ Add visually distinct block quotes to emphasize key excerpts. + 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. +

+ +
+ + +
+

Headings/paragraph

+

+ Structure content with headings for better readability and hierarchy. + 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. +

+ +
+ + +
+

Horizontal line

+

+ Insert horizontal lines to divide content or indicate topic changes. + 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. +

+ +
+ + +
+

Block indentation

+

+ Adjust text block indentation for better content structure. + 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. +

+ +
+ +
+ +
+ + +
+

Bookmarks

+

+ Add bookmarks for quick navigation to key content sections. + 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. +

+ +
+ + +
+

Clipboard

+

+ Easily copy, cut, and paste content within or outside the editor. + Copy, cut, and paste content within the editor or from external sources. +

+ +
+ + +
+

Code blocks

+

+ Insert preformatted code snippets with distinct styling. + Supports the insertion and management of pre-formatted code snippets with distinct styling. +

+ +
+ + +
+

Drag and drop

+

+ Reorganize text and elements using drag-and-drop functionality. + Rearrange elements within a document, including moving text blocks, images, or other content types. +

+ +
+ + +
+

Font formatting

+

+ Customize font family, size, and color for tailored text presentation. + The font feature lets you change font family, size, and color (including background color). All of these options are configurable. +

+ +
+ +
+

Font background color

+

+ Highlight text with a colored background for emphasis. + Effortlessly make the words stand out even more with a colored background. +

+ +
+ + +
+

Font color

+

+ Apply custom colors to text for improved readability or style. + Effortlessly make the letters stand out with their own color. +

+ +
+ + +
+

Font family

+

+ Choose suitable font families for your content needs. + Choose from a predefined set of fonts, depending on the type of content and its destination - print, screen, etc. +

+ +
+ + +
+

Font size

+

+ Adjust font size for better readability and emphasis. + Easily control the size of the letters. +

+ +
+ +
+ +
+ + +
+

Image

+

+ Add, style, and manage images with captions, resizing, and linking options. + The image feature allows adding images of various kinds to the rich content inside the editor. A large set of subFeature background-grays 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. +

+ +
+ +
+

Image alt text

+

+ Add alt text to images for accessibility and SEO improvements. + Add description text, AKA alternative text, for images. Alt text improves accessibility by telling screen readers and search engines what the image depicts. +

+ +
+ + +
+

Image captions

+

+ Add captions below images to provide context. + Add optional captions for images, which are shown below the picture. +

+ +
+ + +
+

Image insert via URL

+

+ Insert images directly using their URLs. + 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. +

+ +
+ + +
+

Image linking

+

+ Turn images into clickable links for interactive content. + The {@link module:link/linkimage~LinkImage} plugin lets you use images as links. +

+ +
+ + +
+

Image resize

+

+ Easily resize images for better content fit. + 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. +

+ +
+ + +
+

Image styles

+

+ Apply custom styles and alignments to images. + 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. +

+ +
+ + +
+

Image upload

+

+ Upload images directly from your device to the editor. + 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. +

+ +
+ + +
+

Responsive images

+

+ Automatically optimize images for different screen sizes. + 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. +

+ +
+ +
+ +
+ + +
+

Links

+

+ Add and manage hyperlinks in your text. + Facilitates the addition of hyperlinks to text, automatically converting typed or pasted URLs into clickable links, and allowing manual insertion and editing of links. +

+ +
+ + +
+

Lists

+

+ Create to-do, bulleted, and numbered lists with customizable styles. + 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. +

+ +
+ +
+

List indentation

+

+ Control list item indentation for nested lists. + Besides controlling {@link features/indent text block indentation}, the indent and outdent buttons allow for indenting list items (nesting them). +

+ +
+ + +
+

List start index

+

+ Set custom start numbers for ordered lists. + 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. +

+ +
+ + +
+

List styles

+

+ Customize list markers for unique 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. +

+ +
+ + +
+

Multi-level lists

+

+ Create hierarchical multi-level lists with numbering. + 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. +

+ +
+ + +
+

Nested lists

+

+ Easily create nested lists for complex content. + Besides controlling {@link features/indent text block indentation}, the indent and outdent buttons allow for indenting list items (nesting them). +

+ +
+ + +
+

Ordered lists

+

+ Add structured ordered lists with flexible formatting options. + 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. +

+ +
+ + +
+

Reversed list

+

+ Reverse list numbering for countdowns or steps. + 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). +

+ +
+ + +
+

To-do lists

+

+ Create interactive to-do lists with checkboxes. + 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. +

+ +
+ + +
+

Unordered lists

+

+ Add unordered lists with customizable markers. + 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. +

+ +
+ +
+ +
+ + +
+

Mermaid

+

+ Create diagrams and charts using Markdown-inspired syntax. + 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. +

+ +
+ + +
+

Remove formatting

+

+ Quickly strip inline styles and formatting from text. + 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). +

+ +
+ + +
+

Select all

+

+ Select all content within the editor instantly. + Enables the selection of all content within the editor with a single command or shortcut. +

+ +
+ + +
+

Tables

+

+ Design and manage tables with advanced editing options. + 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. +

+ +
+ +
+

Columns resizing

+

+ Resize table columns for precise layout control. + The {@link module:table/tablecolumnresize~TableColumnResize} plugin lets you resize tables and individual table columns. It gives you complete control over column width. +

+ +
+ + +
+

Insert/delete columns & rows

+

+ Easily add or remove table rows and columns. + The basic table features allow users to insert tables into content, add or remove columns and rows and merge or split cells. +

+ +
+ + +
+

Merge & split cells

+

+ Merge or split table cells as needed. + The basic table features allow users to insert tables into content, add or remove columns and rows, and merge or split cells. +

+ +
+ + +
+

Nesting

+

+ Nest tables within other tables for complex layouts. + 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. +

+ +
+ + +
+

Styling tables & cells

+

+ Apply custom styles to tables and individual 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. +

+ +
+ + +
+

Table headers

+

+ Set default table headers for better structure. + To make every inserted table have n number of rows and columns as table headers by default, set an optional table configuration property defaultHeadings. +

+ +
+ + +
+

Table selection

+

+ Select and format specific table areas easily. + 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. +

+ +
+ + +
+

Tables caption

+

+ Add captions to tables to improve accessibility. + 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. +

+ +
+ +
+ +
+ + +
+

Text alignment

+

+ Align text left, right, center, or justify with ease. + Allows the adjustment of text alignment to the left, right, center, or justify and permits the alteration of indentation. +

+ +
+ + +
+

Text formatting

+

+ Apply bold, italic, underline, and other formatting styles to text. + 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. +

+ +
+ +
+

Bold

+

+ Make text bold for emphasis. + Making the letters look like the good time were never gone. +

+ +
+ + +
+

Code

+

+ Insert inline code snippets for technical content. + Snippet look like a terminal from the 1990s movie. +

+ +
+ + +
+

Highlight

+

+ Highlight text with color for emphasis. + Highlight makes important content stand out, either with font color or background fill. +

+ +
+ + +
+

Italic

+

+ Italicize text for subtle emphasis. + Making the letters look like seashore pines. +

+ +
+ + +
+

Strikethrough

+

+ Strike through text to indicate removal. + Never mind, will not need it anymore. +

+ +
+ + +
+

Styles

+

+ Apply predefined styles to block and inline elements. + The styles feature lets you easily apply predefined styles available for block and inline content. +

+ +
+ + +
+

Subscript

+

+ Add subscript text for chemical formulas or footnotes. + Fine print at the bottom, like atom numbers. +

+ +
+ + +
+

Superscript

+

+ Add superscript text for exponents or references. + Fine print on top, like references in a book. +

+ +
+ + +
+

Underline

+

+ Underline text to highlight importance. + Stuff looks important, yo. Or like a link, too. +

+ +
+ +
+ +
+ + +
+

Undo/redo

+

+ Easily undo or redo recent actions. + Backtrack or repeat actions for editing purposes. +

+ +
+ +
+
+ + +
+

Collaboration

+

Collaborate with others - real-time or asynchronously. Comment, co-author, and mention team members in your documents. With collaboration features review process should be a breeze.

+
+ +
+

Asynchronous collaboration

+

+ Work collaboratively with team members asynchronously using Track Changes, Comments, and Revision History. + 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. +

+ +
+ +
+

Local data storage

+

+ Store collaborative data on local client servers for security and control. + In asynchronous collaboration, data is maintained on the client's servers. +

+ +
+ +
+ +
+ + +
+

Comments

+

+ Add, discuss, and resolve comments for seamless content collaboration. + 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. +

+ +
+ +
+

Comments archive

+

+ Archive resolved comments for streamlined feedback management and future reference. + 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. +

+ +
+ + +
+

Comments outside editor

+

+ Extend comment functionality to non-editor fields for enhanced application integration. + 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. +

+ +
+ + +
+

Sidebar modes

+

+ Choose between wide, narrow, or inline UIs to display annotations and comments. + 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. +

+ +
+ +
+ +
+ + +
+

Mentions

+

+ Notify and tag users in content using smart autocompletion with @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. +

+ +
+ + +
+

Real-time collaboration

+

+ Collaborate in real-time with automatic conflict resolution for seamless teamwork. + 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. +

+ +
+ +
+

Co-authoring

+

+ Edit and create content simultaneously with multiple users in real time. + Multiple user real-time editing and content creation feature. +

+ +
+ + +
+

onpremises/index On-premises

+

+ Deploy real-time collaboration on your infrastructure for full control and privacy. + On-premises real-time collaboration version to deploy to client's own infrastructure, includes a private cloud. +

+ +
+ + +
+

guides/collaboration/quick-start SaaS

+

+ Access real-time collaboration as a cloud service managed by CKSource. + Real-time collaboration provided as a service by CKSource. +

+ +
+ +
+ +
+ + +
+

Revision history

+

+ Track, compare, and restore document versions with detailed revision history. + 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. +

+ +
+ + +
+

Track changes

+

+ Monitor and manage document edits with automatic suggestion tracking. + 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. +

+ +
+ + +
+

Users list and permissions

+

+ Manage user roles and permissions for secure, collaborative editing. + 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. +

+ +
+ +
+
+ + +
+

Content conversion & embedding

+

+
+ +
+

Content generation

+

+ undefined + CKEditor 5 may be your universal starting point for generating content in several recognizable formats. +

+ +
+ +
+

Export to PDF

+

+ undefined + Create a PDF from in-editor content seamlessly. Customize headers and footers, include page breaks, embed images, and choose from various fonts. +

+ +
+ + +
+

Export to Word

+

+ undefined + 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. +

+ +
+ + +
+

Import from Word

+

+ undefined + Effortlessly transform Word documents into clean HTML within CKEditor 5 while retaining the original styling, as well as comments and change tracking annotations. +

+ +
+ +
+ +
+ + +
+

Markdown output

+

+ undefined + 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. +

+ +
+ + +
+

Media embed

+

+ undefined + Use the insert media button in the toolbar to embed media. Pasting a media URL directly into the editor content automatically embeds the media. +

+ +
+ + +
+

Paste Markdown

+

+ undefined + 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. +

+ +
+ + +
+

XML output

+

+ undefined + Turn your content into parsable XML files for automation and cross-platform interoperability. +

+ +
+ +
+
+ + +
+

Page management

+

Format, organize, and navigate your documents easily with page management features. Create a table of contents, insert page breaks, and manage pagination.

+
+ +
+

Document outline

+

+ undefined + 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. +

+ +
+ + +
+

Page utilities

+

+ undefined + CKEditor 5 Page Utilities enables users to dictate the structuring and print formatting of their documents effectively. +

+ +
+ +
+

Content minimap

+

+ undefined + Offers a concise, birds-eye view of the document's content, allowing for quick navigation and content management. +

+ +
+ + +
+

Document title

+

+ undefined + Allows users to set and modify the document's title within the editing interface, ensuring accurate reflection of the contents. +

+ +
+ + +
+

Page break

+

+ undefined + Facilitates the insertion of manual breaks within the document, enabling the definition of page endings and beginnings for optimal layout and print clarity. +

+ +
+ +
+ +
+ + +
+

Pagination

+

+ undefined + 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. +

+ +
+ + +
+

Table of contents

+

+ undefined + 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. +

+ +
+ +
+
+ + +
+

Productivity

+

Speed up the content creation process with dedicated productivity utilities. Autoformat your content as you write (or paste from other editors) or even delegate some tasks to an AI Assistant.

+
+ +
+

AI Assistant

+

+ Leverage AI for content creation, processing, and customizable integrations. + 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. +

+ +
+ + +
+

Automation

+

+ Streamline tasks like formatting, linking, and saving with automation tools. + Automate your workflow with CKEditor 5 automation tools, regardless of whether you write, link, or save! +

+ +
+ +
+

Autoformatting

+

+ Quickly format content using Markdown-like shortcuts. + 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. +

+ +
+ + +
+

Autolink

+

+ Automatically convert URLs and emails into clickable links. + 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. +

+ +
+ + +
+

Automatic text transformations

+

+ Automatically expand abbreviations or autocorrect text based on predefined rules. + 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. +

+ +
+ + +
+

Autosave

+

+ Automatically save changes for uninterrupted workflow. + 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. +

+ +
+ +
+ +
+ + +
+

Case change

+

+ Easily switch text cases between uppercase, lowercase, and title case. + 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. +

+ +
+ + +
+

Find and replace

+

+ Search and replace text efficiently across your document. + 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. +

+ +
+ + +
+

Format painter

+

+ Clone and apply formatting for consistent styling across sections. + 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. +

+ +
+ + +
+

Keyboard shortcuts

+

+ Boost productivity with keyboard shortcuts for editing and accessibility. + CKEditor 5 supports various keyboard shortcuts that boost productivity and provide necessary accessibility to screen reader users. +

+ +
+ + +
+

MathType

+

+ Insert formatted math equations and chemical formulas into your content. + 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. +

+ +
+ + +
+

Merge fields

+

+ Add placeholders for dynamic values in templates and documents. + 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. +

+ +
+ + +
+

Paste from Google Docs

+

+ Retain formatting when pasting content 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. +

+ +
+ + +
+

Paste from Office

+

+ Preserve formatting and structure when pasting from Microsoft 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. +

+ +
+ + +
+

Paste from Office Enhanced

+

+ Accurately preserve advanced formatting when pasting from Word or Excel. + 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. +

+ +
+ + +
+

Paste plain text

+

+ Paste content without formatting for clean and consistent styling. + 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. +

+ +
+ + +
+

Slash commands

+

+ Quickly add and style content using slash commands for efficiency. + 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. +

+ +
+ + +
+

Special characters

+

+ Add unique symbols, characters, and emojis to your content. + 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. +

+ +
+ + +
+

Templates

+

+ Insert predefined templates for faster and consistent document creation. + 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. +

+ +
+ +
+
+ + +
+

Configurations

+

Configure CKEditor 5 to your liking. Choose the editor type, modify the toolbar, and select a language from our translated language packs.

+
+ +
+

Editor placeholder

+

+ undefined + 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. +

+ +
+ + +
+

Editor UI types

+

+ undefined + 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. +

+ +
+ +
+

Balloon block editor

+

+ undefined + 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. +

+ +
+ + +
+

Balloon block editor

+

+ undefined + 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). +

+ +
+ + +
+

Classic editor

+

+ undefined + 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. +

+ +
+ + +
+

Decoupled editor

+

+ undefined + 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. +

+ +
+ + +
+

Inline editor

+

+ undefined + 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. +

+ +
+ + +
+

Multi-root editor

+

+ undefined + 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. +

+ +
+ +
+ +
+ + +
+

Professionally translated language packs

+

+ undefined + 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 +

+ +
+ + +
+

Toolbar and menus

+

+ undefined + 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. +

+ +
+ +
+

Balloon toolbar

+

+ undefined + 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. +

+ +
+ + +
+

Block toolbar

+

+ undefined + 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). +

+ +
+ + +
+

Classic toolbar

+

+ undefined + 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. +

+ +
+ + +
+

Collapsible toolbar

+

+ undefined + Collapsible toolbar for UI space efficiency. +

+ +
+ + +
+

Image contextual toolbar

+

+ undefined + 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. +

+ +
+ + +
+

Menu bar

+

+ undefined + 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. +

+ +
+ + +
+

Multiline toolbar

+

+ undefined + Multiline toolbar for easy access to all functions. +

+ +
+ + +
+

Nesting toolbars in dropdowns

+

+ undefined + Nested toolbars for space efficiency and task-oriented access. +

+ +
+ + +
+

Wide sidebar

+

+ undefined + 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. +

+ +
+ + +
+

Table contextual toolbar

+

+ undefined + 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. +

+ +
+ +
+ +
+ + +
+

Watchdog

+

+ undefined + 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. +

+ +
+ +
+
+ + +
+

Compliance

+

Make your content accessible to any person or restrict it to specific users.

+
+ +
+

Accessibility support

+

+ undefined + 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. +

+ +
+ + +
+

Read-only support

+

+ undefined + 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. +

+ +
+ + +
+

Restricted editing

+

+ undefined + 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. +

+ +
+ + +
+

Text Part Language

+

+ undefined + 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. +

+ +
+ + +
+

Word and character counter

+

+ undefined + 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. +

+ +
+ + +
+

WProofreader

+

+ undefined + 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. +

+ +
+ +
+
+ + +
+

Customization

+

Customize your editor even further. Use components and helpers from our UI library to create a UI that will match your design system.

+
+ +
+

Editor SDK

+

+ undefined + 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. +

+ +
+ +
+

CKEditor 5 inspector

+

+ undefined + 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}. +

+ +
+ + +
+

developer-resources/apis/overview Cloud Services REST API

+

+ undefined + 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. +

+ +
+ +
+ +
+ + +
+

Themes

+

+ undefined + The default theme of CKEditor 5 can be customized to match most visual integration requirements. +

+ +
+ + +
+

UI Library

+

+ undefined + 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. +

+ +
+ +
+
+ + +
+

File management

+

Upload and manage your files using file management features. Take advantage of CKBox, our file management solution, or create your own using an adapter.

+
+ +
+

Base64 Upload Adapter

+

+ undefined + Convert inserted images into Base64-encoded strings in the editor output. Images are stored with other content in the database without server-side processing. +

+ +
+ + +
+

CKBox

+

+ undefined + 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. +

+ +
+ + +
+

CKFinder

+

+ undefined + 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. +

+ +
+ + +
+

Custom Upload Adapter

+

+ undefined + Have your own file management solution? Use this adapter to integrate your preferred software with CKEditor. +

+ +
+ + +
+

Simple Upload Adapter

+

+ undefined + Upload images to your server using the XMLHttpRequest API with a minimal editor configuration. +

+ +
+ +
+
+ \ No newline at end of file From 4be0c53c25a7afc246ffaca22073c39a069c6752 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotrek=20Koszuli=C5=84ski?= Date: Fri, 29 Nov 2024 14:42:16 +0100 Subject: [PATCH 11/20] Added remaining descriptions. --- docs/_snippets/features-digest-source.json | 145 ++++++++++++++------- 1 file changed, 97 insertions(+), 48 deletions(-) diff --git a/docs/_snippets/features-digest-source.json b/docs/_snippets/features-digest-source.json index 6b13b0e26f6..909693b55dd 100644 --- a/docs/_snippets/features-digest-source.json +++ b/docs/_snippets/features-digest-source.json @@ -680,7 +680,7 @@ }, { "name": "Content conversion & embedding", - "description": "", + "description": "Collaborate also regarding different formats. With content conversions, you can integrate content across commonly used business formats. You can also enrich your content with media embeds.", "features": [ { "id": "content-generation", @@ -689,6 +689,7 @@ "name": "Content generation", "isPremium": true, "description": "CKEditor 5 may be your universal starting point for generating content in several recognizable formats.", + "shortDescription": "Generate content in multiple formats like PDF and Word.", "subFeatures": [ { "id": "export-to-pdf", @@ -696,7 +697,8 @@ "link": "features/export-pdf", "name": "Export to PDF", "isPremium": true, - "description": "Create a PDF from in-editor content seamlessly. Customize headers and footers, include page breaks, embed images, and choose from various fonts." + "description": "Create a PDF from in-editor content seamlessly. Customize headers and footers, include page breaks, embed images, and choose from various fonts.", + "shortDescription": "Convert in-editor content to a PDF with customizable options." }, { "id": "export-to-word", @@ -704,7 +706,8 @@ "link": "features/export-word", "name": "Export to Word", "isPremium": true, - "description": "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." + "description": "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.", + "shortDescription": "Export editor content to Word while preserving formatting and comments." }, { "id": "import-from-word", @@ -712,7 +715,8 @@ "link": "features/import-word", "name": "Import from Word", "isPremium": true, - "description": "Effortlessly transform Word documents into clean HTML within CKEditor 5 while retaining the original styling, as well as comments and change tracking annotations." + "description": "Effortlessly transform Word documents into clean HTML within CKEditor 5 while retaining the original styling, as well as comments and change tracking annotations.", + "shortDescription": "Convert Word documents to HTML while keeping styling and annotations." } ] }, @@ -721,28 +725,32 @@ "type": "feature", "link": "features/markdown", "name": "Markdown output", - "description": "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." + "description": "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.", + "shortDescription": "Outputs editor content in Markdown format for developer-friendly workflows." }, { "id": "media-embed", "type": "feature", "link": "features/media-embed", "name": "Media embed", - "description": "Use the insert media button in the toolbar to embed media. Pasting a media URL directly into the editor content automatically embeds the media." + "description": "Use the insert media button in the toolbar to embed media. Pasting a media URL directly into the editor content automatically embeds the media.", + "shortDescription": "Embed media by pasting a URL or using the insert media button." }, { "id": "paste-markdown", "type": "feature", "link": "features/paste-markdown", "name": "Paste Markdown", - "description": "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." + "description": "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.", + "shortDescription": "Paste Markdown-formatted text to convert it into rich text." }, { "id": "xml-output", "type": "feature", "link": "module:engine/dataprocessor/xmldataprocessor~XmlDataProcessor", "name": "XML output", - "description": "Turn your content into parsable XML files for automation and cross-platform interoperability." + "description": "Turn your content into parsable XML files for automation and cross-platform interoperability.", + "shortDescription": "Transform content into XML for automation and compatibility." } ] }, @@ -756,7 +764,8 @@ "link": "features/document-outline", "name": "Document outline", "isPremium": true, - "description": "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." + "description": "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.", + "shortDescription": "Lists headings in a sidebar for quick navigation through documents." }, { "id": "page-utilities", @@ -764,27 +773,31 @@ "link": "features/minimap", "name": "Page utilities", "description": "CKEditor 5 Page Utilities enables users to dictate the structuring and print formatting of their documents effectively.", + "shortDescription": "Manage document layout and formatting with Page Utilities.", "subFeatures": [ { "id": "content-minimap", "type": "subFeature", "link": "features/minimap", "name": "Content minimap", - "description": "Offers a concise, birds-eye view of the document's content, allowing for quick navigation and content management." + "description": "Offers a concise, birds-eye view of the document's content, allowing for quick navigation and content management.", + "shortDescription": "Provides an overview of content for quick navigation." }, { "id": "document-title", "type": "subFeature", "link": "features/title", "name": "Document title", - "description": "Allows users to set and modify the document's title within the editing interface, ensuring accurate reflection of the contents." + "description": "Allows users to set and modify the document's title within the editing interface, ensuring accurate reflection of the contents.", + "shortDescription": "Set and edit the document title for accuracy and relevance." }, { "id": "page-break", "type": "subFeature", "link": "features/page-break", "name": "Page break", - "description": "Facilitates the insertion of manual breaks within the document, enabling the definition of page endings and beginnings for optimal layout and print clarity." + "description": "Facilitates the insertion of manual breaks within the document, enabling the definition of page endings and beginnings for optimal layout and print clarity.", + "shortDescription": "Insert manual page breaks for precise layout control." } ] }, @@ -794,7 +807,8 @@ "link": "features/pagination", "name": "Pagination", "isPremium": true, - "description": "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." + "description": "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.", + "shortDescription": "Visually mark page boundaries for better document layout." }, { "id": "table-of-contents", @@ -802,7 +816,8 @@ "link": "features/table-of-contents", "name": "Table of contents", "isPremium": true, - "description": "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." + "description": "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.", + "shortDescription": "Insert a dynamic table of contents that updates in real time." } ] }, @@ -983,7 +998,8 @@ "type": "feature", "link": "features/editor-placeholder", "name": "Editor placeholder", - "description": "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." + "description": "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.", + "shortDescription": "Display customizable placeholder text in the editor when no content is present." }, { "id": "editor-ui-types", @@ -997,42 +1013,48 @@ "type": "subFeature", "link": "getting-started/setup/editor-types#balloon-editor-and-balloon-block-editor", "name": "Balloon block editor", - "description": "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." + "description": "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.", + "shortDescription": "Balloon editor with a block toolbar for advanced block-level editing." }, { "id": "balloon-editor", "type": "subFeature", "link": "getting-started/setup/editor-types#balloon-editor-and-balloon-block-editor", - "name": "Balloon block editor", - "description": "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)." + "name": "Balloon editor", + "description": "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).", + "shortDescription": "Inline editor with a toolbar that appears next to the text selection." }, { "id": "classic-editor", "type": "subFeature", "link": "getting-started/setup/editor-types#classic-editor", "name": "Classic editor", - "description": "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." + "description": "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.", + "shortDescription": "Traditional editor with a fixed toolbar and editing area." }, { "id": "decoupled-editor", "type": "subFeature", "link": "getting-started/setup/editor-types#decoupled-editor-document", "name": "Decoupled editor", - "description": "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." + "description": "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.", + "shortDescription": "Editor designed for creating documents like Google Docs or Microsoft Word." }, { "id": "inline-editor", "type": "subFeature", "link": "getting-started/setup/editor-types#inline-editor", "name": "Inline editor", - "description": "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." + "description": "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.", + "shortDescription": "Floating toolbar editor for editing content directly on the web page." }, { "id": "multi-root-editor", "type": "subFeature", "link": "getting-started/setup/editor-types#multi-root-editor", "name": "Multi-root editor", - "description": "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." + "description": "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.", + "shortDescription": "Editor with multiple connected editable areas sharing the same configuration." } ] }, @@ -1055,70 +1077,80 @@ "type": "subFeature", "link": "getting-started/setup/toolbar#balloon-toolbar", "name": "Balloon toolbar", - "description": "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." + "description": "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.", + "shortDescription": "A floating toolbar that appears when content is selected." }, { "id": "block-toolbar", "type": "subFeature", "link": "getting-started/setup/toolbar#block-toolbar", "name": "Block toolbar", - "description": "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)." + "description": "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).", + "shortDescription": "A configurable toolbar on the left side of the editor." }, { "id": "classic-toolbar", "type": "subFeature", "link": "getting-started/setup/toolbar#main-editor-toolbar", "name": "Classic toolbar", - "description": "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." + "description": "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.", + "shortDescription": "A standard toolbar with buttons and dropdowns for editing." }, { "id": "collapsible-toolbar", "type": "subFeature", "link": "getting-started/setup/toolbar#extended-toolbar-configuration-format", "name": "Collapsible toolbar", - "description": "Collapsible toolbar for UI space efficiency." + "description": "Collapsible toolbar for UI space efficiency.", + "shortDescription": "A toolbar that collapses to save space." }, { "id": "image-contextual-toolbar", "type": "subFeature", "link": "features/images-overview#image-contextual-toolbar", "name": "Image contextual toolbar", - "description": "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." + "description": "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.", + "shortDescription": "A toolbar for image-specific tools appearing upon selection." }, { "id": "menu-bar", "type": "subFeature", "link": "getting-started/setup/menubar", "name": "Menu bar", - "description": "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." + "description": "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.", + "shortDescription": "A familiar menu interface for accessing all editor features." }, { "id": "multiline-toolbar", "type": "subFeature", "link": "getting-started/setup/toolbar#multiline-wrapping-toolbar", "name": "Multiline toolbar", - "description": "Multiline toolbar for easy access to all functions." + "description": "Multiline toolbar for easy access to all functions.", + "shortDescription": "A toolbar that spans multiple lines for better tool visibility." }, { "id": "nesting-toolbars-in-dropdowns", "type": "subFeature", "link": "getting-started/setup/toolbar#grouping-toolbar-items-in-dropdowns-nested-toolbars", "name": "Nesting toolbars in dropdowns", - "description": "Nested toolbars for space efficiency and task-oriented access." + "description": "Nested toolbars for space efficiency and task-oriented access.", + "shortDescription": "Group toolbar items into dropdowns to save space." }, { "id": "sidebar-annotations-bar", "type": "subFeature", "link": "features/annotations-display-mode#wide-sidebar", "name": "Wide sidebar", - "description": "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." + "description": "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.", + "shortDescription": "A wide sidebar for comments and suggestions." }, { "id": "table-contextual-toolbar", "type": "subFeature", "link": "features/tables#table-contextual-toolbar", "name": "Table contextual toolbar", - "description": "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." + "description": "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.", + "shortDescription": "A toolbar for table-related tools appearing on selection." } ] }, @@ -1127,7 +1159,8 @@ "type": "feature", "link": "features/watchdog", "name": "Watchdog", - "description": "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." + "description": "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.", + "shortDescription": "A utility that prevents data loss by recovering content after crashes." } ] }, @@ -1140,35 +1173,40 @@ "type": "feature", "link": "features/accessibility", "name": "Accessibility support", - "description": "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." + "description": "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.", + "shortDescription": "Provides keyboard navigation, screen reader support, and semantic output for accessibility compliance." }, { "id": "read-only-support", "type": "feature", "link": "features/read-only", "name": "Read-only support", - "description": "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." + "description": "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.", + "shortDescription": "Allows content to be viewed without editing access." }, { "id": "restricted-editing", "type": "feature", "link": "features/restricted-editing", "name": "Restricted editing", - "description": "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." + "description": "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.", + "shortDescription": "Restricts editing to specific sections of a document." }, { "id": "text-part-language", "type": "feature", "link": "features/language", "name": "Text Part Language", - "description": "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." + "description": "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.", + "shortDescription": "Specifies languages for text sections to enhance multilingual accessibility." }, { "id": "word-and-character-counter", "type": "feature", "link": "features/word-count", "name": "Word and character counter", - "description": "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." + "description": "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.", + "shortDescription": "Tracks word and character count in real time." }, { "id": "wproofreader", @@ -1176,7 +1214,8 @@ "link": "features/spelling-and-grammar-checking", "name": "WProofreader", "isPremium": true, - "description": "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." + "description": "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.", + "shortDescription": "Proofreads text with real-time spelling and grammar checks in 80+ languages." } ] }, @@ -1190,20 +1229,23 @@ "link": "framework/index", "name": "Editor SDK", "description": "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.", + "shortDescription": "Customize your editor with toolbars, plugins, and developer tools.", "subFeatures": [ { "id": "ckeditor5-inspector", "type": "subFeature", "link": "framework/development-tools/inspector", "name": "CKEditor 5 inspector", - "description": "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}." + "description": "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}.", + "shortDescription": "A debugging tool for exploring editor internals." }, { "id": "cloud-services-rest-api", "type": "subFeature", "link": "@cs", "name": "developer-resources/apis/overview Cloud Services REST API", - "description": "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." + "description": "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.", + "shortDescription": "Cloud backend services with REST API support for collaboration." } ] }, @@ -1212,14 +1254,16 @@ "type": "feature", "link": "framework/theme-customization", "name": "Themes", - "description": "The default theme of CKEditor 5 can be customized to match most visual integration requirements." + "description": "The default theme of CKEditor 5 can be customized to match most visual integration requirements.", + "shortDescription": "Customize the editor theme to match your design needs." }, { "id": "ui-library", "type": "feature", "link": "framework/architecture/ui-library", "name": "UI Library", - "description": "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." + "description": "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.", + "shortDescription": "A modular UI library for seamless ecosystem integration." } ] }, @@ -1232,7 +1276,8 @@ "type": "feature", "link": "features/base64-upload-adapter", "name": "Base64 Upload Adapter", - "description": "Convert inserted images into Base64-encoded strings in the editor output. Images are stored with other content in the database without server-side processing." + "description": "Convert inserted images into Base64-encoded strings in the editor output. Images are stored with other content in the database without server-side processing.", + "shortDescription": "Encodes images as Base64 strings for database storage." }, { "id": "ckbox", @@ -1240,7 +1285,8 @@ "link": "features/ckbox", "name": "CKBox", "isPremium": true, - "description": "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." + "description": "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.", + "shortDescription": "A secure and flexible media management solution with cloud and on-premise options." }, { "id": "ckfinder", @@ -1248,21 +1294,24 @@ "link": "features/ckfinder", "name": "CKFinder", "isPremium": true, - "description": "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." + "description": "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.", + "shortDescription": "A robust file manager for inserting and editing images and files." }, { "id": "custom-upload-adapter", "type": "feature", "link": "features/image-upload#implementing-your-own-upload-adapter", "name": "Custom Upload Adapter", - "description": "Have your own file management solution? Use this adapter to integrate your preferred software with CKEditor." + "description": "Have your own file management solution? Use this adapter to integrate your preferred software with CKEditor.", + "shortDescription": "Integrates CKEditor with custom file management solutions." }, { "id": "simple-upload-adapter", "type": "feature", "link": "features/simple-upload-adapter", "name": "Simple Upload Adapter", - "description": "Upload images to your server using the XMLHttpRequest API with a minimal editor configuration." + "description": "Upload images to your server using the XMLHttpRequest API with a minimal editor configuration.", + "shortDescription": "Uploads images to a server with minimal configuration." } ] } From cd24f0a4f5c322955f8552aca54f7b61607042fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotr=20Szcz=C4=99=C5=9Bniak?= Date: Fri, 29 Nov 2024 15:25:18 +0100 Subject: [PATCH 12/20] HTML structure updated in generator and make the process a bit more automated. --- docs/_snippets/features-digest-generator.mjs | 64 +- docs/_snippets/features-digest-output.html | 2708 ++++++--------- docs/features/feature-digest.md | 3162 +++++++----------- 3 files changed, 2304 insertions(+), 3630 deletions(-) diff --git a/docs/_snippets/features-digest-generator.mjs b/docs/_snippets/features-digest-generator.mjs index ad8628d359c..88743c0fd87 100644 --- a/docs/_snippets/features-digest-generator.mjs +++ b/docs/_snippets/features-digest-generator.mjs @@ -7,9 +7,13 @@ import upath from 'upath'; import fs from 'fs-extra'; +import { fileURLToPath } from 'url'; + +const __filename = fileURLToPath( import.meta.url ); +const __dirname = upath.dirname( __filename ); ( async () => { - const digest = await fs.readJson( upath.join( import.meta.dirname, './features-digest-source.json' ) ); + const digest = await fs.readJson( upath.join( __dirname, './features-digest-source.json' ) ); const output = []; @@ -17,19 +21,34 @@ import fs from 'fs-extra'; output.push( generateCapability( capability ) ); } ); - await fs.writeFile( upath.join( import.meta.dirname, './features-digest-output.html' ), output.join( '\n' ) ); + await fs.writeFile( upath.join( __dirname, './features-digest-output.html' ), output.join( '\n' ) ); + + /** + * Update the features digest markdown file content by to the newest HTML structure generated based on JSON data. + **/ + const startMarker = ''; + const endMarker = ''; + const replacementText = output.join( '\n' ); + const filePath = upath.join( __dirname, '../features/feature-digest.md' ); + + const featuresDigestMdFileContent = await fs.readFile( filePath, 'utf8' ); + const regex = new RegExp( `${ startMarker }[\\s\\S]*?${ endMarker }`, 'g' ); + + const modifiedContent = featuresDigestMdFileContent.replace( + regex, `${ startMarker }\n${ replacementText }\n${ endMarker }` + ); + + fs.writeFile( filePath, modifiedContent, 'utf8' ); } )(); function generateCapability( capability ) { - return ` -
-

${ capability.name }

-

${ capability.description }

-
- ${ capability.features.map( feature => generateFeature( feature ) ).join( '\n' ) } -
-
- `; + return `
+

${ capability.name }

+

${ capability.description }

+
+ ${ capability.features.map( feature => generateFeature( feature ) ).join( '\n' ) } +
+
`; } function generateFeature( feature, isSubFeature = false ) { @@ -37,21 +56,16 @@ function generateFeature( feature, isSubFeature = false ) { let subFeaturesOutput = ''; if ( subFeatures ) { - subFeaturesOutput = ` -
+ subFeaturesOutput = `
${ subFeatures.map( subFeatures => generateFeature( subFeatures, true ) ).join( '\n' ) } -
- `; +
`; } - return ` -
-

${ feature.name }

-

- ${ feature.shortDescription } - ${ feature.description } -

- ${ subFeaturesOutput } -
- `; + return `
+

{@link ${ feature.link } ${ feature.name }}

+
+ ${ feature.shortDescription } +

${ feature.description }

+
${ subFeaturesOutput } +
`; } diff --git a/docs/_snippets/features-digest-output.html b/docs/_snippets/features-digest-output.html index 2cf1c3d8f71..a010a9e4331 100644 --- a/docs/_snippets/features-digest-output.html +++ b/docs/_snippets/features-digest-output.html @@ -1,1620 +1,1120 @@ - -
-

Core editing

-

Core editing capability provides tools to create, edit, and style content. Here are essentials that every writer needs in their tool belt, like bold or italics. There is also something for coders - advanced HTML editing capabilities where you can directly edit HTML elements.

-
- -
-

Advanced HTML Editing

-

- Edit and customize HTML elements, attributes, and styles with full control. - 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. -

- -
- -
-

Full page HTML

-

- Edit entire HTML documents, including metadata, beyond visible content. - 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. -

- -
- - -
-

General HTML Support (GHS)

-

- Enable unsupported HTML elements, attributes, and styles in the editor. - 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. -

- -
- - -
-

HTML comment

-

- Keep HTML comments in your document without displaying them to users. - 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. -

- -
- - -
-

HTML embed

-

- Embed custom HTML snippets directly into your content. - 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. -

- -
- - -
-

Show blocks

-

- Visualize and outline all block-level elements in your content. - 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. -

- -
- - -
-

Source editing

-

- View and edit the source code of your document. - The source editing feature lets you view and edit the source of your document. -

- -
- -
- -
- - -
-

Block formatting

-

- Organize and emphasize content with headings, block quotes, and horizontal lines. - 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. -

- -
- -
-

Block quote

-

- Add visually distinct block quotes to emphasize key excerpts. - 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. -

- -
- - -
-

Headings/paragraph

-

- Structure content with headings for better readability and hierarchy. - 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. -

- -
- - -
-

Horizontal line

-

- Insert horizontal lines to divide content or indicate topic changes. - 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. -

- -
- - -
-

Block indentation

-

- Adjust text block indentation for better content structure. - 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. -

- -
- -
- -
- - -
-

Bookmarks

-

- Add bookmarks for quick navigation to key content sections. - 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. -

- -
- - -
-

Clipboard

-

- Easily copy, cut, and paste content within or outside the editor. - Copy, cut, and paste content within the editor or from external sources. -

- -
- - -
-

Code blocks

-

- Insert preformatted code snippets with distinct styling. - Supports the insertion and management of pre-formatted code snippets with distinct styling. -

- -
- - -
-

Drag and drop

-

- Reorganize text and elements using drag-and-drop functionality. - Rearrange elements within a document, including moving text blocks, images, or other content types. -

- -
- - -
-

Font formatting

-

- Customize font family, size, and color for tailored text presentation. - The font feature lets you change font family, size, and color (including background color). All of these options are configurable. -

- -
- -
-

Font background color

-

- Highlight text with a colored background for emphasis. - Effortlessly make the words stand out even more with a colored background. -

- -
- - -
-

Font color

-

- Apply custom colors to text for improved readability or style. - Effortlessly make the letters stand out with their own color. -

- -
- - -
-

Font family

-

- Choose suitable font families for your content needs. - Choose from a predefined set of fonts, depending on the type of content and its destination - print, screen, etc. -

- -
- - -
-

Font size

-

- Adjust font size for better readability and emphasis. - Easily control the size of the letters. -

- -
- -
- -
- - -
-

Image

-

- Add, style, and manage images with captions, resizing, and linking options. - The image feature allows adding images of various kinds to the rich content inside the editor. A large set of subFeature background-grays 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. -

- -
- -
-

Image alt text

-

- Add alt text to images for accessibility and SEO improvements. - Add description text, AKA alternative text, for images. Alt text improves accessibility by telling screen readers and search engines what the image depicts. -

- -
- - -
-

Image captions

-

- Add captions below images to provide context. - Add optional captions for images, which are shown below the picture. -

- -
- - -
-

Image insert via URL

-

- Insert images directly using their URLs. - 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. -

- -
- - -
-

Image linking

-

- Turn images into clickable links for interactive content. - The {@link module:link/linkimage~LinkImage} plugin lets you use images as links. -

- -
- - -
-

Image resize

-

- Easily resize images for better content fit. - 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. -

- -
- - -
-

Image styles

-

- Apply custom styles and alignments to images. - 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. -

- -
- - -
-

Image upload

-

- Upload images directly from your device to the editor. - 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. -

- -
- - -
-

Responsive images

-

- Automatically optimize images for different screen sizes. - 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. -

- -
- -
- -
- - -
-

Links

-

- Add and manage hyperlinks in your text. - Facilitates the addition of hyperlinks to text, automatically converting typed or pasted URLs into clickable links, and allowing manual insertion and editing of links. -

- -
- - -
-

Lists

-

- Create to-do, bulleted, and numbered lists with customizable styles. - 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. -

- -
- -
-

List indentation

-

- Control list item indentation for nested lists. - Besides controlling {@link features/indent text block indentation}, the indent and outdent buttons allow for indenting list items (nesting them). -

- -
- - -
-

List start index

-

- Set custom start numbers for ordered lists. - 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. -

- -
- - -
-

List styles

-

- Customize list markers for unique 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. -

- -
- - -
-

Multi-level lists

-

- Create hierarchical multi-level lists with numbering. - 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. -

- -
- - -
-

Nested lists

-

- Easily create nested lists for complex content. - Besides controlling {@link features/indent text block indentation}, the indent and outdent buttons allow for indenting list items (nesting them). -

- -
- - -
-

Ordered lists

-

- Add structured ordered lists with flexible formatting options. - 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. -

- -
- - -
-

Reversed list

-

- Reverse list numbering for countdowns or steps. - 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). -

- -
- - -
-

To-do lists

-

- Create interactive to-do lists with checkboxes. - 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. -

- -
- - -
-

Unordered lists

-

- Add unordered lists with customizable markers. - 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. -

- -
- -
- -
- - -
-

Mermaid

-

- Create diagrams and charts using Markdown-inspired syntax. - 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. -

- -
- - -
-

Remove formatting

-

- Quickly strip inline styles and formatting from text. - 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). -

- -
- - -
-

Select all

-

- Select all content within the editor instantly. - Enables the selection of all content within the editor with a single command or shortcut. -

- -
- - -
-

Tables

-

- Design and manage tables with advanced editing options. - 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. -

- -
- -
-

Columns resizing

-

- Resize table columns for precise layout control. - The {@link module:table/tablecolumnresize~TableColumnResize} plugin lets you resize tables and individual table columns. It gives you complete control over column width. -

- -
- - -
-

Insert/delete columns & rows

-

- Easily add or remove table rows and columns. - The basic table features allow users to insert tables into content, add or remove columns and rows and merge or split cells. -

- -
- - -
-

Merge & split cells

-

- Merge or split table cells as needed. - The basic table features allow users to insert tables into content, add or remove columns and rows, and merge or split cells. -

- -
- - -
-

Nesting

-

- Nest tables within other tables for complex layouts. - 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. -

- -
- - -
-

Styling tables & cells

-

- Apply custom styles to tables and individual 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. -

- -
- - -
-

Table headers

-

- Set default table headers for better structure. - To make every inserted table have n number of rows and columns as table headers by default, set an optional table configuration property defaultHeadings. -

- -
- - -
-

Table selection

-

- Select and format specific table areas easily. - 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. -

- -
- - -
-

Tables caption

-

- Add captions to tables to improve accessibility. - 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. -

- -
- -
- -
- - -
-

Text alignment

-

- Align text left, right, center, or justify with ease. - Allows the adjustment of text alignment to the left, right, center, or justify and permits the alteration of indentation. -

- -
- - -
-

Text formatting

-

- Apply bold, italic, underline, and other formatting styles to text. - 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. -

- -
- -
-

Bold

-

- Make text bold for emphasis. - Making the letters look like the good time were never gone. -

- -
- - -
-

Code

-

- Insert inline code snippets for technical content. - Snippet look like a terminal from the 1990s movie. -

- -
- - -
-

Highlight

-

- Highlight text with color for emphasis. - Highlight makes important content stand out, either with font color or background fill. -

- -
- - -
-

Italic

-

- Italicize text for subtle emphasis. - Making the letters look like seashore pines. -

- -
- - -
-

Strikethrough

-

- Strike through text to indicate removal. - Never mind, will not need it anymore. -

- -
- - -
-

Styles

-

- Apply predefined styles to block and inline elements. - The styles feature lets you easily apply predefined styles available for block and inline content. -

- -
- - -
-

Subscript

-

- Add subscript text for chemical formulas or footnotes. - Fine print at the bottom, like atom numbers. -

- -
- - -
-

Superscript

-

- Add superscript text for exponents or references. - Fine print on top, like references in a book. -

- -
- - -
-

Underline

-

- Underline text to highlight importance. - Stuff looks important, yo. Or like a link, too. -

- -
- -
- -
- - -
-

Undo/redo

-

- Easily undo or redo recent actions. - Backtrack or repeat actions for editing purposes. -

- -
- -
-
- - -
-

Collaboration

-

Collaborate with others - real-time or asynchronously. Comment, co-author, and mention team members in your documents. With collaboration features review process should be a breeze.

-
- -
-

Asynchronous collaboration

-

- Work collaboratively with team members asynchronously using Track Changes, Comments, and Revision History. - 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. -

- -
- -
-

Local data storage

-

- Store collaborative data on local client servers for security and control. - In asynchronous collaboration, data is maintained on the client's servers. -

- -
- -
- -
- - -
-

Comments

-

- Add, discuss, and resolve comments for seamless content collaboration. - 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. -

- -
- -
-

Comments archive

-

- Archive resolved comments for streamlined feedback management and future reference. - 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. -

- -
- - -
-

Comments outside editor

-

- Extend comment functionality to non-editor fields for enhanced application integration. - 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. -

- -
- - -
-

Sidebar modes

-

- Choose between wide, narrow, or inline UIs to display annotations and comments. - 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. -

- -
- +
+

Core editing

+

Core editing capability provides tools to create, edit, and style content. Here are essentials that every writer needs in their tool belt, like bold or italics. There is also something for coders - advanced HTML editing capabilities where you can directly edit HTML elements.

+
+
+

{@link features/general-html-support Advanced HTML Editing}

+
+ Edit and customize HTML elements, attributes, and styles with full control. +

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}

+
+ Edit entire HTML documents, including metadata, beyond visible content. +

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)}

+
+ Enable unsupported HTML elements, attributes, and styles in the editor. +

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}

+
+ Keep HTML comments in your document without displaying them to users. +

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}

+
+ Embed custom HTML snippets directly into your content. +

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}

+
+ Visualize and outline all block-level elements in your content. +

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 editing}

+
+ View and edit the source code of your document. +

The source editing feature lets you view and edit the source of your document.

+
+
- -
- - -
-

Mentions

-

- Notify and tag users in content using smart autocompletion with @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. -

- -
- - -
-

Real-time collaboration

-

- Collaborate in real-time with automatic conflict resolution for seamless teamwork. - 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. -

- -
- -
-

Co-authoring

-

- Edit and create content simultaneously with multiple users in real time. - Multiple user real-time editing and content creation feature. -

- -
- - -
-

onpremises/index On-premises

-

- Deploy real-time collaboration on your infrastructure for full control and privacy. - On-premises real-time collaboration version to deploy to client's own infrastructure, includes a private cloud. -

- -
- - -
-

guides/collaboration/quick-start SaaS

-

- Access real-time collaboration as a cloud service managed by CKSource. - Real-time collaboration provided as a service by CKSource. -

- -
- +
+
+

{@link features/block-quote Block formatting}

+
+ Organize and emphasize content with headings, block quotes, and horizontal lines. +

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}

+
+ Add visually distinct block quotes to emphasize key excerpts. +

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}

+
+ Structure content with headings for better readability and hierarchy. +

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}

+
+ Insert horizontal lines to divide content or indicate topic changes. +

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}

+
+ Adjust text block indentation for better content structure. +

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.

+
+
- -
- - -
-

Revision history

-

- Track, compare, and restore document versions with detailed revision history. - 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. -

- -
- - -
-

Track changes

-

- Monitor and manage document edits with automatic suggestion tracking. - 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. -

- -
- - -
-

Users list and permissions

-

- Manage user roles and permissions for secure, collaborative editing. - 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. -

- -
- +
+
+

{@link features/bookmarks Bookmarks}

+
+ Add bookmarks for quick navigation to key content sections. +

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}

+
+ Easily copy, cut, and paste content within or outside the editor. +

Copy, cut, and paste content within the editor or from external sources.

+
+
+
+

{@link features/code-blocks Code blocks}

+
+ Insert preformatted code snippets with distinct styling. +

Supports the insertion and management of pre-formatted code snippets with distinct styling.

+
+
+
+

{@link features/drag-drop Drag and drop}

+
+ Reorganize text and elements using drag-and-drop functionality. +

Rearrange elements within a document, including moving text blocks, images, or other content types.

+
+
+
+

{@link features/font Font formatting}

+
+ Customize font family, size, and color for tailored text presentation. +

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}

+
+ Highlight text with a colored background for emphasis. +

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}

+
+ Apply custom colors to text for improved readability or style. +

Effortlessly make the letters stand out with their own color.

+
+
+
+

{@link features/font#configuring-the-font-family-feature Font family}

+
+ Choose suitable font families for your content needs. +

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}

+
+ Adjust font size for better readability and emphasis. +

Easily control the size of the letters.

+
+
-
- - -
-

Content conversion & embedding

-

-
- -
-

Content generation

-

- undefined - CKEditor 5 may be your universal starting point for generating content in several recognizable formats. -

- -
- -
-

Export to PDF

-

- undefined - Create a PDF from in-editor content seamlessly. Customize headers and footers, include page breaks, embed images, and choose from various fonts. -

- -
- - -
-

Export to Word

-

- undefined - 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. -

- -
- - -
-

Import from Word

-

- undefined - 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/images-overview Image}

+
+ Add, style, and manage images with captions, resizing, and linking options. +

The image feature allows adding images of various kinds to the rich content inside the editor. A large set of subFeature background-grays 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 alt text to images for accessibility and SEO improvements. +

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 captions below images to provide context. +

Add optional captions for images, which are shown below the picture.

+
+
+
+

{@link features/images-inserting Image insert via URL}

+
+ Insert images directly using their URLs. +

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}

+
+ Turn images into clickable links for interactive content. +

The {@link module:link/linkimage~LinkImage} plugin lets you use images as links.

+
+
+
+

{@link features/images-resizing Image resize}

+
+ Easily resize images for better content fit. +

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}

+
+ Apply custom styles and alignments to images. +

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}

+
+ Upload images directly from your device to the editor. +

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}

+
+ Automatically optimize images for different screen sizes. +

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.

+
+
- -
- - -
-

Markdown output

-

- undefined - 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. -

- -
- - -
-

Media embed

-

- undefined - Use the insert media button in the toolbar to embed media. Pasting a media URL directly into the editor content automatically embeds the media. -

- -
- - -
-

Paste Markdown

-

- undefined - 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. -

- -
- - -
-

XML output

-

- undefined - Turn your content into parsable XML files for automation and cross-platform interoperability. -

- -
- + +
+

{@link features/link Links}

+
+ Add and manage hyperlinks in your text. +

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}

+
+ Create to-do, bulleted, and numbered lists with customizable styles. +

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}

+
+ Control list item indentation for 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#list-start-index List start index}

+
+ Set custom start numbers for ordered lists. +

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}

+
+ Customize list markers for unique 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}

+
+ Create hierarchical multi-level lists with numbering. +

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}

+
+ Easily create nested lists for complex content. +

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}

+
+ Add structured ordered lists with flexible formatting options. +

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}

+
+ Reverse list numbering for countdowns or steps. +

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}

+
+ Create interactive to-do lists with checkboxes. +

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}

+
+ Add unordered lists with customizable markers. +

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.

+
+
-
- - -
-

Page management

-

Format, organize, and navigate your documents easily with page management features. Create a table of contents, insert page breaks, and manage pagination.

-
- -
-

Document outline

-

- undefined - 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. -

- -
- - -
-

Page utilities

-

- undefined - CKEditor 5 Page Utilities enables users to dictate the structuring and print formatting of their documents effectively. -

- -
- -
-

Content minimap

-

- undefined - Offers a concise, birds-eye view of the document's content, allowing for quick navigation and content management. -

- -
- - -
-

Document title

-

- undefined - Allows users to set and modify the document's title within the editing interface, ensuring accurate reflection of the contents. -

- -
- - -
-

Page break

-

- undefined - 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/mermaid Mermaid}

+
+ Create diagrams and charts using Markdown-inspired syntax. +

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}

+
+ Quickly strip inline styles and formatting from text. +

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}

+
+ Select all content within the editor instantly. +

Enables the selection of all content within the editor with a single command or shortcut.

+
+
+
+

{@link features/tables Tables}

+
+ Design and manage tables with advanced editing options. +

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}

+
+ Resize table columns for precise layout control. +

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}

+
+ Easily add or remove table rows and columns. +

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}

+
+ Merge or split table cells as needed. +

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}

+
+ Nest tables within other tables for complex layouts. +

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}

+
+ Apply custom styles to tables and individual 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}

+
+ Set default table headers for better structure. +

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}

+
+ Select and format specific table areas easily. +

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}

+
+ Add captions to tables to improve accessibility. +

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.

+
+
- -
- - -
-

Pagination

-

- undefined - 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. -

- -
- - -
-

Table of contents

-

- undefined - 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. -

- -
- + +
+

{@link features/text-alignment Text alignment}

+
+ Align text left, right, center, or justify with ease. +

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}

+
+ Apply bold, italic, underline, and other formatting styles to text. +

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}

+
+ Make text bold for emphasis. +

Making the letters look like the good time were never gone.

+
+
+
+

{@link features/basic-styles Code}

+
+ Insert inline code snippets for technical content. +

Snippet look like a terminal from the 1990s movie.

+
+
+
+

{@link features/highlight Highlight}

+
+ Highlight text with color for emphasis. +

Highlight makes important content stand out, either with font color or background fill.

+
+
+
+

{@link features/basic-styles Italic}

+
+ Italicize text for subtle emphasis. +

Making the letters look like seashore pines.

+
+
+
+

{@link features/basic-styles Strikethrough}

+
+ Strike through text to indicate removal. +

Never mind, will not need it anymore.

+
+
+
+

{@link features/style Styles}

+
+ Apply predefined styles to block and inline elements. +

The styles feature lets you easily apply predefined styles available for block and inline content.

+
+
+
+

{@link features/basic-styles Subscript}

+
+ Add subscript text for chemical formulas or footnotes. +

Fine print at the bottom, like atom numbers.

+
+
+
+

{@link features/basic-styles Superscript}

+
+ Add superscript text for exponents or references. +

Fine print on top, like references in a book.

+
+
+
+

{@link features/basic-styles Underline}

+
+ Underline text to highlight importance. +

Stuff looks important, yo. Or like a link, too.

+
+
-
- - -
-

Productivity

-

Speed up the content creation process with dedicated productivity utilities. Autoformat your content as you write (or paste from other editors) or even delegate some tasks to an AI Assistant.

-
- -
-

AI Assistant

-

- Leverage AI for content creation, processing, and customizable integrations. - 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. -

- -
- - -
-

Automation

-

- Streamline tasks like formatting, linking, and saving with automation tools. - Automate your workflow with CKEditor 5 automation tools, regardless of whether you write, link, or save! -

- -
- -
-

Autoformatting

-

- Quickly format content using Markdown-like shortcuts. - 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. -

- -
- - -
-

Autolink

-

- Automatically convert URLs and emails into clickable links. - 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. -

- -
- - -
-

Automatic text transformations

-

- Automatically expand abbreviations or autocorrect text based on predefined rules. - 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. -

- -
- - -
-

Autosave

-

- Automatically save changes for uninterrupted workflow. - 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/undo-redo Undo/redo}

+
+ Easily undo or redo recent actions. +

Backtrack or repeat actions for editing purposes.

+
+
+
+
+
+

Collaboration

+

Collaborate with others - real-time or asynchronously. Comment, co-author, and mention team members in your documents. With collaboration features review process should be a breeze.

+
+
+

{@link features/collaboration Asynchronous collaboration}

+
+ Work collaboratively with team members asynchronously using Track Changes, Comments, and Revision History. +

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}

+
+ Store collaborative data on local client servers for security and control. +

In asynchronous collaboration, data is maintained on the client's servers.

+
+
- -
- - -
-

Case change

-

- Easily switch text cases between uppercase, lowercase, and title case. - 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. -

- -
- - -
-

Find and replace

-

- Search and replace text efficiently across your document. - 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. -

- -
- - -
-

Format painter

-

- Clone and apply formatting for consistent styling across sections. - 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. -

- -
- - -
-

Keyboard shortcuts

-

- Boost productivity with keyboard shortcuts for editing and accessibility. - CKEditor 5 supports various keyboard shortcuts that boost productivity and provide necessary accessibility to screen reader users. -

- -
- - -
-

MathType

-

- Insert formatted math equations and chemical formulas into your content. - 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. -

- -
- - -
-

Merge fields

-

- Add placeholders for dynamic values in templates and documents. - 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. -

- -
- - -
-

Paste from Google Docs

-

- Retain formatting when pasting content 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. -

- -
- - -
-

Paste from Office

-

- Preserve formatting and structure when pasting from Microsoft 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. -

- -
- - -
-

Paste from Office Enhanced

-

- Accurately preserve advanced formatting when pasting from Word or Excel. - 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. -

- -
- - -
-

Paste plain text

-

- Paste content without formatting for clean and consistent styling. - 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. -

- -
- - -
-

Slash commands

-

- Quickly add and style content using slash commands for efficiency. - 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. -

- -
- - -
-

Special characters

-

- Add unique symbols, characters, and emojis to your content. - 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. -

- -
- - -
-

Templates

-

- Insert predefined templates for faster and consistent document creation. - 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. -

- -
- + +
+

{@link features/comments Comments}

+
+ Add, discuss, and resolve comments for seamless content collaboration. +

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}

+
+ Archive resolved comments for streamlined feedback management and future reference. +

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}

+
+ Extend comment functionality to non-editor fields for enhanced application integration. +

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.

+
+
+
-
- - -
-

Configurations

-

Configure CKEditor 5 to your liking. Choose the editor type, modify the toolbar, and select a language from our translated language packs.

-
- -
-

Editor placeholder

-

- undefined - 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. -

- -
- - -
-

Editor UI types

-

- undefined - 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. -

- -
- -
-

Balloon block editor

-

- undefined - 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. -

- -
- - -
-

Balloon block editor

-

- undefined - 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). -

- -
- - -
-

Classic editor

-

- undefined - 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. -

- -
- - -
-

Decoupled editor

-

- undefined - 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. -

- -
- - -
-

Inline editor

-

- undefined - 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. -

- -
- - -
-

Multi-root editor

-

- undefined - 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/mentions Mentions}

+
+ Notify and tag users in content using smart autocompletion with @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}

+
+ Collaborate in real-time with automatic conflict resolution for seamless teamwork. +

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}

+
+ Edit and create content simultaneously with multiple users in real time. +

Multiple user real-time editing and content creation feature.

+
+
+
+

{@link @cs onpremises/index On-premises}

+
+ Deploy real-time collaboration on your infrastructure for full control and privacy. +

On-premises real-time collaboration version to deploy to client's own infrastructure, includes a private cloud.

+
+
+
+

{@link @cs guides/collaboration/quick-start SaaS}

+
+ Access real-time collaboration as a cloud service managed by CKSource. +

Real-time collaboration provided as a service by CKSource.

+
+
- -
- - -
-

Professionally translated language packs

-

- undefined - 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 -

- -
- - -
-

Toolbar and menus

-

- undefined - 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. -

- -
- -
-

Balloon toolbar

-

- undefined - 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. -

- -
- - -
-

Block toolbar

-

- undefined - 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). -

- -
- - -
-

Classic toolbar

-

- undefined - 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. -

- -
- - -
-

Collapsible toolbar

-

- undefined - Collapsible toolbar for UI space efficiency. -

- -
- - -
-

Image contextual toolbar

-

- undefined - 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. -

- -
- - -
-

Menu bar

-

- undefined - 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. -

- -
- - -
-

Multiline toolbar

-

- undefined - Multiline toolbar for easy access to all functions. -

- -
- - -
-

Nesting toolbars in dropdowns

-

- undefined - Nested toolbars for space efficiency and task-oriented access. -

- -
- - -
-

Wide sidebar

-

- undefined - 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. -

- -
- - -
-

Table contextual toolbar

-

- undefined - 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/revision-history Revision history}

+
+ Track, compare, and restore document versions with detailed revision history. +

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}

+
+ Monitor and manage document edits with automatic suggestion tracking. +

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}

+
+ Manage user roles and permissions for secure, collaborative editing. +

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.

+
+
+
+
+
+

Content conversion & embedding

+

Collaborate also regarding different formats. With content conversions, you can integrate content across commonly used business formats. You can also enrich your content with media embeds.

+
+
+

{@link features/export-pdf Content generation}

+
+ Generate content in multiple formats like PDF and Word. +

CKEditor 5 may be your universal starting point for generating content in several recognizable formats.

+
+
+

{@link features/export-pdf Export to PDF}

+
+ Convert in-editor content to a PDF with customizable options. +

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}

+
+ Export editor content to Word while preserving formatting and comments. +

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}

+
+ Convert Word documents to HTML while keeping styling and annotations. +

Effortlessly transform Word documents into clean HTML within CKEditor 5 while retaining the original styling, as well as comments and change tracking annotations.

+
+
- -
- - -
-

Watchdog

-

- undefined - 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. -

- -
- + +
+

{@link features/markdown Markdown output}

+
+ Outputs editor content in Markdown format for developer-friendly workflows. +

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}

+
+ Embed media by pasting a URL or using the insert media button. +

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}

+
+ Paste Markdown-formatted text to convert it into rich text. +

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}

+
+ Transform content into XML for automation and compatibility. +

Turn your content into parsable XML files for automation and cross-platform interoperability.

+
+
+
+
+
+

Page management

+

Format, organize, and navigate your documents easily with page management features. Create a table of contents, insert page breaks, and manage pagination.

+
+
+

{@link features/document-outline Document outline}

+
+ Lists headings in a sidebar for quick navigation through documents. +

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}

+
+ Manage document layout and formatting with Page Utilities. +

CKEditor 5 Page Utilities enables users to dictate the structuring and print formatting of their documents effectively.

+
+
+

{@link features/minimap Content minimap}

+
+ Provides an overview of content for quick navigation. +

Offers a concise, birds-eye view of the document's content, allowing for quick navigation and content management.

+
+
+
+

{@link features/title Document title}

+
+ Set and edit the document title for accuracy and relevance. +

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}

+
+ Insert manual page breaks for precise layout control. +

Facilitates the insertion of manual breaks within the document, enabling the definition of page endings and beginnings for optimal layout and print clarity.

+
+
-
- - -
-

Compliance

-

Make your content accessible to any person or restrict it to specific users.

-
- -
-

Accessibility support

-

- undefined - 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. -

- -
- - -
-

Read-only support

-

- undefined - 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. -

- -
- - -
-

Restricted editing

-

- undefined - 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. -

- -
- - -
-

Text Part Language

-

- undefined - 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. -

- -
- - -
-

Word and character counter

-

- undefined - 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. -

- -
- - -
-

WProofreader

-

- undefined - 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. -

- -
- + +
+

{@link features/pagination Pagination}

+
+ Visually mark page boundaries for better document layout. +

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}

+
+ Insert a dynamic table of contents that updates in real time. +

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.

+
+
+
+
+
+

Productivity

+

Speed up the content creation process with dedicated productivity utilities. Autoformat your content as you write (or paste from other editors) or even delegate some tasks to an AI Assistant.

+
+
+

{@link features/ai-assistant-overview AI Assistant}

+
+ Leverage AI for content creation, processing, and customizable integrations. +

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}

+
+ Streamline tasks like formatting, linking, and saving with automation tools. +

Automate your workflow with CKEditor 5 automation tools, regardless of whether you write, link, or save!

+
+
+

{@link features/autoformat Autoformatting}

+
+ Quickly format content using Markdown-like shortcuts. +

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/text-transformation Automatic text transformations}

+
+ Automatically expand abbreviations or autocorrect text based on predefined rules. +

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}

+
+ Automatically save changes for uninterrupted workflow. +

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.

+
+
-
- - -
-

Customization

-

Customize your editor even further. Use components and helpers from our UI library to create a UI that will match your design system.

-
- -
-

Editor SDK

-

- undefined - 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. -

- -
- -
-

CKEditor 5 inspector

-

- undefined - 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}. -

- -
- - -
-

developer-resources/apis/overview Cloud Services REST API

-

- undefined - 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 features/case-change Case change}

+
+ Easily switch text cases between uppercase, lowercase, and title case. +

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/find-and-replace Find and replace}

+
+ Search and replace text efficiently across your document. +

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}

+
+ Clone and apply formatting for consistent styling across sections. +

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/accessibility#keyboard-shortcuts Keyboard shortcuts}

+
+ Boost productivity with keyboard shortcuts for editing and accessibility. +

CKEditor 5 supports various keyboard shortcuts that boost productivity and provide necessary accessibility to screen reader users.

+
+
+
+

{@link features/math-equations MathType}

+
+ Insert formatted math equations and chemical formulas into your content. +

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}

+
+ Add placeholders for dynamic values in templates and documents. +

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}

+
+ Retain formatting when pasting content 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}

+
+ Preserve formatting and structure when pasting from Microsoft 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 Paste from Office Enhanced}

+
+ Accurately preserve advanced formatting when pasting from Word or Excel. +

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}

+
+ Paste content without formatting for clean and consistent styling. +

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}

+
+ Quickly add and style content using slash commands for efficiency. +

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}

+
+ Add unique symbols, characters, and emojis to your content. +

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}

+
+ Insert predefined templates for faster and consistent document creation. +

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.

+
+
+
+
+
+

Configurations

+

Configure CKEditor 5 to your liking. Choose the editor type, modify the toolbar, and select a language from our translated language packs.

+
+
+

{@link features/editor-placeholder Editor placeholder}

+
+ Display customizable placeholder text in the editor when no content is present. +

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}

+
+ undefined +

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 editor with a block toolbar for advanced block-level editing. +

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 editor}

+
+ Inline editor with a toolbar that appears next to the text selection. +

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}

+
+ Traditional editor with a fixed toolbar and editing area. +

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}

+
+ Editor designed for creating documents like Google Docs or Microsoft Word. +

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}

+
+ Floating toolbar editor for editing content directly on the web page. +

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}

+
+ Editor with multiple connected editable areas sharing the same configuration. +

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.

+
+
- -
- - -
-

Themes

-

- undefined - The default theme of CKEditor 5 can be customized to match most visual integration requirements. -

- -
- - -
-

UI Library

-

- undefined - 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. -

- -
- + +
+

{@link getting-started/setup/ui-language Professionally translated language packs}

+
+ undefined +

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}

+
+ undefined +

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 floating toolbar that appears when content is selected. +

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}

+
+ A configurable toolbar on the left side of the editor. +

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}

+
+ A standard toolbar with buttons and dropdowns for editing. +

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}

+
+ A toolbar that collapses to save space. +

Collapsible toolbar for UI space efficiency.

+
+
+
+

{@link features/images-overview#image-contextual-toolbar Image contextual toolbar}

+
+ A toolbar for image-specific tools appearing upon selection. +

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/toolbar#multiline-wrapping-toolbar Multiline toolbar}

+
+ A toolbar that spans multiple lines for better tool visibility. +

Multiline toolbar for easy access to all functions.

+
+
+
+

{@link getting-started/setup/toolbar#grouping-toolbar-items-in-dropdowns-nested-toolbars Nesting toolbars in dropdowns}

+
+ Group toolbar items into dropdowns to save space. +

Nested toolbars for space efficiency and task-oriented access.

+
+
+ +
+

{@link features/tables#table-contextual-toolbar Table contextual toolbar}

+
+ A toolbar for table-related tools appearing on selection. +

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.

+
+
-
- - -
-

File management

-

Upload and manage your files using file management features. Take advantage of CKBox, our file management solution, or create your own using an adapter.

-
- -
-

Base64 Upload Adapter

-

- undefined - Convert inserted images into Base64-encoded strings in the editor output. Images are stored with other content in the database without server-side processing. -

- -
- - -
-

CKBox

-

- undefined - 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. -

- -
- - -
-

CKFinder

-

- undefined - 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. -

- -
- - -
-

Custom Upload Adapter

-

- undefined - Have your own file management solution? Use this adapter to integrate your preferred software with CKEditor. -

- -
- - -
-

Simple Upload Adapter

-

- undefined - Upload images to your server using the XMLHttpRequest API with a minimal editor configuration. -

- -
- + +
+

{@link features/watchdog Watchdog}

+
+ A utility that prevents data loss by recovering content after crashes. +

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.

+
+
+
+
+
+

Compliance

+

Make your content accessible to any person or restrict it to specific users.

+
+
+

{@link features/accessibility Accessibility support}

+
+ Provides keyboard navigation, screen reader support, and semantic output for accessibility compliance. +

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}

+
+ Allows content to be viewed without editing access. +

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}

+
+ Restricts editing to specific sections of a document. +

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}

+
+ Specifies languages for text sections to enhance multilingual accessibility. +

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}

+
+ Tracks word and character count in real time. +

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}

+
+ Proofreads text with real-time spelling and grammar checks in 80+ languages. +

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.

+
+
+
+
+
+

Customization

+

Customize your editor even further. Use components and helpers from our UI library to create a UI that will match your design system.

+
+
+

{@link framework/index Editor SDK}

+
+ Customize your editor with toolbars, plugins, and developer tools. +

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 framework/development-tools/inspector CKEditor 5 inspector}

+
+ A debugging tool for exploring editor internals. +

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}.

+
+
+
+

{@link @cs developer-resources/apis/overview Cloud Services REST API}

+
+ Cloud backend services with REST API support for collaboration. +

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.

+
+
-
- \ No newline at end of file + +
+

{@link framework/theme-customization Themes}

+
+ Customize the editor theme to match your design needs. +

The default theme of CKEditor 5 can be customized to match most visual integration requirements.

+
+
+
+

{@link framework/architecture/ui-library UI Library}

+
+ A modular UI library for seamless ecosystem integration. +

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.

+
+
+ + +
+

File management

+

Upload and manage your files using file management features. Take advantage of CKBox, our file management solution, or create your own using an adapter.

+
+
+

{@link features/base64-upload-adapter Base64 Upload Adapter}

+
+ Encodes images as Base64 strings for database storage. +

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}

+
+ A secure and flexible media management solution with cloud and on-premise options. +

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}

+
+ A robust file manager for inserting and editing images and files. +

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}

+
+ Integrates CKEditor with custom file management solutions. +

Have your own file management solution? Use this adapter to integrate your preferred software with CKEditor.

+
+
+
+

{@link features/simple-upload-adapter Simple Upload Adapter}

+
+ Uploads images to a server with minimal configuration. +

Upload images to your server using the XMLHttpRequest API with a minimal editor configuration.

+
+
+
+
\ No newline at end of file diff --git a/docs/features/feature-digest.md b/docs/features/feature-digest.md index 7d308556bf5..de1a7e91fcc 100644 --- a/docs/features/feature-digest.md +++ b/docs/features/feature-digest.md @@ -9,2014 +9,1174 @@ order: -998 CKEditor 5 offers over 150 various features, from basic editing capabilities like bold or italics to full-blown real-time collaboration, where multiple people can work on one document at the same time. This page collects them all and groups them into capabilities, features, and sub-features. Let's hope this list will help you grasp and easily digest everything CKEditor 5 has to offer. -## Core editing + -Format, organize, and navigate your documents easily with page management features. Create a table of contents, insert page breaks, and manage pagination. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameDescription
- {@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. -
- - {@img assets/img/enter-arrow.svg} {@link features/minimap Content minimap} - - - Offers a concise, birds-eye view of the document's content, - allowing for quick navigation and content management. -
- - {@img assets/img/enter-arrow.svg} {@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. -
- - {@img assets/img/enter-arrow.svg} {@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. -
- -## Productivity - -Speed up the content creation process with dedicated productivity utilities. Autoformat your content as you write (or paste from other editors) or even delegate some tasks to an AI Assistant. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameDescription
- {@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! -
- - {@img assets/img/enter-arrow.svg} {@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. -
- - {@img assets/img/enter-arrow.svg} {@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. -
- - {@img assets/img/enter-arrow.svg} {@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/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/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 Paste from Office Enhanced - - 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. -
- -## Configurations - -Configure CKEditor 5 to your liking. Choose the editor type, modify the toolbar, and select a language from our translated language packs. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameDescription
- {@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. -
- - {@img assets/img/enter-arrow.svg} {@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. -
- - {@img assets/img/enter-arrow.svg} {@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). -
- - {@img assets/img/enter-arrow.svg} {@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. -
- - {@img assets/img/enter-arrow.svg} {@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. -
- - {@img assets/img/enter-arrow.svg} {@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. -
- - {@img assets/img/enter-arrow.svg} {@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 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. -
- - {@img assets/img/enter-arrow.svg} {@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. -
- - {@img assets/img/enter-arrow.svg} {@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). -
- - {@img assets/img/enter-arrow.svg} {@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. -
- - {@img assets/img/enter-arrow.svg} {@link getting-started/setup/toolbar#extended-toolbar-configuration-format Collapsible toolbar} - - Collapsible toolbar for UI space efficiency.
- - {@img assets/img/enter-arrow.svg} {@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. -
- - {@img assets/img/enter-arrow.svg} {@link getting-started/setup/toolbar#multiline-wrapping-toolbar Multiline toolbar} - - Multiline toolbar for easy access to all functions.
- - {@img assets/img/enter-arrow.svg} {@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.
- - {@img assets/img/enter-arrow.svg} {@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. -
- -## Compliance - -Make your content accessible to any person or restrict it to specific users. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameDescription
- {@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. -
- -## Customization - -Customize your editor even further. Use components and helpers from our UI library to create a UI that will match your design system. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameDescription
- {@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. -
- - {@img assets/img/enter-arrow.svg} {@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}.
- - {@img assets/img/enter-arrow.svg} {@link @cs developer-resources/apis/overview 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. -
- -## File management - -Upload and manage your files using file management features. Take advantage of CKBox, our file management solution, or create your own using an adapter. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameDescription
- {@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. -
- -{@snippet features/feature-digest} + +
+

Core editing

+

Core editing capability provides tools to create, edit, and style content. Here are essentials that every writer needs in their tool belt, like bold or italics. There is also something for coders - advanced HTML editing capabilities where you can directly edit HTML elements.

+
+
+

{@link features/general-html-support Advanced HTML Editing}

+
+ Edit and customize HTML elements, attributes, and styles with full control. +

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}

+
+ Edit entire HTML documents, including metadata, beyond visible content. +

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)}

+
+ Enable unsupported HTML elements, attributes, and styles in the editor. +

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}

+
+ Keep HTML comments in your document without displaying them to users. +

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}

+
+ Embed custom HTML snippets directly into your content. +

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}

+
+ Visualize and outline all block-level elements in your content. +

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 editing}

+
+ View and edit the source code of your document. +

The source editing feature lets you view and edit the source of your document.

+
+
+
+
+
+

{@link features/block-quote Block formatting}

+
+ Organize and emphasize content with headings, block quotes, and horizontal lines. +

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}

+
+ Add visually distinct block quotes to emphasize key excerpts. +

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}

+
+ Structure content with headings for better readability and hierarchy. +

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}

+
+ Insert horizontal lines to divide content or indicate topic changes. +

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}

+
+ Adjust text block indentation for better content structure. +

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}

+
+ Add bookmarks for quick navigation to key content sections. +

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}

+
+ Easily copy, cut, and paste content within or outside the editor. +

Copy, cut, and paste content within the editor or from external sources.

+
+
+
+

{@link features/code-blocks Code blocks}

+
+ Insert preformatted code snippets with distinct styling. +

Supports the insertion and management of pre-formatted code snippets with distinct styling.

+
+
+
+

{@link features/drag-drop Drag and drop}

+
+ Reorganize text and elements using drag-and-drop functionality. +

Rearrange elements within a document, including moving text blocks, images, or other content types.

+
+
+
+

{@link features/font Font formatting}

+
+ Customize font family, size, and color for tailored text presentation. +

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}

+
+ Highlight text with a colored background for emphasis. +

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}

+
+ Apply custom colors to text for improved readability or style. +

Effortlessly make the letters stand out with their own color.

+
+
+
+

{@link features/font#configuring-the-font-family-feature Font family}

+
+ Choose suitable font families for your content needs. +

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}

+
+ Adjust font size for better readability and emphasis. +

Easily control the size of the letters.

+
+
+
+
+
+

{@link features/images-overview Image}

+
+ Add, style, and manage images with captions, resizing, and linking options. +

The image feature allows adding images of various kinds to the rich content inside the editor. A large set of subFeature background-grays 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 alt text to images for accessibility and SEO improvements. +

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 captions below images to provide context. +

Add optional captions for images, which are shown below the picture.

+
+
+
+

{@link features/images-inserting Image insert via URL}

+
+ Insert images directly using their URLs. +

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}

+
+ Turn images into clickable links for interactive content. +

The {@link module:link/linkimage~LinkImage} plugin lets you use images as links.

+
+
+
+

{@link features/images-resizing Image resize}

+
+ Easily resize images for better content fit. +

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}

+
+ Apply custom styles and alignments to images. +

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}

+
+ Upload images directly from your device to the editor. +

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}

+
+ Automatically optimize images for different screen sizes. +

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/link Links}

+
+ Add and manage hyperlinks in your text. +

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}

+
+ Create to-do, bulleted, and numbered lists with customizable styles. +

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}

+
+ Control list item indentation for 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#list-start-index List start index}

+
+ Set custom start numbers for ordered lists. +

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}

+
+ Customize list markers for unique 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}

+
+ Create hierarchical multi-level lists with numbering. +

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}

+
+ Easily create nested lists for complex content. +

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}

+
+ Add structured ordered lists with flexible formatting options. +

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}

+
+ Reverse list numbering for countdowns or steps. +

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}

+
+ Create interactive to-do lists with checkboxes. +

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}

+
+ Add unordered lists with customizable markers. +

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}

+
+ Create diagrams and charts using Markdown-inspired syntax. +

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}

+
+ Quickly strip inline styles and formatting from text. +

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}

+
+ Select all content within the editor instantly. +

Enables the selection of all content within the editor with a single command or shortcut.

+
+
+
+

{@link features/tables Tables}

+
+ Design and manage tables with advanced editing options. +

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}

+
+ Resize table columns for precise layout control. +

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}

+
+ Easily add or remove table rows and columns. +

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}

+
+ Merge or split table cells as needed. +

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}

+
+ Nest tables within other tables for complex layouts. +

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}

+
+ Apply custom styles to tables and individual 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}

+
+ Set default table headers for better structure. +

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}

+
+ Select and format specific table areas easily. +

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}

+
+ Add captions to tables to improve accessibility. +

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/text-alignment Text alignment}

+
+ Align text left, right, center, or justify with ease. +

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}

+
+ Apply bold, italic, underline, and other formatting styles to text. +

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}

+
+ Make text bold for emphasis. +

Making the letters look like the good time were never gone.

+
+
+
+

{@link features/basic-styles Code}

+
+ Insert inline code snippets for technical content. +

Snippet look like a terminal from the 1990s movie.

+
+
+
+

{@link features/highlight Highlight}

+
+ Highlight text with color for emphasis. +

Highlight makes important content stand out, either with font color or background fill.

+
+
+
+

{@link features/basic-styles Italic}

+
+ Italicize text for subtle emphasis. +

Making the letters look like seashore pines.

+
+
+
+

{@link features/basic-styles Strikethrough}

+
+ Strike through text to indicate removal. +

Never mind, will not need it anymore.

+
+
+
+

{@link features/style Styles}

+
+ Apply predefined styles to block and inline elements. +

The styles feature lets you easily apply predefined styles available for block and inline content.

+
+
+
+

{@link features/basic-styles Subscript}

+
+ Add subscript text for chemical formulas or footnotes. +

Fine print at the bottom, like atom numbers.

+
+
+
+

{@link features/basic-styles Superscript}

+
+ Add superscript text for exponents or references. +

Fine print on top, like references in a book.

+
+
+
+

{@link features/basic-styles Underline}

+
+ Underline text to highlight importance. +

Stuff looks important, yo. Or like a link, too.

+
+
+
+
+
+

{@link features/undo-redo Undo/redo}

+
+ Easily undo or redo recent actions. +

Backtrack or repeat actions for editing purposes.

+
+
+
+
+
+

Collaboration

+

Collaborate with others - real-time or asynchronously. Comment, co-author, and mention team members in your documents. With collaboration features review process should be a breeze.

+
+
+

{@link features/collaboration Asynchronous collaboration}

+
+ Work collaboratively with team members asynchronously using Track Changes, Comments, and Revision History. +

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}

+
+ Store collaborative data on local client servers for security and control. +

In asynchronous collaboration, data is maintained on the client's servers.

+
+
+
+
+
+

{@link features/comments Comments}

+
+ Add, discuss, and resolve comments for seamless content collaboration. +

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}

+
+ Archive resolved comments for streamlined feedback management and future reference. +

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}

+
+ Extend comment functionality to non-editor fields for enhanced application integration. +

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/mentions Mentions}

+
+ Notify and tag users in content using smart autocompletion with @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}

+
+ Collaborate in real-time with automatic conflict resolution for seamless teamwork. +

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}

+
+ Edit and create content simultaneously with multiple users in real time. +

Multiple user real-time editing and content creation feature.

+
+
+
+

{@link @cs onpremises/index On-premises}

+
+ Deploy real-time collaboration on your infrastructure for full control and privacy. +

On-premises real-time collaboration version to deploy to client's own infrastructure, includes a private cloud.

+
+
+
+

{@link @cs guides/collaboration/quick-start SaaS}

+
+ Access real-time collaboration as a cloud service managed by CKSource. +

Real-time collaboration provided as a service by CKSource.

+
+
+
+
+
+

{@link features/revision-history Revision history}

+
+ Track, compare, and restore document versions with detailed revision history. +

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}

+
+ Monitor and manage document edits with automatic suggestion tracking. +

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}

+
+ Manage user roles and permissions for secure, collaborative editing. +

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.

+
+
+
+
+
+

Content conversion & embedding

+

Collaborate also regarding different formats. With content conversions, you can integrate content across commonly used business formats. You can also enrich your content with media embeds.

+
+
+

{@link features/export-pdf Content generation}

+
+ Generate content in multiple formats like PDF and Word. +

CKEditor 5 may be your universal starting point for generating content in several recognizable formats.

+
+
+

{@link features/export-pdf Export to PDF}

+
+ Convert in-editor content to a PDF with customizable options. +

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}

+
+ Export editor content to Word while preserving formatting and comments. +

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}

+
+ Convert Word documents to HTML while keeping styling and annotations. +

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/markdown Markdown output}

+
+ Outputs editor content in Markdown format for developer-friendly workflows. +

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}

+
+ Embed media by pasting a URL or using the insert media button. +

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}

+
+ Paste Markdown-formatted text to convert it into rich text. +

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}

+
+ Transform content into XML for automation and compatibility. +

Turn your content into parsable XML files for automation and cross-platform interoperability.

+
+
+
+
+
+

Page management

+

Format, organize, and navigate your documents easily with page management features. Create a table of contents, insert page breaks, and manage pagination.

+
+
+

{@link features/document-outline Document outline}

+
+ Lists headings in a sidebar for quick navigation through documents. +

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}

+
+ Manage document layout and formatting with Page Utilities. +

CKEditor 5 Page Utilities enables users to dictate the structuring and print formatting of their documents effectively.

+
+
+

{@link features/minimap Content minimap}

+
+ Provides an overview of content for quick navigation. +

Offers a concise, birds-eye view of the document's content, allowing for quick navigation and content management.

+
+
+
+

{@link features/title Document title}

+
+ Set and edit the document title for accuracy and relevance. +

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}

+
+ Insert manual page breaks for precise layout control. +

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}

+
+ Visually mark page boundaries for better document layout. +

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}

+
+ Insert a dynamic table of contents that updates in real time. +

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.

+
+
+
+
+
+

Productivity

+

Speed up the content creation process with dedicated productivity utilities. Autoformat your content as you write (or paste from other editors) or even delegate some tasks to an AI Assistant.

+
+
+

{@link features/ai-assistant-overview AI Assistant}

+
+ Leverage AI for content creation, processing, and customizable integrations. +

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}

+
+ Streamline tasks like formatting, linking, and saving with automation tools. +

Automate your workflow with CKEditor 5 automation tools, regardless of whether you write, link, or save!

+
+
+

{@link features/autoformat Autoformatting}

+
+ Quickly format content using Markdown-like shortcuts. +

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/text-transformation Automatic text transformations}

+
+ Automatically expand abbreviations or autocorrect text based on predefined rules. +

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}

+
+ Automatically save changes for uninterrupted workflow. +

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}

+
+ Easily switch text cases between uppercase, lowercase, and title case. +

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/find-and-replace Find and replace}

+
+ Search and replace text efficiently across your document. +

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}

+
+ Clone and apply formatting for consistent styling across sections. +

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/accessibility#keyboard-shortcuts Keyboard shortcuts}

+
+ Boost productivity with keyboard shortcuts for editing and accessibility. +

CKEditor 5 supports various keyboard shortcuts that boost productivity and provide necessary accessibility to screen reader users.

+
+
+
+

{@link features/math-equations MathType}

+
+ Insert formatted math equations and chemical formulas into your content. +

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}

+
+ Add placeholders for dynamic values in templates and documents. +

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}

+
+ Retain formatting when pasting content 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}

+
+ Preserve formatting and structure when pasting from Microsoft 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 Paste from Office Enhanced}

+
+ Accurately preserve advanced formatting when pasting from Word or Excel. +

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}

+
+ Paste content without formatting for clean and consistent styling. +

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}

+
+ Quickly add and style content using slash commands for efficiency. +

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}

+
+ Add unique symbols, characters, and emojis to your content. +

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}

+
+ Insert predefined templates for faster and consistent document creation. +

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.

+
+
+
+
+
+

Configurations

+

Configure CKEditor 5 to your liking. Choose the editor type, modify the toolbar, and select a language from our translated language packs.

+
+
+

{@link features/editor-placeholder Editor placeholder}

+
+ Display customizable placeholder text in the editor when no content is present. +

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}

+
+ undefined +

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 editor with a block toolbar for advanced block-level editing. +

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 editor}

+
+ Inline editor with a toolbar that appears next to the text selection. +

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}

+
+ Traditional editor with a fixed toolbar and editing area. +

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}

+
+ Editor designed for creating documents like Google Docs or Microsoft Word. +

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}

+
+ Floating toolbar editor for editing content directly on the web page. +

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}

+
+ Editor with multiple connected editable areas sharing the same configuration. +

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 getting-started/setup/ui-language Professionally translated language packs}

+
+ undefined +

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}

+
+ undefined +

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 floating toolbar that appears when content is selected. +

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}

+
+ A configurable toolbar on the left side of the editor. +

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}

+
+ A standard toolbar with buttons and dropdowns for editing. +

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}

+
+ A toolbar that collapses to save space. +

Collapsible toolbar for UI space efficiency.

+
+
+
+

{@link features/images-overview#image-contextual-toolbar Image contextual toolbar}

+
+ A toolbar for image-specific tools appearing upon selection. +

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/toolbar#multiline-wrapping-toolbar Multiline toolbar}

+
+ A toolbar that spans multiple lines for better tool visibility. +

Multiline toolbar for easy access to all functions.

+
+
+
+

{@link getting-started/setup/toolbar#grouping-toolbar-items-in-dropdowns-nested-toolbars Nesting toolbars in dropdowns}

+
+ Group toolbar items into dropdowns to save space. +

Nested toolbars for space efficiency and task-oriented access.

+
+
+ +
+

{@link features/tables#table-contextual-toolbar Table contextual toolbar}

+
+ A toolbar for table-related tools appearing on selection. +

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}

+
+ A utility that prevents data loss by recovering content after crashes. +

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.

+
+
+
+
+
+

Compliance

+

Make your content accessible to any person or restrict it to specific users.

+
+
+

{@link features/accessibility Accessibility support}

+
+ Provides keyboard navigation, screen reader support, and semantic output for accessibility compliance. +

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}

+
+ Allows content to be viewed without editing access. +

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}

+
+ Restricts editing to specific sections of a document. +

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}

+
+ Specifies languages for text sections to enhance multilingual accessibility. +

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}

+
+ Tracks word and character count in real time. +

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}

+
+ Proofreads text with real-time spelling and grammar checks in 80+ languages. +

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.

+
+
+
+
+
+

Customization

+

Customize your editor even further. Use components and helpers from our UI library to create a UI that will match your design system.

+
+
+

{@link framework/index Editor SDK}

+
+ Customize your editor with toolbars, plugins, and developer tools. +

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 framework/development-tools/inspector CKEditor 5 inspector}

+
+ A debugging tool for exploring editor internals. +

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}.

+
+
+
+

{@link @cs developer-resources/apis/overview Cloud Services REST API}

+
+ Cloud backend services with REST API support for collaboration. +

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}

+
+ Customize the editor theme to match your design needs. +

The default theme of CKEditor 5 can be customized to match most visual integration requirements.

+
+
+
+

{@link framework/architecture/ui-library UI Library}

+
+ A modular UI library for seamless ecosystem integration. +

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.

+
+
+
+
+
+

File management

+

Upload and manage your files using file management features. Take advantage of CKBox, our file management solution, or create your own using an adapter.

+
+
+

{@link features/base64-upload-adapter Base64 Upload Adapter}

+
+ Encodes images as Base64 strings for database storage. +

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}

+
+ A secure and flexible media management solution with cloud and on-premise options. +

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}

+
+ A robust file manager for inserting and editing images and files. +

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}

+
+ Integrates CKEditor with custom file management solutions. +

Have your own file management solution? Use this adapter to integrate your preferred software with CKEditor.

+
+
+
+

{@link features/simple-upload-adapter Simple Upload Adapter}

+
+ Uploads images to a server with minimal configuration. +

Upload images to your server using the XMLHttpRequest API with a minimal editor configuration.

+
+
+
+
+ From 4974524ffb6486cc4fc5e2b378bfdbe285bae9b8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotr=20Szcz=C4=99=C5=9Bniak?= Date: Fri, 29 Nov 2024 15:44:03 +0100 Subject: [PATCH 13/20] Added badges. --- docs/_snippets/features-digest-generator.mjs | 12 +- docs/_snippets/features-digest-output.html | 664 +++++++++++++----- docs/features/feature-digest.md | 665 ++++++++++++++----- 3 files changed, 1040 insertions(+), 301 deletions(-) diff --git a/docs/_snippets/features-digest-generator.mjs b/docs/_snippets/features-digest-generator.mjs index 88743c0fd87..0e10a4ab7b5 100644 --- a/docs/_snippets/features-digest-generator.mjs +++ b/docs/_snippets/features-digest-generator.mjs @@ -61,8 +61,18 @@ function generateFeature( feature, isSubFeature = false ) { `; } + const premiumBadge = ` + Premium feature + `; + const experimentalBadge = 'Exp'; + + const addPremiumBadge = feature.isPremium ? premiumBadge : ''; + const addExperimentalBadge = feature.isExperimental ? experimentalBadge : ''; + return `
-

{@link ${ feature.link } ${ feature.name }}

+

+ {@link ${ feature.link } ${ feature.name }} ${ addPremiumBadge } ${ addExperimentalBadge } +

${ feature.shortDescription }

${ feature.description }

diff --git a/docs/_snippets/features-digest-output.html b/docs/_snippets/features-digest-output.html index a010a9e4331..d7e2355ced4 100644 --- a/docs/_snippets/features-digest-output.html +++ b/docs/_snippets/features-digest-output.html @@ -3,48 +3,62 @@

Core editing

Core editing capability provides tools to create, edit, and style content. Here are essentials that every writer needs in their tool belt, like bold or italics. There is also something for coders - advanced HTML editing capabilities where you can directly edit HTML elements.

-

{@link features/general-html-support Advanced HTML Editing}

+

+ {@link features/general-html-support Advanced HTML Editing} +

Edit and customize HTML elements, attributes, and styles with full control.

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}

+

+ {@link features/full-page-html Full page HTML} +

Edit entire HTML documents, including metadata, beyond visible content.

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)}

+

+ {@link features/general-html-support General HTML Support (GHS)} +

Enable unsupported HTML elements, attributes, and styles in the editor.

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}

+

+ {@link features/html-comments HTML comment} +

Keep HTML comments in your document without displaying them to users.

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}

+

+ {@link features/html-embed HTML embed} +

Embed custom HTML snippets directly into your content.

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}

+

+ {@link features/show-blocks Show blocks} +

Visualize and outline all block-level elements in your content.

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 editing}

+

+ {@link features/source-editing Source editing} +

View and edit the source code of your document.

The source editing feature lets you view and edit the source of your document.

@@ -53,34 +67,44 @@

{@link features/source-editing Source editing}

-

{@link features/block-quote Block formatting}

+

+ {@link features/block-quote Block formatting} +

Organize and emphasize content with headings, block quotes, and horizontal lines.

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}

+

+ {@link features/block-quote Block quote} +

Add visually distinct block quotes to emphasize key excerpts.

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}

+

+ {@link features/headings Headings/paragraph} +

Structure content with headings for better readability and hierarchy.

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}

+

+ {@link features/horizontal-line Horizontal line} +

Insert horizontal lines to divide content or indicate topic changes.

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}

+

+ {@link features/indent Block indentation} +

Adjust text block indentation for better content structure.

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.

@@ -89,62 +113,80 @@

{@link features/indent Block indentation}

-

{@link features/bookmarks Bookmarks}

+

+ {@link features/bookmarks Bookmarks} +

Add bookmarks for quick navigation to key content sections.

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}

+

+ {@link framework/deep-dive/clipboard Clipboard} +

Easily copy, cut, and paste content within or outside the editor.

Copy, cut, and paste content within the editor or from external sources.

-

{@link features/code-blocks Code blocks}

+

+ {@link features/code-blocks Code blocks} +

Insert preformatted code snippets with distinct styling.

Supports the insertion and management of pre-formatted code snippets with distinct styling.

-

{@link features/drag-drop Drag and drop}

+

+ {@link features/drag-drop Drag and drop} +

Reorganize text and elements using drag-and-drop functionality.

Rearrange elements within a document, including moving text blocks, images, or other content types.

-

{@link features/font Font formatting}

+

+ {@link features/font Font formatting} +

Customize font family, size, and color for tailored text presentation.

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}

+

+ {@link features/font#configuring-the-font-color-and-font-background-color-features Font background color} +

Highlight text with a colored background for emphasis.

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}

+

+ {@link features/font#configuring-the-font-color-and-font-background-color-features Font color} +

Apply custom colors to text for improved readability or style.

Effortlessly make the letters stand out with their own color.

-

{@link features/font#configuring-the-font-family-feature Font family}

+

+ {@link features/font#configuring-the-font-family-feature Font family} +

Choose suitable font families for your content needs.

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}

+

+ {@link features/font#configuring-the-font-size-feature Font size} +

Adjust font size for better readability and emphasis.

Easily control the size of the letters.

@@ -153,62 +195,80 @@

{@link features/font#configuring-the-font-size-feature

-

{@link features/images-overview Image}

+

+ {@link features/images-overview Image} +

Add, style, and manage images with captions, resizing, and linking options.

The image feature allows adding images of various kinds to the rich content inside the editor. A large set of subFeature background-grays 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}

+

+ {@link features/images-text-alternative Image alt text} +

Add alt text to images for accessibility and SEO improvements.

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}

+

+ {@link features/images-captions Image captions} +

Add captions below images to provide context.

Add optional captions for images, which are shown below the picture.

-

{@link features/images-inserting Image insert via URL}

+

+ {@link features/images-inserting Image insert via URL} +

Insert images directly using their URLs.

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}

+

+ {@link features/images-linking Image linking} +

Turn images into clickable links for interactive content.

The {@link module:link/linkimage~LinkImage} plugin lets you use images as links.

-

{@link features/images-resizing Image resize}

+

+ {@link features/images-resizing Image resize} +

Easily resize images for better content fit.

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}

+

+ {@link features/images-styles Image styles} +

Apply custom styles and alignments to images.

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}

+

+ {@link features/image-upload Image upload} +

Upload images directly from your device to the editor.

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}

+

+ {@link features/images-responsive Responsive images} +

Automatically optimize images for different screen sizes.

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.

@@ -217,76 +277,100 @@

{@link features/images-responsive Responsive images}

-

{@link features/link Links}

+

+ {@link features/link Links} +

Add and manage hyperlinks in your text.

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}

+

+ {@link features/lists Lists} +

Create to-do, bulleted, and numbered lists with customizable styles.

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}

+

+ {@link features/lists-editing#indenting-lists List indentation} +

Control list item indentation for 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#list-start-index List start index}

+

+ {@link features/lists#list-start-index List start index} +

Set custom start numbers for ordered lists.

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}

+

+ {@link features/lists#list-styles List styles} +

Customize list markers for unique 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}

+

+ {@link features/multi-level-lists Multi-level lists} + Premium feature + +

Create hierarchical multi-level lists with numbering.

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}

+

+ {@link features/lists-editing#indenting-lists Nested lists} +

Easily create nested lists for complex content.

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}

+

+ {@link features/lists Ordered lists} +

Add structured ordered lists with flexible formatting options.

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}

+

+ {@link features/lists#reversed-list Reversed list} +

Reverse list numbering for countdowns or steps.

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}

+

+ {@link features/todo-lists To-do lists} +

Create interactive to-do lists with checkboxes.

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}

+

+ {@link features/lists Unordered lists} +

Add unordered lists with customizable markers.

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.

@@ -295,83 +379,107 @@

{@link features/lists Unordered lists}

-

{@link features/mermaid Mermaid}

+

+ {@link features/mermaid Mermaid} Exp +

Create diagrams and charts using Markdown-inspired syntax.

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}

+

+ {@link features/remove-format Remove formatting} +

Quickly strip inline styles and formatting from text.

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}

+

+ {@link features/select-all Select all} +

Select all content within the editor instantly.

Enables the selection of all content within the editor with a single command or shortcut.

-

{@link features/tables Tables}

+

+ {@link features/tables Tables} +

Design and manage tables with advanced editing options.

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}

+

+ {@link features/tables-resize Columns resizing} +

Resize table columns for precise layout control.

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}

+

+ {@link features/tables#table-contextual-toolbar Insert/delete columns & rows} +

Easily add or remove table rows and columns.

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}

+

+ {@link features/tables#table-contextual-toolbar Merge & split cells} +

Merge or split table cells as needed.

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}

+

+ {@link features/tables#nesting-tables Nesting} +

Nest tables within other tables for complex layouts.

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}

+

+ {@link features/tables-styling Styling tables & cells} +

Apply custom styles to tables and individual 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}

+

+ {@link features/tables#default-table-headers Table headers} +

Set default table headers for better structure.

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}

+

+ {@link features/tables#table-selection Table selection} +

Select and format specific table areas easily.

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}

+

+ {@link features/tables-caption Tables caption} +

Add captions to tables to improve accessibility.

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.

@@ -380,76 +488,98 @@

{@link features/tables-caption Tables caption}

-

{@link features/text-alignment Text alignment}

+

+ {@link features/text-alignment Text alignment} +

Align text left, right, center, or justify with ease.

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}

+

+ {@link features/basic-styles Text formatting} +

Apply bold, italic, underline, and other formatting styles to text.

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}

+

+ {@link features/basic-styles Bold} +

Make text bold for emphasis.

Making the letters look like the good time were never gone.

-

{@link features/basic-styles Code}

+

+ {@link features/basic-styles Code} +

Insert inline code snippets for technical content.

Snippet look like a terminal from the 1990s movie.

-

{@link features/highlight Highlight}

+

+ {@link features/highlight Highlight} +

Highlight text with color for emphasis.

Highlight makes important content stand out, either with font color or background fill.

-

{@link features/basic-styles Italic}

+

+ {@link features/basic-styles Italic} +

Italicize text for subtle emphasis.

Making the letters look like seashore pines.

-

{@link features/basic-styles Strikethrough}

+

+ {@link features/basic-styles Strikethrough} +

Strike through text to indicate removal.

Never mind, will not need it anymore.

-

{@link features/style Styles}

+

+ {@link features/style Styles} +

Apply predefined styles to block and inline elements.

The styles feature lets you easily apply predefined styles available for block and inline content.

-

{@link features/basic-styles Subscript}

+

+ {@link features/basic-styles Subscript} +

Add subscript text for chemical formulas or footnotes.

Fine print at the bottom, like atom numbers.

-

{@link features/basic-styles Superscript}

+

+ {@link features/basic-styles Superscript} +

Add superscript text for exponents or references.

Fine print on top, like references in a book.

-

{@link features/basic-styles Underline}

+

+ {@link features/basic-styles Underline} +

Underline text to highlight importance.

Stuff looks important, yo. Or like a link, too.

@@ -458,7 +588,9 @@

{@link features/basic-styles Underline}

-

{@link features/undo-redo Undo/redo}

+

+ {@link features/undo-redo Undo/redo} +

Easily undo or redo recent actions.

Backtrack or repeat actions for editing purposes.

@@ -471,13 +603,21 @@

Collaboration

Collaborate with others - real-time or asynchronously. Comment, co-author, and mention team members in your documents. With collaboration features review process should be a breeze.

-

{@link features/collaboration Asynchronous collaboration}

+

+ {@link features/collaboration Asynchronous collaboration} + Premium feature + +

Work collaboratively with team members asynchronously using Track Changes, Comments, and Revision History.

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}

+

+ {@link features/collaboration Local data storage} + Premium feature + +

Store collaborative data on local client servers for security and control.

In asynchronous collaboration, data is maintained on the client's servers.

@@ -486,27 +626,43 @@

{@link features/collaboration Local data storage}

-

{@link features/comments Comments}

+

+ {@link features/comments Comments} + Premium feature + +

Add, discuss, and resolve comments for seamless content collaboration.

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}

+

+ {@link features/comments Comments archive} + Premium feature + +

Archive resolved comments for streamlined feedback management and future reference.

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}

+

+ {@link features/comments-outside-editor Comments outside editor} + Premium feature + +

Extend comment functionality to non-editor fields for enhanced application integration.

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/mentions Mentions}

+

+ {@link features/mentions Mentions} +

Notify and tag users in content using smart autocompletion with @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}

+

+ {@link features/real-time-collaboration Real-time collaboration} + Premium feature + +

Collaborate in real-time with automatic conflict resolution for seamless teamwork.

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}

+

+ {@link features/users-in-real-time-collaboration Co-authoring} + Premium feature + +

Edit and create content simultaneously with multiple users in real time.

Multiple user real-time editing and content creation feature.

-

{@link @cs onpremises/index On-premises}

+

+ {@link @cs onpremises/index On-premises} + Premium feature + +

Deploy real-time collaboration on your infrastructure for full control and privacy.

On-premises real-time collaboration version to deploy to client's own infrastructure, includes a private cloud.

-

{@link @cs guides/collaboration/quick-start SaaS}

+

+ {@link @cs guides/collaboration/quick-start SaaS} + Premium feature + +

Access real-time collaboration as a cloud service managed by CKSource.

Real-time collaboration provided as a service by CKSource.

@@ -551,21 +725,33 @@

{@link @cs guides/collaboration/quick-start SaaS}

-

{@link features/revision-history Revision history}

+

+ {@link features/revision-history Revision history} + Premium feature + +

Track, compare, and restore document versions with detailed revision history.

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}

+

+ {@link features/track-changes Track changes} + Premium feature + +

Monitor and manage document edits with automatic suggestion tracking.

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}

+

+ {@link features/users Users list and permissions} + Premium feature + +

Manage user roles and permissions for secure, collaborative editing.

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.

@@ -578,27 +764,43 @@

Content conversion & embedding

Collaborate also regarding different formats. With content conversions, you can integrate content across commonly used business formats. You can also enrich your content with media embeds.

-

{@link features/export-pdf Content generation}

+

+ {@link features/export-pdf Content generation} + Premium feature + +

Generate content in multiple formats like PDF and Word.

CKEditor 5 may be your universal starting point for generating content in several recognizable formats.

-

{@link features/export-pdf Export to PDF}

+

+ {@link features/export-pdf Export to PDF} + Premium feature + +

Convert in-editor content to a PDF with customizable options.

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}

+

+ {@link features/export-word Export to Word} + Premium feature + +

Export editor content to Word while preserving formatting and comments.

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}

+

+ {@link features/import-word Import from Word} + Premium feature + +

Convert Word documents to HTML while keeping styling and annotations.

Effortlessly transform Word documents into clean HTML within CKEditor 5 while retaining the original styling, as well as comments and change tracking annotations.

@@ -607,28 +809,36 @@

{@link features/import-word Import from Word}

-

{@link features/markdown Markdown output}

+

+ {@link features/markdown Markdown output} +

Outputs editor content in Markdown format for developer-friendly workflows.

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}

+

+ {@link features/media-embed Media embed} +

Embed media by pasting a URL or using the insert media button.

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}

+

+ {@link features/paste-markdown Paste Markdown} +

Paste Markdown-formatted text to convert it into rich text.

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}

+

+ {@link module:engine/dataprocessor/xmldataprocessor~XmlDataProcessor XML output} +

Transform content into XML for automation and compatibility.

Turn your content into parsable XML files for automation and cross-platform interoperability.

@@ -641,34 +851,46 @@

Page management

Format, organize, and navigate your documents easily with page management features. Create a table of contents, insert page breaks, and manage pagination.

-

{@link features/document-outline Document outline}

+

+ {@link features/document-outline Document outline} + Premium feature + +

Lists headings in a sidebar for quick navigation through documents.

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}

+

+ {@link features/minimap Page utilities} +

Manage document layout and formatting with Page Utilities.

CKEditor 5 Page Utilities enables users to dictate the structuring and print formatting of their documents effectively.

-

{@link features/minimap Content minimap}

+

+ {@link features/minimap Content minimap} +

Provides an overview of content for quick navigation.

Offers a concise, birds-eye view of the document's content, allowing for quick navigation and content management.

-

{@link features/title Document title}

+

+ {@link features/title Document title} +

Set and edit the document title for accuracy and relevance.

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}

+

+ {@link features/page-break Page break} +

Insert manual page breaks for precise layout control.

Facilitates the insertion of manual breaks within the document, enabling the definition of page endings and beginnings for optimal layout and print clarity.

@@ -677,14 +899,22 @@

{@link features/page-break Page break}

-

{@link features/pagination Pagination}

+

+ {@link features/pagination Pagination} + Premium feature + +

Visually mark page boundaries for better document layout.

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}

+

+ {@link features/table-of-contents Table of contents} + Premium feature + +

Insert a dynamic table of contents that updates in real time.

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.

@@ -697,41 +927,55 @@

Productivity

Speed up the content creation process with dedicated productivity utilities. Autoformat your content as you write (or paste from other editors) or even delegate some tasks to an AI Assistant.

-

{@link features/ai-assistant-overview AI Assistant}

+

+ {@link features/ai-assistant-overview AI Assistant} + Premium feature + +

Leverage AI for content creation, processing, and customizable integrations.

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}

+

+ {@link features/autoformat Automation} +

Streamline tasks like formatting, linking, and saving with automation tools.

Automate your workflow with CKEditor 5 automation tools, regardless of whether you write, link, or save!

-

{@link features/autoformat Autoformatting}

+

+ {@link features/autoformat Autoformatting} +

Quickly format content using Markdown-like shortcuts.

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/text-transformation Automatic text transformations}

+

+ {@link features/text-transformation Automatic text transformations} +

Automatically expand abbreviations or autocorrect text based on predefined rules.

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}

+

+ {@link features/autosave Autosave} +

Automatically save changes for uninterrupted workflow.

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.

@@ -740,91 +984,131 @@

{@link features/autosave Autosave}

-

{@link features/case-change Case change}

+

+ {@link features/case-change Case change} + Premium feature + +

Easily switch text cases between uppercase, lowercase, and title case.

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/find-and-replace Find and replace}

+

+ {@link features/find-and-replace Find and replace} +

Search and replace text efficiently across your document.

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}

+

+ {@link features/format-painter Format painter} + Premium feature + +

Clone and apply formatting for consistent styling across sections.

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/accessibility#keyboard-shortcuts Keyboard shortcuts}

+

+ {@link features/accessibility#keyboard-shortcuts Keyboard shortcuts} +

Boost productivity with keyboard shortcuts for editing and accessibility.

CKEditor 5 supports various keyboard shortcuts that boost productivity and provide necessary accessibility to screen reader users.

-

{@link features/math-equations MathType}

+

+ {@link features/math-equations MathType} + Premium feature + +

Insert formatted math equations and chemical formulas into your content.

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}

+

+ {@link features/merge-fields Merge fields} + Premium feature + +

Add placeholders for dynamic values in templates and documents.

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}

+

+ {@link features/paste-from-google-docs Paste from Google Docs} +

Retain formatting when pasting content 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}

+

+ {@link features/paste-from-office Paste from Office} +

Preserve formatting and structure when pasting from Microsoft 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 Paste from Office Enhanced}

+

+ {@link features/paste-from-office-enhanced Paste from Office Enhanced} + Premium feature + +

Accurately preserve advanced formatting when pasting from Word or Excel.

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}

+

+ {@link features/paste-plain-text Paste plain text} +

Paste content without formatting for clean and consistent styling.

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}

+

+ {@link features/slash-commands Slash commands} + Premium feature + +

Quickly add and style content using slash commands for efficiency.

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}

+

+ {@link features/special-characters Special characters} +

Add unique symbols, characters, and emojis to your content.

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}

+

+ {@link features/template Templates} + Premium feature + +

Insert predefined templates for faster and consistent document creation.

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.

@@ -837,55 +1121,71 @@

Configurations

Configure CKEditor 5 to your liking. Choose the editor type, modify the toolbar, and select a language from our translated language packs.

-

{@link features/editor-placeholder Editor placeholder}

+

+ {@link features/editor-placeholder Editor placeholder} +

Display customizable placeholder text in the editor when no content is present.

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}

+

+ {@link getting-started/setup/editor-types Editor UI types} +

undefined

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}

+

+ {@link getting-started/setup/editor-types#balloon-editor-and-balloon-block-editor Balloon block editor} +

Balloon editor with a block toolbar for advanced block-level editing.

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 editor}

+

+ {@link getting-started/setup/editor-types#balloon-editor-and-balloon-block-editor Balloon editor} +

Inline editor with a toolbar that appears next to the text selection.

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}

+

+ {@link getting-started/setup/editor-types#classic-editor Classic editor} +

Traditional editor with a fixed toolbar and editing area.

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}

+

+ {@link getting-started/setup/editor-types#decoupled-editor-document Decoupled editor} +

Editor designed for creating documents like Google Docs or Microsoft Word.

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}

+

+ {@link getting-started/setup/editor-types#inline-editor Inline editor} +

Floating toolbar editor for editing content directly on the web page.

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}

+

+ {@link getting-started/setup/editor-types#multi-root-editor Multi-root editor} +

Editor with multiple connected editable areas sharing the same configuration.

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.

@@ -894,83 +1194,107 @@

{@link getting-started/setup/editor-types#multi-root-e

-

{@link getting-started/setup/ui-language Professionally translated language packs}

+

+ {@link getting-started/setup/ui-language Professionally translated language packs} +

undefined

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}

+

+ {@link getting-started/setup/toolbar Toolbar and menus} +

undefined

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}

+

+ {@link getting-started/setup/toolbar#balloon-toolbar Balloon toolbar} +

A floating toolbar that appears when content is selected.

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}

+

+ {@link getting-started/setup/toolbar#block-toolbar Block toolbar} +

A configurable toolbar on the left side of the editor.

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}

+

+ {@link getting-started/setup/toolbar#main-editor-toolbar Classic toolbar} +

A standard toolbar with buttons and dropdowns for editing.

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}

+

+ {@link getting-started/setup/toolbar#extended-toolbar-configuration-format Collapsible toolbar} +

A toolbar that collapses to save space.

Collapsible toolbar for UI space efficiency.

-

{@link features/images-overview#image-contextual-toolbar Image contextual toolbar}

+

+ {@link features/images-overview#image-contextual-toolbar Image contextual toolbar} +

A toolbar for image-specific tools appearing upon selection.

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/toolbar#multiline-wrapping-toolbar Multiline toolbar}

+

+ {@link getting-started/setup/toolbar#multiline-wrapping-toolbar Multiline toolbar} +

A toolbar that spans multiple lines for better tool visibility.

Multiline toolbar for easy access to all functions.

-

{@link getting-started/setup/toolbar#grouping-toolbar-items-in-dropdowns-nested-toolbars Nesting toolbars in dropdowns}

+

+ {@link getting-started/setup/toolbar#grouping-toolbar-items-in-dropdowns-nested-toolbars Nesting toolbars in dropdowns} +

Group toolbar items into dropdowns to save space.

Nested toolbars for space efficiency and task-oriented access.

-

{@link features/tables#table-contextual-toolbar Table contextual toolbar}

+

+ {@link features/tables#table-contextual-toolbar Table contextual toolbar} +

A toolbar for table-related tools appearing on selection.

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.

@@ -979,7 +1303,9 @@

{@link features/tables#table-contextual-toolbar Table

-

{@link features/watchdog Watchdog}

+

+ {@link features/watchdog Watchdog} +

A utility that prevents data loss by recovering content after crashes.

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.

@@ -992,42 +1318,56 @@

Compliance

Make your content accessible to any person or restrict it to specific users.

-

{@link features/accessibility Accessibility support}

+

+ {@link features/accessibility Accessibility support} +

Provides keyboard navigation, screen reader support, and semantic output for accessibility compliance.

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}

+

+ {@link features/read-only Read-only support} +

Allows content to be viewed without editing access.

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}

+

+ {@link features/restricted-editing Restricted editing} +

Restricts editing to specific sections of a document.

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}

+

+ {@link features/language Text Part Language} +

Specifies languages for text sections to enhance multilingual accessibility.

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}

+

+ {@link features/word-count Word and character counter} +

Tracks word and character count in real time.

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}

+

+ {@link features/spelling-and-grammar-checking WProofreader} + Premium feature + +

Proofreads text with real-time spelling and grammar checks in 80+ languages.

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.

@@ -1040,20 +1380,26 @@

Customization

Customize your editor even further. Use components and helpers from our UI library to create a UI that will match your design system.

-

{@link framework/index Editor SDK}

+

+ {@link framework/index Editor SDK} +

Customize your editor with toolbars, plugins, and developer tools.

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 framework/development-tools/inspector CKEditor 5 inspector}

+

+ {@link framework/development-tools/inspector CKEditor 5 inspector} +

A debugging tool for exploring editor internals.

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}.

-

{@link @cs developer-resources/apis/overview Cloud Services REST API}

+

+ {@link @cs developer-resources/apis/overview Cloud Services REST API} +

Cloud backend services with REST API support for collaboration.

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.

@@ -1062,14 +1408,18 @@

{@link @cs developer-resources/apis/overview Cloud Ser

-

{@link framework/theme-customization Themes}

+

+ {@link framework/theme-customization Themes} +

Customize the editor theme to match your design needs.

The default theme of CKEditor 5 can be customized to match most visual integration requirements.

-

{@link framework/architecture/ui-library UI Library}

+

+ {@link framework/architecture/ui-library UI Library} +

A modular UI library for seamless ecosystem integration.

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.

@@ -1082,35 +1432,49 @@

File management

Upload and manage your files using file management features. Take advantage of CKBox, our file management solution, or create your own using an adapter.

-

{@link features/base64-upload-adapter Base64 Upload Adapter}

+

+ {@link features/base64-upload-adapter Base64 Upload Adapter} +

Encodes images as Base64 strings for database storage.

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}

+

+ {@link features/ckbox CKBox} + Premium feature + +

A secure and flexible media management solution with cloud and on-premise options.

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}

+

+ {@link features/ckfinder CKFinder} + Premium feature + +

A robust file manager for inserting and editing images and files.

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}

+

+ {@link features/image-upload#implementing-your-own-upload-adapter Custom Upload Adapter} +

Integrates CKEditor with custom file management solutions.

Have your own file management solution? Use this adapter to integrate your preferred software with CKEditor.

-

{@link features/simple-upload-adapter Simple Upload Adapter}

+

+ {@link features/simple-upload-adapter Simple Upload Adapter} +

Uploads images to a server with minimal configuration.

Upload images to your server using the XMLHttpRequest API with a minimal editor configuration.

diff --git a/docs/features/feature-digest.md b/docs/features/feature-digest.md index de1a7e91fcc..a690519251c 100644 --- a/docs/features/feature-digest.md +++ b/docs/features/feature-digest.md @@ -28,6 +28,7 @@ h3.feature-title { .feature-short-description { font-weight: bold; + cursor: pointer; } .feature-description { @@ -64,48 +65,62 @@ h3.feature-title {

Core editing capability provides tools to create, edit, and style content. Here are essentials that every writer needs in their tool belt, like bold or italics. There is also something for coders - advanced HTML editing capabilities where you can directly edit HTML elements.

-

{@link features/general-html-support Advanced HTML Editing}

+

+ {@link features/general-html-support Advanced HTML Editing} +

Edit and customize HTML elements, attributes, and styles with full control.

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}

+

+ {@link features/full-page-html Full page HTML} +

Edit entire HTML documents, including metadata, beyond visible content.

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)}

+

+ {@link features/general-html-support General HTML Support (GHS)} +

Enable unsupported HTML elements, attributes, and styles in the editor.

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}

+

+ {@link features/html-comments HTML comment} +

Keep HTML comments in your document without displaying them to users.

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}

+

+ {@link features/html-embed HTML embed} +

Embed custom HTML snippets directly into your content.

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}

+

+ {@link features/show-blocks Show blocks} +

Visualize and outline all block-level elements in your content.

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 editing}

+

+ {@link features/source-editing Source editing} +

View and edit the source code of your document.

The source editing feature lets you view and edit the source of your document.

@@ -114,34 +129,44 @@ h3.feature-title {
-

{@link features/block-quote Block formatting}

+

+ {@link features/block-quote Block formatting} +

Organize and emphasize content with headings, block quotes, and horizontal lines.

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}

+

+ {@link features/block-quote Block quote} +

Add visually distinct block quotes to emphasize key excerpts.

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}

+

+ {@link features/headings Headings/paragraph} +

Structure content with headings for better readability and hierarchy.

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}

+

+ {@link features/horizontal-line Horizontal line} +

Insert horizontal lines to divide content or indicate topic changes.

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}

+

+ {@link features/indent Block indentation} +

Adjust text block indentation for better content structure.

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.

@@ -150,62 +175,80 @@ h3.feature-title {
-

{@link features/bookmarks Bookmarks}

+

+ {@link features/bookmarks Bookmarks} +

Add bookmarks for quick navigation to key content sections.

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}

+

+ {@link framework/deep-dive/clipboard Clipboard} +

Easily copy, cut, and paste content within or outside the editor.

Copy, cut, and paste content within the editor or from external sources.

-

{@link features/code-blocks Code blocks}

+

+ {@link features/code-blocks Code blocks} +

Insert preformatted code snippets with distinct styling.

Supports the insertion and management of pre-formatted code snippets with distinct styling.

-

{@link features/drag-drop Drag and drop}

+

+ {@link features/drag-drop Drag and drop} +

Reorganize text and elements using drag-and-drop functionality.

Rearrange elements within a document, including moving text blocks, images, or other content types.

-

{@link features/font Font formatting}

+

+ {@link features/font Font formatting} +

Customize font family, size, and color for tailored text presentation.

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}

+

+ {@link features/font#configuring-the-font-color-and-font-background-color-features Font background color} +

Highlight text with a colored background for emphasis.

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}

+

+ {@link features/font#configuring-the-font-color-and-font-background-color-features Font color} +

Apply custom colors to text for improved readability or style.

Effortlessly make the letters stand out with their own color.

-

{@link features/font#configuring-the-font-family-feature Font family}

+

+ {@link features/font#configuring-the-font-family-feature Font family} +

Choose suitable font families for your content needs.

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}

+

+ {@link features/font#configuring-the-font-size-feature Font size} +

Adjust font size for better readability and emphasis.

Easily control the size of the letters.

@@ -214,62 +257,80 @@ h3.feature-title {
-

{@link features/images-overview Image}

+

+ {@link features/images-overview Image} +

Add, style, and manage images with captions, resizing, and linking options.

The image feature allows adding images of various kinds to the rich content inside the editor. A large set of subFeature background-grays 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}

+

+ {@link features/images-text-alternative Image alt text} +

Add alt text to images for accessibility and SEO improvements.

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}

+

+ {@link features/images-captions Image captions} +

Add captions below images to provide context.

Add optional captions for images, which are shown below the picture.

-

{@link features/images-inserting Image insert via URL}

+

+ {@link features/images-inserting Image insert via URL} +

Insert images directly using their URLs.

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}

+

+ {@link features/images-linking Image linking} +

Turn images into clickable links for interactive content.

The {@link module:link/linkimage~LinkImage} plugin lets you use images as links.

-

{@link features/images-resizing Image resize}

+

+ {@link features/images-resizing Image resize} +

Easily resize images for better content fit.

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}

+

+ {@link features/images-styles Image styles} +

Apply custom styles and alignments to images.

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}

+

+ {@link features/image-upload Image upload} +

Upload images directly from your device to the editor.

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}

+

+ {@link features/images-responsive Responsive images} +

Automatically optimize images for different screen sizes.

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.

@@ -278,76 +339,100 @@ h3.feature-title {
-

{@link features/link Links}

+

+ {@link features/link Links} +

Add and manage hyperlinks in your text.

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}

+

+ {@link features/lists Lists} +

Create to-do, bulleted, and numbered lists with customizable styles.

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}

+

+ {@link features/lists-editing#indenting-lists List indentation} +

Control list item indentation for 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#list-start-index List start index}

+

+ {@link features/lists#list-start-index List start index} +

Set custom start numbers for ordered lists.

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}

+

+ {@link features/lists#list-styles List styles} +

Customize list markers for unique 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}

+

+ {@link features/multi-level-lists Multi-level lists} + Premium feature + +

Create hierarchical multi-level lists with numbering.

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}

+

+ {@link features/lists-editing#indenting-lists Nested lists} +

Easily create nested lists for complex content.

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}

+

+ {@link features/lists Ordered lists} +

Add structured ordered lists with flexible formatting options.

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}

+

+ {@link features/lists#reversed-list Reversed list} +

Reverse list numbering for countdowns or steps.

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}

+

+ {@link features/todo-lists To-do lists} +

Create interactive to-do lists with checkboxes.

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}

+

+ {@link features/lists Unordered lists} +

Add unordered lists with customizable markers.

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.

@@ -356,83 +441,107 @@ h3.feature-title {
-

{@link features/mermaid Mermaid}

+

+ {@link features/mermaid Mermaid} Exp +

Create diagrams and charts using Markdown-inspired syntax.

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}

+

+ {@link features/remove-format Remove formatting} +

Quickly strip inline styles and formatting from text.

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}

+

+ {@link features/select-all Select all} +

Select all content within the editor instantly.

Enables the selection of all content within the editor with a single command or shortcut.

-

{@link features/tables Tables}

+

+ {@link features/tables Tables} +

Design and manage tables with advanced editing options.

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}

+

+ {@link features/tables-resize Columns resizing} +

Resize table columns for precise layout control.

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}

+

+ {@link features/tables#table-contextual-toolbar Insert/delete columns & rows} +

Easily add or remove table rows and columns.

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}

+

+ {@link features/tables#table-contextual-toolbar Merge & split cells} +

Merge or split table cells as needed.

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}

+

+ {@link features/tables#nesting-tables Nesting} +

Nest tables within other tables for complex layouts.

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}

+

+ {@link features/tables-styling Styling tables & cells} +

Apply custom styles to tables and individual 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}

+

+ {@link features/tables#default-table-headers Table headers} +

Set default table headers for better structure.

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}

+

+ {@link features/tables#table-selection Table selection} +

Select and format specific table areas easily.

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}

+

+ {@link features/tables-caption Tables caption} +

Add captions to tables to improve accessibility.

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.

@@ -441,76 +550,98 @@ h3.feature-title {
-

{@link features/text-alignment Text alignment}

+

+ {@link features/text-alignment Text alignment} +

Align text left, right, center, or justify with ease.

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}

+

+ {@link features/basic-styles Text formatting} +

Apply bold, italic, underline, and other formatting styles to text.

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}

+

+ {@link features/basic-styles Bold} +

Make text bold for emphasis.

Making the letters look like the good time were never gone.

-

{@link features/basic-styles Code}

+

+ {@link features/basic-styles Code} +

Insert inline code snippets for technical content.

Snippet look like a terminal from the 1990s movie.

-

{@link features/highlight Highlight}

+

+ {@link features/highlight Highlight} +

Highlight text with color for emphasis.

Highlight makes important content stand out, either with font color or background fill.

-

{@link features/basic-styles Italic}

+

+ {@link features/basic-styles Italic} +

Italicize text for subtle emphasis.

Making the letters look like seashore pines.

-

{@link features/basic-styles Strikethrough}

+

+ {@link features/basic-styles Strikethrough} +

Strike through text to indicate removal.

Never mind, will not need it anymore.

-

{@link features/style Styles}

+

+ {@link features/style Styles} +

Apply predefined styles to block and inline elements.

The styles feature lets you easily apply predefined styles available for block and inline content.

-

{@link features/basic-styles Subscript}

+

+ {@link features/basic-styles Subscript} +

Add subscript text for chemical formulas or footnotes.

Fine print at the bottom, like atom numbers.

-

{@link features/basic-styles Superscript}

+

+ {@link features/basic-styles Superscript} +

Add superscript text for exponents or references.

Fine print on top, like references in a book.

-

{@link features/basic-styles Underline}

+

+ {@link features/basic-styles Underline} +

Underline text to highlight importance.

Stuff looks important, yo. Or like a link, too.

@@ -519,7 +650,9 @@ h3.feature-title {
-

{@link features/undo-redo Undo/redo}

+

+ {@link features/undo-redo Undo/redo} +

Easily undo or redo recent actions.

Backtrack or repeat actions for editing purposes.

@@ -532,13 +665,21 @@ h3.feature-title {

Collaborate with others - real-time or asynchronously. Comment, co-author, and mention team members in your documents. With collaboration features review process should be a breeze.

-

{@link features/collaboration Asynchronous collaboration}

+

+ {@link features/collaboration Asynchronous collaboration} + Premium feature + +

Work collaboratively with team members asynchronously using Track Changes, Comments, and Revision History.

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}

+

+ {@link features/collaboration Local data storage} + Premium feature + +

Store collaborative data on local client servers for security and control.

In asynchronous collaboration, data is maintained on the client's servers.

@@ -547,27 +688,43 @@ h3.feature-title {
-

{@link features/comments Comments}

+

+ {@link features/comments Comments} + Premium feature + +

Add, discuss, and resolve comments for seamless content collaboration.

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}

+

+ {@link features/comments Comments archive} + Premium feature + +

Archive resolved comments for streamlined feedback management and future reference.

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}

+

+ {@link features/comments-outside-editor Comments outside editor} + Premium feature + +

Extend comment functionality to non-editor fields for enhanced application integration.

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/mentions Mentions}

+

+ {@link features/mentions Mentions} +

Notify and tag users in content using smart autocompletion with @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}

+

+ {@link features/real-time-collaboration Real-time collaboration} + Premium feature + +

Collaborate in real-time with automatic conflict resolution for seamless teamwork.

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}

+

+ {@link features/users-in-real-time-collaboration Co-authoring} + Premium feature + +

Edit and create content simultaneously with multiple users in real time.

Multiple user real-time editing and content creation feature.

-

{@link @cs onpremises/index On-premises}

+

+ {@link @cs onpremises/index On-premises} + Premium feature + +

Deploy real-time collaboration on your infrastructure for full control and privacy.

On-premises real-time collaboration version to deploy to client's own infrastructure, includes a private cloud.

-

{@link @cs guides/collaboration/quick-start SaaS}

+

+ {@link @cs guides/collaboration/quick-start SaaS} + Premium feature + +

Access real-time collaboration as a cloud service managed by CKSource.

Real-time collaboration provided as a service by CKSource.

@@ -612,21 +787,33 @@ h3.feature-title {
-

{@link features/revision-history Revision history}

+

+ {@link features/revision-history Revision history} + Premium feature + +

Track, compare, and restore document versions with detailed revision history.

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}

+

+ {@link features/track-changes Track changes} + Premium feature + +

Monitor and manage document edits with automatic suggestion tracking.

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}

+

+ {@link features/users Users list and permissions} + Premium feature + +

Manage user roles and permissions for secure, collaborative editing.

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.

@@ -639,27 +826,43 @@ h3.feature-title {

Collaborate also regarding different formats. With content conversions, you can integrate content across commonly used business formats. You can also enrich your content with media embeds.

-

{@link features/export-pdf Content generation}

+

+ {@link features/export-pdf Content generation} + Premium feature + +

Generate content in multiple formats like PDF and Word.

CKEditor 5 may be your universal starting point for generating content in several recognizable formats.

-

{@link features/export-pdf Export to PDF}

+

+ {@link features/export-pdf Export to PDF} + Premium feature + +

Convert in-editor content to a PDF with customizable options.

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}

+

+ {@link features/export-word Export to Word} + Premium feature + +

Export editor content to Word while preserving formatting and comments.

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}

+

+ {@link features/import-word Import from Word} + Premium feature + +

Convert Word documents to HTML while keeping styling and annotations.

Effortlessly transform Word documents into clean HTML within CKEditor 5 while retaining the original styling, as well as comments and change tracking annotations.

@@ -668,28 +871,36 @@ h3.feature-title {
-

{@link features/markdown Markdown output}

+

+ {@link features/markdown Markdown output} +

Outputs editor content in Markdown format for developer-friendly workflows.

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}

+

+ {@link features/media-embed Media embed} +

Embed media by pasting a URL or using the insert media button.

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}

+

+ {@link features/paste-markdown Paste Markdown} +

Paste Markdown-formatted text to convert it into rich text.

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}

+

+ {@link module:engine/dataprocessor/xmldataprocessor~XmlDataProcessor XML output} +

Transform content into XML for automation and compatibility.

Turn your content into parsable XML files for automation and cross-platform interoperability.

@@ -702,34 +913,46 @@ h3.feature-title {

Format, organize, and navigate your documents easily with page management features. Create a table of contents, insert page breaks, and manage pagination.

-

{@link features/document-outline Document outline}

+

+ {@link features/document-outline Document outline} + Premium feature + +

Lists headings in a sidebar for quick navigation through documents.

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}

+

+ {@link features/minimap Page utilities} +

Manage document layout and formatting with Page Utilities.

CKEditor 5 Page Utilities enables users to dictate the structuring and print formatting of their documents effectively.

-

{@link features/minimap Content minimap}

+

+ {@link features/minimap Content minimap} +

Provides an overview of content for quick navigation.

Offers a concise, birds-eye view of the document's content, allowing for quick navigation and content management.

-

{@link features/title Document title}

+

+ {@link features/title Document title} +

Set and edit the document title for accuracy and relevance.

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}

+

+ {@link features/page-break Page break} +

Insert manual page breaks for precise layout control.

Facilitates the insertion of manual breaks within the document, enabling the definition of page endings and beginnings for optimal layout and print clarity.

@@ -738,14 +961,22 @@ h3.feature-title {
-

{@link features/pagination Pagination}

+

+ {@link features/pagination Pagination} + Premium feature + +

Visually mark page boundaries for better document layout.

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}

+

+ {@link features/table-of-contents Table of contents} + Premium feature + +

Insert a dynamic table of contents that updates in real time.

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.

@@ -758,41 +989,55 @@ h3.feature-title {

Speed up the content creation process with dedicated productivity utilities. Autoformat your content as you write (or paste from other editors) or even delegate some tasks to an AI Assistant.

-

{@link features/ai-assistant-overview AI Assistant}

+

+ {@link features/ai-assistant-overview AI Assistant} + Premium feature + +

Leverage AI for content creation, processing, and customizable integrations.

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}

+

+ {@link features/autoformat Automation} +

Streamline tasks like formatting, linking, and saving with automation tools.

Automate your workflow with CKEditor 5 automation tools, regardless of whether you write, link, or save!

-

{@link features/autoformat Autoformatting}

+

+ {@link features/autoformat Autoformatting} +

Quickly format content using Markdown-like shortcuts.

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/text-transformation Automatic text transformations}

+

+ {@link features/text-transformation Automatic text transformations} +

Automatically expand abbreviations or autocorrect text based on predefined rules.

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}

+

+ {@link features/autosave Autosave} +

Automatically save changes for uninterrupted workflow.

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.

@@ -801,91 +1046,131 @@ h3.feature-title {
-

{@link features/case-change Case change}

+

+ {@link features/case-change Case change} + Premium feature + +

Easily switch text cases between uppercase, lowercase, and title case.

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/find-and-replace Find and replace}

+

+ {@link features/find-and-replace Find and replace} +

Search and replace text efficiently across your document.

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}

+

+ {@link features/format-painter Format painter} + Premium feature + +

Clone and apply formatting for consistent styling across sections.

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/accessibility#keyboard-shortcuts Keyboard shortcuts}

+

+ {@link features/accessibility#keyboard-shortcuts Keyboard shortcuts} +

Boost productivity with keyboard shortcuts for editing and accessibility.

CKEditor 5 supports various keyboard shortcuts that boost productivity and provide necessary accessibility to screen reader users.

-

{@link features/math-equations MathType}

+

+ {@link features/math-equations MathType} + Premium feature + +

Insert formatted math equations and chemical formulas into your content.

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}

+

+ {@link features/merge-fields Merge fields} + Premium feature + +

Add placeholders for dynamic values in templates and documents.

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}

+

+ {@link features/paste-from-google-docs Paste from Google Docs} +

Retain formatting when pasting content 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}

+

+ {@link features/paste-from-office Paste from Office} +

Preserve formatting and structure when pasting from Microsoft 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 Paste from Office Enhanced}

+

+ {@link features/paste-from-office-enhanced Paste from Office Enhanced} + Premium feature + +

Accurately preserve advanced formatting when pasting from Word or Excel.

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}

+

+ {@link features/paste-plain-text Paste plain text} +

Paste content without formatting for clean and consistent styling.

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}

+

+ {@link features/slash-commands Slash commands} + Premium feature + +

Quickly add and style content using slash commands for efficiency.

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}

+

+ {@link features/special-characters Special characters} +

Add unique symbols, characters, and emojis to your content.

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}

+

+ {@link features/template Templates} + Premium feature + +

Insert predefined templates for faster and consistent document creation.

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.

@@ -898,55 +1183,71 @@ h3.feature-title {

Configure CKEditor 5 to your liking. Choose the editor type, modify the toolbar, and select a language from our translated language packs.

-

{@link features/editor-placeholder Editor placeholder}

+

+ {@link features/editor-placeholder Editor placeholder} +

Display customizable placeholder text in the editor when no content is present.

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}

+

+ {@link getting-started/setup/editor-types Editor UI types} +

undefined

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}

+

+ {@link getting-started/setup/editor-types#balloon-editor-and-balloon-block-editor Balloon block editor} +

Balloon editor with a block toolbar for advanced block-level editing.

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 editor}

+

+ {@link getting-started/setup/editor-types#balloon-editor-and-balloon-block-editor Balloon editor} +

Inline editor with a toolbar that appears next to the text selection.

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}

+

+ {@link getting-started/setup/editor-types#classic-editor Classic editor} +

Traditional editor with a fixed toolbar and editing area.

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}

+

+ {@link getting-started/setup/editor-types#decoupled-editor-document Decoupled editor} +

Editor designed for creating documents like Google Docs or Microsoft Word.

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}

+

+ {@link getting-started/setup/editor-types#inline-editor Inline editor} +

Floating toolbar editor for editing content directly on the web page.

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}

+

+ {@link getting-started/setup/editor-types#multi-root-editor Multi-root editor} +

Editor with multiple connected editable areas sharing the same configuration.

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.

@@ -955,83 +1256,107 @@ h3.feature-title {
-

{@link getting-started/setup/ui-language Professionally translated language packs}

+

+ {@link getting-started/setup/ui-language Professionally translated language packs} +

undefined

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}

+

+ {@link getting-started/setup/toolbar Toolbar and menus} +

undefined

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}

+

+ {@link getting-started/setup/toolbar#balloon-toolbar Balloon toolbar} +

A floating toolbar that appears when content is selected.

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}

+

+ {@link getting-started/setup/toolbar#block-toolbar Block toolbar} +

A configurable toolbar on the left side of the editor.

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}

+

+ {@link getting-started/setup/toolbar#main-editor-toolbar Classic toolbar} +

A standard toolbar with buttons and dropdowns for editing.

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}

+

+ {@link getting-started/setup/toolbar#extended-toolbar-configuration-format Collapsible toolbar} +

A toolbar that collapses to save space.

Collapsible toolbar for UI space efficiency.

-

{@link features/images-overview#image-contextual-toolbar Image contextual toolbar}

+

+ {@link features/images-overview#image-contextual-toolbar Image contextual toolbar} +

A toolbar for image-specific tools appearing upon selection.

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/toolbar#multiline-wrapping-toolbar Multiline toolbar}

+

+ {@link getting-started/setup/toolbar#multiline-wrapping-toolbar Multiline toolbar} +

A toolbar that spans multiple lines for better tool visibility.

Multiline toolbar for easy access to all functions.

-

{@link getting-started/setup/toolbar#grouping-toolbar-items-in-dropdowns-nested-toolbars Nesting toolbars in dropdowns}

+

+ {@link getting-started/setup/toolbar#grouping-toolbar-items-in-dropdowns-nested-toolbars Nesting toolbars in dropdowns} +

Group toolbar items into dropdowns to save space.

Nested toolbars for space efficiency and task-oriented access.

-

{@link features/tables#table-contextual-toolbar Table contextual toolbar}

+

+ {@link features/tables#table-contextual-toolbar Table contextual toolbar} +

A toolbar for table-related tools appearing on selection.

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.

@@ -1040,7 +1365,9 @@ h3.feature-title {
-

{@link features/watchdog Watchdog}

+

+ {@link features/watchdog Watchdog} +

A utility that prevents data loss by recovering content after crashes.

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.

@@ -1053,42 +1380,56 @@ h3.feature-title {

Make your content accessible to any person or restrict it to specific users.

-

{@link features/accessibility Accessibility support}

+

+ {@link features/accessibility Accessibility support} +

Provides keyboard navigation, screen reader support, and semantic output for accessibility compliance.

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}

+

+ {@link features/read-only Read-only support} +

Allows content to be viewed without editing access.

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}

+

+ {@link features/restricted-editing Restricted editing} +

Restricts editing to specific sections of a document.

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}

+

+ {@link features/language Text Part Language} +

Specifies languages for text sections to enhance multilingual accessibility.

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}

+

+ {@link features/word-count Word and character counter} +

Tracks word and character count in real time.

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}

+

+ {@link features/spelling-and-grammar-checking WProofreader} + Premium feature + +

Proofreads text with real-time spelling and grammar checks in 80+ languages.

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.

@@ -1101,20 +1442,26 @@ h3.feature-title {

Customize your editor even further. Use components and helpers from our UI library to create a UI that will match your design system.

-

{@link framework/index Editor SDK}

+

+ {@link framework/index Editor SDK} +

Customize your editor with toolbars, plugins, and developer tools.

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 framework/development-tools/inspector CKEditor 5 inspector}

+

+ {@link framework/development-tools/inspector CKEditor 5 inspector} +

A debugging tool for exploring editor internals.

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}.

-

{@link @cs developer-resources/apis/overview Cloud Services REST API}

+

+ {@link @cs developer-resources/apis/overview Cloud Services REST API} +

Cloud backend services with REST API support for collaboration.

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.

@@ -1123,14 +1470,18 @@ h3.feature-title {
-

{@link framework/theme-customization Themes}

+

+ {@link framework/theme-customization Themes} +

Customize the editor theme to match your design needs.

The default theme of CKEditor 5 can be customized to match most visual integration requirements.

-

{@link framework/architecture/ui-library UI Library}

+

+ {@link framework/architecture/ui-library UI Library} +

A modular UI library for seamless ecosystem integration.

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.

@@ -1143,35 +1494,49 @@ h3.feature-title {

Upload and manage your files using file management features. Take advantage of CKBox, our file management solution, or create your own using an adapter.

-

{@link features/base64-upload-adapter Base64 Upload Adapter}

+

+ {@link features/base64-upload-adapter Base64 Upload Adapter} +

Encodes images as Base64 strings for database storage.

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}

+

+ {@link features/ckbox CKBox} + Premium feature + +

A secure and flexible media management solution with cloud and on-premise options.

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}

+

+ {@link features/ckfinder CKFinder} + Premium feature + +

A robust file manager for inserting and editing images and files.

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}

+

+ {@link features/image-upload#implementing-your-own-upload-adapter Custom Upload Adapter} +

Integrates CKEditor with custom file management solutions.

Have your own file management solution? Use this adapter to integrate your preferred software with CKEditor.

-

{@link features/simple-upload-adapter Simple Upload Adapter}

+

+ {@link features/simple-upload-adapter Simple Upload Adapter} +

Uploads images to a server with minimal configuration.

Upload images to your server using the XMLHttpRequest API with a minimal editor configuration.

From b2f033e694823bcf7765e5811ca23dfb9e259d2f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotr=20Szcz=C4=99=C5=9Bniak?= Date: Fri, 29 Nov 2024 16:02:14 +0100 Subject: [PATCH 14/20] Section headlines changed from HTML to MD notation. --- docs/_snippets/features-digest-generator.mjs | 13 +- docs/_snippets/features-digest-output.html | 117 +++++++++--------- docs/features/feature-digest.md | 119 +++++++++---------- 3 files changed, 115 insertions(+), 134 deletions(-) diff --git a/docs/_snippets/features-digest-generator.mjs b/docs/_snippets/features-digest-generator.mjs index 0e10a4ab7b5..e053993df4e 100644 --- a/docs/_snippets/features-digest-generator.mjs +++ b/docs/_snippets/features-digest-generator.mjs @@ -42,13 +42,12 @@ const __dirname = upath.dirname( __filename ); } )(); function generateCapability( capability ) { - return `
-

${ capability.name }

-

${ capability.description }

-
- ${ capability.features.map( feature => generateFeature( feature ) ).join( '\n' ) } -
-
`; + return ` +## ${ capability.name } +

${ capability.description }

+
+ ${ capability.features.map( feature => generateFeature( feature ) ).join( '\n' ) } +
`; } function generateFeature( feature, isSubFeature = false ) { diff --git a/docs/_snippets/features-digest-output.html b/docs/_snippets/features-digest-output.html index d7e2355ced4..ed5da24fc3f 100644 --- a/docs/_snippets/features-digest-output.html +++ b/docs/_snippets/features-digest-output.html @@ -1,8 +1,8 @@ -
-

Core editing

-

Core editing capability provides tools to create, edit, and style content. Here are essentials that every writer needs in their tool belt, like bold or italics. There is also something for coders - advanced HTML editing capabilities where you can directly edit HTML elements.

-
-
+ +## Core editing +

Core editing capability provides tools to create, edit, and style content. Here are essentials that every writer needs in their tool belt, like bold or italics. There is also something for coders - advanced HTML editing capabilities where you can directly edit HTML elements.

+
+

{@link features/general-html-support Advanced HTML Editing}

@@ -596,13 +596,12 @@

Backtrack or repeat actions for editing purposes.

-
- -
-

Collaboration

-

Collaborate with others - real-time or asynchronously. Comment, co-author, and mention team members in your documents. With collaboration features review process should be a breeze.

-
-
+
+ +## Collaboration +

Collaborate with others - real-time or asynchronously. Comment, co-author, and mention team members in your documents. With collaboration features review process should be a breeze.

+
+

{@link features/collaboration Asynchronous collaboration} Premium feature @@ -757,13 +756,12 @@

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.

-
- -
-

Content conversion & embedding

-

Collaborate also regarding different formats. With content conversions, you can integrate content across commonly used business formats. You can also enrich your content with media embeds.

-
-
+
+ +## Content conversion & embedding +

Collaborate also regarding different formats. With content conversions, you can integrate content across commonly used business formats. You can also enrich your content with media embeds.

+
+

{@link features/export-pdf Content generation} Premium feature @@ -844,13 +842,12 @@

Turn your content into parsable XML files for automation and cross-platform interoperability.

-
- -
-

Page management

-

Format, organize, and navigate your documents easily with page management features. Create a table of contents, insert page breaks, and manage pagination.

-
-
+
+ +## Page management +

Format, organize, and navigate your documents easily with page management features. Create a table of contents, insert page breaks, and manage pagination.

+
+

{@link features/document-outline Document outline} Premium feature @@ -920,13 +917,12 @@

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.

-
- -
-

Productivity

-

Speed up the content creation process with dedicated productivity utilities. Autoformat your content as you write (or paste from other editors) or even delegate some tasks to an AI Assistant.

-
-
+
+ +## Productivity +

Speed up the content creation process with dedicated productivity utilities. Autoformat your content as you write (or paste from other editors) or even delegate some tasks to an AI Assistant.

+
+

{@link features/ai-assistant-overview AI Assistant} Premium feature @@ -1114,13 +1110,12 @@

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.

-
- -
-

Configurations

-

Configure CKEditor 5 to your liking. Choose the editor type, modify the toolbar, and select a language from our translated language packs.

-
-
+
+ +## Configurations +

Configure CKEditor 5 to your liking. Choose the editor type, modify the toolbar, and select a language from our translated language packs.

+
+

{@link features/editor-placeholder Editor placeholder}

@@ -1311,13 +1306,12 @@

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.

-
- -
-

Compliance

-

Make your content accessible to any person or restrict it to specific users.

-
-
+
+ +## Compliance +

Make your content accessible to any person or restrict it to specific users.

+
+

{@link features/accessibility Accessibility support}

@@ -1373,13 +1367,12 @@

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.

-
- -
-

Customization

-

Customize your editor even further. Use components and helpers from our UI library to create a UI that will match your design system.

-
-
+
+ +## Customization +

Customize your editor even further. Use components and helpers from our UI library to create a UI that will match your design system.

+
+

{@link framework/index Editor SDK}

@@ -1425,13 +1418,12 @@

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.

-
- -
-

File management

-

Upload and manage your files using file management features. Take advantage of CKBox, our file management solution, or create your own using an adapter.

-
-
+
+ +## File management +

Upload and manage your files using file management features. Take advantage of CKBox, our file management solution, or create your own using an adapter.

+
+

{@link features/base64-upload-adapter Base64 Upload Adapter}

@@ -1480,5 +1472,4 @@

Upload images to your server using the XMLHttpRequest API with a minimal editor configuration.

-
- \ No newline at end of file +
\ No newline at end of file diff --git a/docs/features/feature-digest.md b/docs/features/feature-digest.md index a690519251c..3ecd39dc3e9 100644 --- a/docs/features/feature-digest.md +++ b/docs/features/feature-digest.md @@ -7,7 +7,7 @@ modified_at: 2024-11-20 order: -998 --- -CKEditor 5 offers over 150 various features, from basic editing capabilities like bold or italics to full-blown real-time collaboration, where multiple people can work on one document at the same time. This page collects them all and groups them into capabilities, features, and sub-features. Let's hope this list will help you grasp and easily digest everything CKEditor 5 has to offer. +CKEditor 5 offers over 150 various features, from basic editing capabilities like bold or italics to full-blown real-time collaboration, where multiple people can work on one document at the same time. This page collects them all and groups them into capabilities, features, and sub-features. Let's hope this list will help you grasp and easily digest everything CKEditor 5 has to offer.  {@link features/full-page-html Full page HTML} -
-

Core editing

-

Core editing capability provides tools to create, edit, and style content. Here are essentials that every writer needs in their tool belt, like bold or italics. There is also something for coders - advanced HTML editing capabilities where you can directly edit HTML elements.

-
-
+ +## Core editing +

Core editing capability provides tools to create, edit, and style content. Here are essentials that every writer needs in their tool belt, like bold or italics. There is also something for coders - advanced HTML editing capabilities where you can directly edit HTML elements.

+
+

{@link features/general-html-support Advanced HTML Editing}

@@ -658,13 +658,12 @@ h3.feature-title {

Backtrack or repeat actions for editing purposes.

-
- -
-

Collaboration

-

Collaborate with others - real-time or asynchronously. Comment, co-author, and mention team members in your documents. With collaboration features review process should be a breeze.

-
-
+
+ +## Collaboration +

Collaborate with others - real-time or asynchronously. Comment, co-author, and mention team members in your documents. With collaboration features review process should be a breeze.

+
+

{@link features/collaboration Asynchronous collaboration} Premium feature @@ -819,13 +818,12 @@ h3.feature-title {

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.

-
- -
-

Content conversion & embedding

-

Collaborate also regarding different formats. With content conversions, you can integrate content across commonly used business formats. You can also enrich your content with media embeds.

-
-
+
+ +## Content conversion & embedding +

Collaborate also regarding different formats. With content conversions, you can integrate content across commonly used business formats. You can also enrich your content with media embeds.

+
+

{@link features/export-pdf Content generation} Premium feature @@ -906,13 +904,12 @@ h3.feature-title {

Turn your content into parsable XML files for automation and cross-platform interoperability.

-
- -
-

Page management

-

Format, organize, and navigate your documents easily with page management features. Create a table of contents, insert page breaks, and manage pagination.

-
-
+
+ +## Page management +

Format, organize, and navigate your documents easily with page management features. Create a table of contents, insert page breaks, and manage pagination.

+
+

{@link features/document-outline Document outline} Premium feature @@ -982,13 +979,12 @@ h3.feature-title {

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.

-
- -
-

Productivity

-

Speed up the content creation process with dedicated productivity utilities. Autoformat your content as you write (or paste from other editors) or even delegate some tasks to an AI Assistant.

-
-
+
+ +## Productivity +

Speed up the content creation process with dedicated productivity utilities. Autoformat your content as you write (or paste from other editors) or even delegate some tasks to an AI Assistant.

+
+

{@link features/ai-assistant-overview AI Assistant} Premium feature @@ -1176,13 +1172,12 @@ h3.feature-title {

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.

-
- -
-

Configurations

-

Configure CKEditor 5 to your liking. Choose the editor type, modify the toolbar, and select a language from our translated language packs.

-
-
+
+ +## Configurations +

Configure CKEditor 5 to your liking. Choose the editor type, modify the toolbar, and select a language from our translated language packs.

+
+

{@link features/editor-placeholder Editor placeholder}

@@ -1373,13 +1368,12 @@ h3.feature-title {

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.

-
- -
-

Compliance

-

Make your content accessible to any person or restrict it to specific users.

-
-
+
+ +## Compliance +

Make your content accessible to any person or restrict it to specific users.

+
+

{@link features/accessibility Accessibility support}

@@ -1435,13 +1429,12 @@ h3.feature-title {

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.

-
- -
-

Customization

-

Customize your editor even further. Use components and helpers from our UI library to create a UI that will match your design system.

-
-
+
+ +## Customization +

Customize your editor even further. Use components and helpers from our UI library to create a UI that will match your design system.

+
+

{@link framework/index Editor SDK}

@@ -1487,13 +1480,12 @@ h3.feature-title {

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.

-
- -
-

File management

-

Upload and manage your files using file management features. Take advantage of CKBox, our file management solution, or create your own using an adapter.

-
-
+
+ +## File management +

Upload and manage your files using file management features. Take advantage of CKBox, our file management solution, or create your own using an adapter.

+
+

{@link features/base64-upload-adapter Base64 Upload Adapter}

@@ -1542,6 +1534,5 @@ h3.feature-title {

Upload images to your server using the XMLHttpRequest API with a minimal editor configuration.

- - + From 41d0930dbd5992d4a9082fbb9047aade00bf4f7b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotr=20Szcz=C4=99=C5=9Bniak?= Date: Fri, 29 Nov 2024 16:15:51 +0100 Subject: [PATCH 15/20] Added some colours. --- docs/features/feature-digest.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/features/feature-digest.md b/docs/features/feature-digest.md index 3ecd39dc3e9..b40c63aea6c 100644 --- a/docs/features/feature-digest.md +++ b/docs/features/feature-digest.md @@ -14,11 +14,12 @@ CKEditor 5 offers over 150 various features, from basic editing capabilities lik padding: 1rem; border: 1px solid #aaa; border-radius: 8px; + background-color: hsl(228, 100%, 99%); transition: 0.5s all; /* TODO */ } .feature:hover { - background-color: rgba(0, 0, 0, 0.0125); + /* background-color: rgba(0, 0, 0, 0.0125); */ box-shadow: 0 2px 10px 2px hsl(210, 22%, 91%); } @@ -48,6 +49,7 @@ h3.feature-title { .subfeatures-list .feature { margin-top: 0; + background-color: white; box-sizing: border-box; } From 4e297ce0ade5470391544a84a6f158ee1f314adb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotrek=20Koszuli=C5=84ski?= Date: Fri, 29 Nov 2024 17:42:13 +0100 Subject: [PATCH 16/20] A bit different styling. --- docs/_snippets/features-digest-generator.mjs | 6 +- docs/_snippets/features-digest-source.json | 9 +- docs/features/feature-digest.md | 344 ++++++++++--------- 3 files changed, 192 insertions(+), 167 deletions(-) diff --git a/docs/_snippets/features-digest-generator.mjs b/docs/_snippets/features-digest-generator.mjs index e053993df4e..209f437f022 100644 --- a/docs/_snippets/features-digest-generator.mjs +++ b/docs/_snippets/features-digest-generator.mjs @@ -23,9 +23,7 @@ const __dirname = upath.dirname( __filename ); await fs.writeFile( upath.join( __dirname, './features-digest-output.html' ), output.join( '\n' ) ); - /** - * Update the features digest markdown file content by to the newest HTML structure generated based on JSON data. - **/ + // Update the features digest markdown file content by to the newest HTML structure generated based on JSON data. const startMarker = ''; const endMarker = ''; const replacementText = output.join( '\n' ); @@ -69,7 +67,7 @@ function generateFeature( feature, isSubFeature = false ) { const addExperimentalBadge = feature.isExperimental ? experimentalBadge : ''; return `
-

+

{@link ${ feature.link } ${ feature.name }} ${ addPremiumBadge } ${ addExperimentalBadge }

diff --git a/docs/_snippets/features-digest-source.json b/docs/_snippets/features-digest-source.json index 909693b55dd..ab05717cf51 100644 --- a/docs/_snippets/features-digest-source.json +++ b/docs/_snippets/features-digest-source.json @@ -8,8 +8,8 @@ "type": "feature", "link": "features/general-html-support", "name": "Advanced HTML Editing", - "description": "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.", - "shortDescription": "Edit and customize HTML elements, attributes, and styles with full control.", + "description": "Advanced HTML Editing features provide 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.", + "shortDescription": "Enable editing and customizing HTML elements, attributes, and styles with full control.", "subFeatures": [ { "id": "full-page-html", @@ -32,7 +32,7 @@ "type": "subFeature", "link": "features/html-comments", "name": "HTML comment", - "description": "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.", + "description": "By default, the editor filters out all HTML comments on initialization. The HTML comment feature lets developers keep HTML comments in the document without displaying them to the user.", "shortDescription": "Keep HTML comments in your document without displaying them to users." }, { @@ -55,7 +55,7 @@ "id": "source-editing", "type": "subFeature", "link": "features/source-editing", - "name": "Source editing", + "name": "Source code editing", "description": "The source editing feature lets you view and edit the source of your document.", "shortDescription": "View and edit the source code of your document." } @@ -1007,6 +1007,7 @@ "link": "getting-started/setup/editor-types", "name": "Editor UI types", "description": "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.", + "shortDescription": "The user interface varies by editor type, offering features via a toolbar or shortcuts.", "subFeatures": [ { "id": "balloon-block-editor", diff --git a/docs/features/feature-digest.md b/docs/features/feature-digest.md index b40c63aea6c..2c308a1f277 100644 --- a/docs/features/feature-digest.md +++ b/docs/features/feature-digest.md @@ -7,33 +7,59 @@ modified_at: 2024-11-20 order: -998 --- -CKEditor 5 offers over 150 various features, from basic editing capabilities like bold or italics to full-blown real-time collaboration, where multiple people can work on one document at the same time. This page collects them all and groups them into capabilities, features, and sub-features. Let's hope this list will help you grasp and easily digest everything CKEditor 5 has to offer.  {@link features/full-page-html Full page HTML} +CKEditor 5 offers over 150 various features, from basic editing capabilities like bold or italics to full-blown real-time collaboration, where multiple people can work on one document at the same time. This page collects them all and groups them into capabilities, features, and sub-features. Let's hope this list will help you grasp and easily digest everything CKEditor 5 has to offer. From cc53c81e28a4fad8ab3c214dfc767318160a876a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotr=20Szcz=C4=99=C5=9Bniak?= Date: Mon, 2 Dec 2024 14:47:54 +0100 Subject: [PATCH 19/20] Fixed the position of scrolled page to feature heading using ToC, also added prefix to the h3 id. --- docs/_snippets/features-digest-generator.mjs | 2 +- docs/_snippets/features-digest-output.html | 300 +++++++++--------- docs/features/feature-digest.md | 304 +++++++++---------- 3 files changed, 303 insertions(+), 303 deletions(-) diff --git a/docs/_snippets/features-digest-generator.mjs b/docs/_snippets/features-digest-generator.mjs index a01a5ef678d..833310404ed 100644 --- a/docs/_snippets/features-digest-generator.mjs +++ b/docs/_snippets/features-digest-generator.mjs @@ -67,7 +67,7 @@ function generateFeature( feature, isSubFeature = false ) { const addExperimentalBadge = feature.isExperimental ? experimentalBadge : ''; return `
-

+

{@link ${ feature.link } ${ feature.name } ${ addPremiumBadge }${ addExperimentalBadge }}

diff --git a/docs/_snippets/features-digest-output.html b/docs/_snippets/features-digest-output.html index 519324de8d9..4797c4c8af2 100644 --- a/docs/_snippets/features-digest-output.html +++ b/docs/_snippets/features-digest-output.html @@ -3,7 +3,7 @@

Core editing capability provides tools to create, edit, and style content. Here are essentials that every writer needs in their tool belt, like bold or italics. There is also something for coders - advanced HTML editing capabilities where you can directly edit HTML elements.

-

+

{@link features/general-html-support Advanced HTML Editing }

@@ -11,7 +11,7 @@

Advanced HTML Editing features provide 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 }

@@ -20,7 +20,7 @@

-

+

{@link features/general-html-support General HTML Support (GHS) }

@@ -29,7 +29,7 @@

-

+

{@link features/html-comments HTML comment }

@@ -38,7 +38,7 @@

-

+

{@link features/html-embed HTML embed }

@@ -47,7 +47,7 @@

-

+

{@link features/show-blocks Show blocks }

@@ -56,7 +56,7 @@

-

+

{@link features/source-editing Source code editing }

@@ -67,7 +67,7 @@

-

+

{@link features/block-quote Block formatting }

@@ -75,7 +75,7 @@

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 }

@@ -84,7 +84,7 @@

-

+

{@link features/headings Headings/paragraph }

@@ -93,7 +93,7 @@

-

+

{@link features/horizontal-line Horizontal line }

@@ -102,7 +102,7 @@

-

+

{@link features/indent Block indentation }

@@ -113,7 +113,7 @@

-

+

{@link features/bookmarks Bookmarks }

@@ -122,7 +122,7 @@

-

+

{@link framework/deep-dive/clipboard Clipboard }

@@ -131,7 +131,7 @@

-

+

{@link features/code-blocks Code blocks }

@@ -140,7 +140,7 @@

-

+

{@link features/drag-drop Drag and drop }

@@ -149,7 +149,7 @@

-

+

{@link features/font Font formatting }

@@ -157,7 +157,7 @@

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 }

@@ -166,7 +166,7 @@

-

+

{@link features/font#configuring-the-font-color-and-font-background-color-features Font color }

@@ -175,7 +175,7 @@

-

+

{@link features/font#configuring-the-font-family-feature Font family }

@@ -184,7 +184,7 @@

-

+

{@link features/font#configuring-the-font-size-feature Font size }

@@ -195,7 +195,7 @@

-

+

{@link features/images-overview Image }

@@ -203,7 +203,7 @@

The image feature allows adding images of various kinds to the rich content inside the editor. A large set of subFeature background-grays 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 }

@@ -212,7 +212,7 @@

-

+

{@link features/images-captions Image captions }

@@ -221,7 +221,7 @@

-

+

{@link features/images-inserting Image insert via URL }

@@ -230,7 +230,7 @@

-

+

{@link features/images-linking Image linking }

@@ -239,7 +239,7 @@

-

+

{@link features/images-resizing Image resize }

@@ -248,7 +248,7 @@

-

+

{@link features/images-styles Image styles }

@@ -257,7 +257,7 @@

-

+

{@link features/image-upload Image upload }

@@ -266,7 +266,7 @@

-

+

{@link features/images-responsive Responsive images }

@@ -277,7 +277,7 @@

-
@@ -286,7 +286,7 @@
-

+

{@link features/lists Lists }

@@ -294,7 +294,7 @@

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 }

@@ -303,7 +303,7 @@

-

+

{@link features/lists#list-start-index List start index }

@@ -312,7 +312,7 @@

-

+

{@link features/lists#list-styles List styles }

@@ -321,7 +321,7 @@

-

+

{@link features/multi-level-lists Multi-level lists Premium feature } @@ -332,7 +332,7 @@

-

+

{@link features/lists-editing#indenting-lists Nested lists }

@@ -341,7 +341,7 @@

-

+

{@link features/lists Ordered lists }

@@ -350,7 +350,7 @@

-

+

{@link features/lists#reversed-list Reversed list }

@@ -359,7 +359,7 @@

-

+

{@link features/todo-lists To-do lists }

@@ -368,7 +368,7 @@

-

+

{@link features/lists Unordered lists }

@@ -379,7 +379,7 @@

-

+

{@link features/mermaid Mermaid Exp}

@@ -388,7 +388,7 @@

-

+

{@link features/remove-format Remove formatting }

@@ -397,7 +397,7 @@

-

+

{@link features/select-all Select all }

@@ -406,7 +406,7 @@

-

+

{@link features/tables Tables }

@@ -414,7 +414,7 @@

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 }

@@ -423,7 +423,7 @@

-

+

{@link features/tables#table-contextual-toolbar Insert/delete columns & rows }

@@ -432,7 +432,7 @@

-

+

{@link features/tables#table-contextual-toolbar Merge & split cells }

@@ -441,7 +441,7 @@

-

+

{@link features/tables#nesting-tables Nesting }

@@ -450,7 +450,7 @@

-

+

{@link features/tables-styling Styling tables & cells }

@@ -459,7 +459,7 @@

-

+

{@link features/tables#default-table-headers Table headers }

@@ -468,7 +468,7 @@

-

+

{@link features/tables#table-selection Table selection }

@@ -477,7 +477,7 @@

-

+

{@link features/tables-caption Tables caption }

@@ -488,7 +488,7 @@

-

+

{@link features/text-alignment Text alignment }

@@ -497,7 +497,7 @@

-

+

{@link features/basic-styles Text formatting }

@@ -505,7 +505,7 @@

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 }

@@ -514,7 +514,7 @@

-

+

{@link features/basic-styles Code }

@@ -523,7 +523,7 @@

-

+

{@link features/highlight Highlight }

@@ -532,7 +532,7 @@

-

+

{@link features/basic-styles Italic }

@@ -541,7 +541,7 @@

-

+

{@link features/basic-styles Strikethrough }

@@ -550,7 +550,7 @@

-

+

{@link features/style Styles }

@@ -559,7 +559,7 @@

-

+

{@link features/basic-styles Subscript }

@@ -568,7 +568,7 @@

-

+

{@link features/basic-styles Superscript }

@@ -577,7 +577,7 @@

-

+

{@link features/basic-styles Underline }

@@ -588,7 +588,7 @@

-

+

{@link features/undo-redo Undo/redo }

@@ -602,7 +602,7 @@

Collaborate with others - real-time or asynchronously. Comment, co-author, and mention team members in your documents. With collaboration features review process should be a breeze.

-

+

{@link features/collaboration Asynchronous collaboration Premium feature } @@ -612,7 +612,7 @@

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 } @@ -625,7 +625,7 @@

-

+

{@link features/comments Comments Premium feature } @@ -635,7 +635,7 @@

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 } @@ -646,7 +646,7 @@

-

+

{@link features/comments-outside-editor Comments outside editor Premium feature } @@ -657,7 +657,7 @@

-

+

{@link features/mentions Mentions }

@@ -679,7 +679,7 @@

-

+

{@link features/real-time-collaboration Real-time collaboration Premium feature } @@ -689,7 +689,7 @@

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 } @@ -700,7 +700,7 @@

-

+

{@link @cs onpremises/index On-premises Premium feature } @@ -711,7 +711,7 @@

-

+

{@link @cs guides/collaboration/quick-start SaaS Premium feature } @@ -724,7 +724,7 @@

-

+

{@link features/revision-history Revision history Premium feature } @@ -735,7 +735,7 @@

-

+

{@link features/track-changes Track changes Premium feature } @@ -746,7 +746,7 @@

-

+

{@link features/users Users list and permissions Premium feature } @@ -762,7 +762,7 @@

Collaborate also regarding different formats. With content conversions, you can integrate content across commonly used business formats. You can also enrich your content with media embeds.

-

+

{@link features/export-pdf Content generation Premium feature } @@ -772,7 +772,7 @@

CKEditor 5 may be your universal starting point for generating content in several recognizable formats.

-

+

{@link features/export-pdf Export to PDF Premium feature } @@ -783,7 +783,7 @@

-

+

{@link features/export-word Export to Word Premium feature } @@ -794,7 +794,7 @@

-

+

{@link features/import-word Import from Word Premium feature } @@ -807,7 +807,7 @@

-

+

{@link features/markdown Markdown output }

@@ -816,7 +816,7 @@

-

+

{@link features/media-embed Media embed }

@@ -825,7 +825,7 @@

-

+

{@link features/paste-markdown Paste Markdown }

@@ -834,7 +834,7 @@

-

+

{@link module:engine/dataprocessor/xmldataprocessor~XmlDataProcessor XML output }

@@ -848,7 +848,7 @@

Format, organize, and navigate your documents easily with page management features. Create a table of contents, insert page breaks, and manage pagination.

-

+

{@link features/document-outline Document outline Premium feature } @@ -859,7 +859,7 @@

-

+

{@link features/minimap Page utilities }

@@ -867,7 +867,7 @@

CKEditor 5 Page Utilities enables users to dictate the structuring and print formatting of their documents effectively.

-

+

{@link features/minimap Content minimap }

@@ -876,7 +876,7 @@

-

+

{@link features/title Document title }

@@ -885,7 +885,7 @@

-

+

{@link features/page-break Page break }

@@ -896,7 +896,7 @@

-

+

{@link features/pagination Pagination Premium feature } @@ -907,7 +907,7 @@

-

+

{@link features/table-of-contents Table of contents Premium feature } @@ -923,7 +923,7 @@

Speed up the content creation process with dedicated productivity utilities. Autoformat your content as you write (or paste from other editors) or even delegate some tasks to an AI Assistant.

-

+

{@link features/ai-assistant-overview AI Assistant Premium feature } @@ -934,7 +934,7 @@

-

+

{@link features/autoformat Automation }

@@ -942,7 +942,7 @@

Automate your workflow with CKEditor 5 automation tools, regardless of whether you write, link, or save!

-

+

{@link features/autoformat Autoformatting }

@@ -951,7 +951,7 @@

-

+

{@link features/text-transformation Automatic text transformations }

@@ -969,7 +969,7 @@

-

+

{@link features/autosave Autosave }

@@ -980,7 +980,7 @@

-

+

{@link features/case-change Case change Premium feature } @@ -991,7 +991,7 @@

-

+

{@link features/find-and-replace Find and replace }

@@ -1000,7 +1000,7 @@

-

+

{@link features/format-painter Format painter Premium feature } @@ -1011,7 +1011,7 @@

-

+

{@link features/accessibility#keyboard-shortcuts Keyboard shortcuts }

@@ -1020,7 +1020,7 @@

-

+

{@link features/math-equations MathType Premium feature } @@ -1031,7 +1031,7 @@

-

+

{@link features/merge-fields Merge fields Premium feature } @@ -1042,7 +1042,7 @@

-

+

{@link features/paste-from-google-docs Paste from Google Docs }

@@ -1051,7 +1051,7 @@

-

+

{@link features/paste-from-office Paste from Office }

@@ -1060,7 +1060,7 @@

-

+

{@link features/paste-from-office-enhanced Paste from Office Enhanced Premium feature } @@ -1071,7 +1071,7 @@

-

+

{@link features/paste-plain-text Paste plain text }

@@ -1080,7 +1080,7 @@

-

+

{@link features/slash-commands Slash commands Premium feature } @@ -1091,7 +1091,7 @@

-

+

{@link features/special-characters Special characters }

@@ -1100,7 +1100,7 @@

-

+

{@link features/template Templates Premium feature } @@ -1116,7 +1116,7 @@

Configure CKEditor 5 to your liking. Choose the editor type, modify the toolbar, and select a language from our translated language packs.

-

+

{@link features/editor-placeholder Editor placeholder }

@@ -1125,7 +1125,7 @@

-

+

{@link getting-started/setup/editor-types Editor UI types }

@@ -1133,7 +1133,7 @@

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 }

@@ -1142,7 +1142,7 @@

-

+

{@link getting-started/setup/editor-types#balloon-editor-and-balloon-block-editor Balloon editor }

@@ -1151,7 +1151,7 @@

-

+

{@link getting-started/setup/editor-types#classic-editor Classic editor }

@@ -1160,7 +1160,7 @@

-

+

{@link getting-started/setup/editor-types#decoupled-editor-document Decoupled editor }

@@ -1169,7 +1169,7 @@

-

+

{@link getting-started/setup/editor-types#inline-editor Inline editor }

@@ -1178,7 +1178,7 @@

-

+

{@link getting-started/setup/editor-types#multi-root-editor Multi-root editor }

@@ -1189,7 +1189,7 @@

-

+

{@link getting-started/setup/ui-language Professionally translated language packs }

@@ -1198,7 +1198,7 @@

-

+

{@link getting-started/setup/toolbar Toolbar and menus }

@@ -1206,7 +1206,7 @@

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 }

@@ -1215,7 +1215,7 @@

-

+

{@link getting-started/setup/toolbar#block-toolbar Block toolbar }

@@ -1224,7 +1224,7 @@

-

+

{@link getting-started/setup/toolbar#main-editor-toolbar Classic toolbar }

@@ -1233,7 +1233,7 @@

-

+

{@link getting-started/setup/toolbar#extended-toolbar-configuration-format Collapsible toolbar }

@@ -1242,7 +1242,7 @@

-

+

{@link features/images-overview#image-contextual-toolbar Image contextual toolbar }

@@ -1251,7 +1251,7 @@

-

+

{@link getting-started/setup/toolbar#multiline-wrapping-toolbar Multiline toolbar }

@@ -1269,7 +1269,7 @@

-

+

{@link getting-started/setup/toolbar#grouping-toolbar-items-in-dropdowns-nested-toolbars Nesting toolbars in dropdowns }

@@ -1278,7 +1278,7 @@

-

+

{@link features/tables#table-contextual-toolbar Table contextual toolbar }

@@ -1298,7 +1298,7 @@

-

+

{@link features/watchdog Watchdog }

@@ -1312,7 +1312,7 @@

Make your content accessible to any person or restrict it to specific users.

-

+

{@link features/accessibility Accessibility support }

@@ -1321,7 +1321,7 @@

-

+

{@link features/read-only Read-only support }

@@ -1330,7 +1330,7 @@

-

+

{@link features/restricted-editing Restricted editing }

@@ -1339,7 +1339,7 @@

-

+

{@link features/language Text Part Language }

@@ -1348,7 +1348,7 @@

-

+

{@link features/word-count Word and character counter }

@@ -1357,7 +1357,7 @@

-

+

{@link features/spelling-and-grammar-checking WProofreader Premium feature } @@ -1373,7 +1373,7 @@

Customize your editor even further. Use components and helpers from our UI library to create a UI that will match your design system.

-

+

{@link framework/index Editor SDK }

@@ -1381,7 +1381,7 @@

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 framework/development-tools/inspector CKEditor 5 inspector }

@@ -1390,7 +1390,7 @@

-

+

{@link @cs developer-resources/apis/overview Cloud Services REST API }

@@ -1401,7 +1401,7 @@

-

+

{@link framework/theme-customization Themes }

@@ -1410,7 +1410,7 @@

-

+

{@link framework/architecture/ui-library UI Library }

@@ -1424,7 +1424,7 @@

Upload and manage your files using file management features. Take advantage of CKBox, our file management solution, or create your own using an adapter.

-

+

{@link features/base64-upload-adapter Base64 Upload Adapter }

@@ -1433,7 +1433,7 @@

-

+

{@link features/ckbox CKBox Premium feature } @@ -1444,7 +1444,7 @@

-

+

{@link features/ckfinder CKFinder Premium feature } @@ -1455,7 +1455,7 @@

-

+

{@link features/image-upload#implementing-your-own-upload-adapter Custom Upload Adapter }

@@ -1464,7 +1464,7 @@

-

+

{@link features/simple-upload-adapter Simple Upload Adapter }

diff --git a/docs/features/feature-digest.md b/docs/features/feature-digest.md index 54309b156b5..de0eb78b8c0 100644 --- a/docs/features/feature-digest.md +++ b/docs/features/feature-digest.md @@ -11,7 +11,7 @@ CKEditor 5 offers over 150 various features, from basic editing capabilities lik - + ## Core editing

Core editing capability provides tools to create, edit, and style content. Here are essentials that every writer needs in their tool belt, like bold or italics. There is also something for coders - advanced HTML editing capabilities where you can directly edit HTML elements.

@@ -1588,4 +1588,4 @@ h3.feature-title {
- + diff --git a/docs/umberto.json b/docs/umberto.json index e0a65016830..702685a0568 100644 --- a/docs/umberto.json +++ b/docs/umberto.json @@ -3,7 +3,8 @@ "slug": "ckeditor5", "hooks": { "beforeHexo": [ - "../scripts/docs/build-content-styles.mjs" + "../scripts/docs/build-content-styles.mjs", + "../scripts/docs/generate-features-digest.mjs" ] }, "reportIssueWidget": { diff --git a/docs/_snippets/features-digest-generator.mjs b/scripts/docs/generate-features-digest.mjs similarity index 84% rename from docs/_snippets/features-digest-generator.mjs rename to scripts/docs/generate-features-digest.mjs index 833310404ed..ace914ecccb 100644 --- a/docs/_snippets/features-digest-generator.mjs +++ b/scripts/docs/generate-features-digest.mjs @@ -12,8 +12,8 @@ import { fileURLToPath } from 'url'; const __filename = fileURLToPath( import.meta.url ); const __dirname = upath.dirname( __filename ); -( async () => { - const digest = await fs.readJson( upath.join( __dirname, './features-digest-source.json' ) ); +export default async function generateFeaturesDigest() { + const digest = await fs.readJson( upath.join( __dirname, '../../docs/data/features-digest-source.json' ) ); const output = []; @@ -21,13 +21,11 @@ const __dirname = upath.dirname( __filename ); output.push( generateCapability( capability ) ); } ); - await fs.writeFile( upath.join( __dirname, './features-digest-output.html' ), output.join( '\n' ) ); - // Update the features digest markdown file content by to the newest HTML structure generated based on JSON data. - const startMarker = ''; - const endMarker = ''; + const startMarker = ''; + const endMarker = ''; const replacementText = output.join( '\n' ); - const filePath = upath.join( __dirname, '../features/feature-digest.md' ); + const filePath = upath.join( __dirname, '../../docs/features/feature-digest.md' ); const featuresDigestMdFileContent = await fs.readFile( filePath, 'utf8' ); const regex = new RegExp( `${ startMarker }[\\s\\S]*?${ endMarker }`, 'g' ); @@ -36,8 +34,10 @@ const __dirname = upath.dirname( __filename ); regex, `${ startMarker }\n${ replacementText }\n${ endMarker }` ); - fs.writeFile( filePath, modifiedContent, 'utf8' ); -} )(); + await fs.writeFile( filePath, modifiedContent, 'utf8' ); + + console.log( 'Features digest have been built.' ); +} function generateCapability( capability ) { return `