# CKEditor 5 documentation > Learn how to install, integrate, update, configure, and develop CKEditor 5. Browse through the API documentation and online samples. The API reference is indexed separately, in [latest/api/llms.txt](latest/api/llms.txt). ## Getting started - [Quick start](latest/getting-started/index.md): Learn how to start with CKEditor 5, the modern JavaScript-rich text editor. Find installation guides, tutorials, and integration tips. - [Build with AI](latest/getting-started/ai-coding-agents.md): Install the official CKEditor 5 skill in Claude Code, Cursor, Codex, OpenCode, or Copilot to set up, configure, and get the most out of its features. - **Installation** - **Cloud (CDN)** - [Vanilla JS](latest/getting-started/installation/cloud/quick-start.md): Install, integrate, and configure CKEditor 5 using Vanilla JS with CDN. Follow step-by-step instructions for fast installation and setup. - [Angular](latest/getting-started/installation/cloud/angular.md): Install, integrate, and configure CKEditor 5 using the Angular component with CDN. - **React** - [Default integration](latest/getting-started/installation/cloud/react/react-default-cdn.md): Install, integrate, and configure CKEditor 5 using the React component with CDN. - [Multi-root integration](latest/getting-started/installation/cloud/react/react-multiroot-cdn.md): Install, integrate, and configure CKEditor 5 using the React multi-root hook with CDN. - [Next.js](latest/getting-started/installation/cloud/next-js.md): Integrate the CKEditor 5 WYSIWYG editor with the Next.js framework using both routing strategies (App Router or Pages Router) and CDN. - [Nuxt](latest/getting-started/installation/cloud/nuxt.md): Integrate the CKEditor 5 WYSIWYG editor with the Nuxt framework using CDN. Follow step-by-step instructions for fast installation and setup. - [Vue.js 2.x](latest/getting-started/installation/cloud/vuejs-v2.md): Install, integrate, and configure CKEditor 5 using the Vue.js 2.x component with CDN. - **Vue.js 3+** - [Default integration](latest/getting-started/installation/cloud/vue/vue-default-cdn.md): Install, integrate, and configure CKEditor 5 using the Vue.js 3+ component with CDN. - [Multi-root integration](latest/getting-started/installation/cloud/vue/vue-multiroot-cdn.md): Install, integrate, and configure CKEditor 5 using the Vue.js 3+ multi-root component with CDN. - [Laravel](latest/getting-started/installation/cloud/laravel.md): Integrate the CKEditor 5 WYSIWYG editor with Laravel using CDN. Follow step-by-step instructions for fast installation and setup. - [.NET](latest/getting-started/installation/cloud/dotnet.md): Integrate the CKEditor 5 rich-text editor with .NET using CDN. Follow step-by-step instructions for fast installation and setup. - [Salesforce](latest/getting-started/installation/cloud/salesforce.md): Integrate the CKEditor 5 WYSIWYG editor with Salesforce and CKEditor 5 CDN. Follow step-by-step instructions for fast installation and setup. - [Svelte](latest/getting-started/installation/cloud/svelte.md): Integrate the CKEditor 5 rich-text editor with Svelte using CDN. Follow step-by-step instructions for fast installation and setup. - [Spring Boot](latest/getting-started/installation/cloud/spring-boot.md): Integrate the CKEditor 5 rich-text editor with Spring Boot using CDN. Follow step-by-step instructions for fast installation and setup. - [Electron](latest/getting-started/installation/cloud/electron.md): Integrate the CKEditor 5 rich-text editor with Electron using CDN. Follow step-by-step instructions for fast installation and setup. - [jQuery](latest/getting-started/installation/cloud/jquery.md): Integrate the CKEditor 5 rich-text editor with jQuery using CDN. Follow step-by-step instructions for fast installation and setup. - **Self-hosted (npm/ZIP)** - [Vanilla JS](latest/getting-started/installation/self-hosted/quick-start.md): Install, integrate, and configure CKEditor 5 using npm or ZIP. Follow step-by-step instructions for fast installation and setup. - [Angular](latest/getting-started/installation/self-hosted/angular.md): Install, integrate, and configure CKEditor 5 using the Angular component with npm. - **React** - [Default integration](latest/getting-started/installation/self-hosted/react/react-default-npm.md): Install, integrate, and configure CKEditor 5 using the default React component with npm. - [Multi-root integration](latest/getting-started/installation/self-hosted/react/react-multiroot-npm.md): Install, integrate, and configure CKEditor 5 using the React multi-root hook with npm. - [Next.js](latest/getting-started/installation/self-hosted/next-js.md): Integrate the CKEditor 5 WYSIWYG editor with the Next.js framework using both routing strategies (App Router or Pages Router) and npm. - [Nuxt](latest/getting-started/installation/self-hosted/nuxt.md): Integrate the CKEditor 5 WYSIWYG editor with the Nuxt framework using npm. Follow step-by-step instructions for fast installation and setup. - [Vue.js 2.x](latest/getting-started/installation/self-hosted/vuejs-v2.md): Install, integrate, and configure CKEditor 5 using the Vue.js 2.x component with npm. - **Vue.js 3+** - [Default integration](latest/getting-started/installation/self-hosted/vue/vue-default-npm.md): Install, integrate, and configure CKEditor 5 using the Vue.js 3+ component with npm. - [Multi-root integration](latest/getting-started/installation/self-hosted/vue/vue-multiroot-npm.md): Install, integrate, and configure CKEditor 5 using the Vue.js 3+ multi-root component with npm. - [Laravel](latest/getting-started/installation/self-hosted/laravel.md): Integrate the CKEditor 5 WYSIWYG editor with Laravel using a ZIP archive. Follow step-by-step instructions for fast installation and setup. - [.NET](latest/getting-started/installation/self-hosted/dotnet.md): Integrate the CKEditor 5 rich-text editor with .NET using a ZIP archive. Follow step-by-step instructions for fast installation and setup. - [Salesforce](latest/getting-started/installation/self-hosted/salesforce.md): Integrate the CKEditor 5 WYSIWYG editor with Salesforce using a ZIP archive. Follow step-by-step instructions for fast installation and setup. - [Svelte](latest/getting-started/installation/self-hosted/svelte.md): Integrate the CKEditor 5 rich-text editor with Svelte using npm. Follow step-by-step instructions for fast installation and setup. - [SharePoint (SPFx)](latest/getting-started/installation/self-hosted/sharepoint.md): Integrate the CKEditor 5 rich-text editor with SharePoint SPFx using npm. Follow step-by-step instructions for fast installation and setup. - [Spring Boot](latest/getting-started/installation/self-hosted/spring-boot.md): Integrate the CKEditor 5 rich-text editor with Spring Boot using a ZIP archive. Follow step-by-step instructions for fast installation and setup. - [Electron](latest/getting-started/installation/self-hosted/electron.md): Integrate the CKEditor 5 rich-text editor with Electron using ZIP archive. Follow step-by-step instructions for fast installation and setup. - [jQuery](latest/getting-started/installation/self-hosted/jquery.md): Integrate the CKEditor 5 rich-text editor with jQuery using npm. Follow step-by-step instructions for fast installation and setup. - [CSS frameworks](latest/getting-started/installation/css.md): Install, integrate, and configure the CKEditor 5 rich-text editor using CSS frameworks. Follow step-by-step instructions for fast setup. - [Drupal](latest/getting-started/installation/drupal-real-time-collaboration.md): Learn how to set up real-time collaboration in the Drupal editing platform with the CKEditor 5 Premium Features module. - **Setup** - [Getting and setting data](latest/getting-started/setup/getting-and-setting-data.md): Deep-dive into handling data with CKEditor 5. - [Editor lifecycle](latest/getting-started/setup/editor-lifecycle.md): Handling the editor lifecycle. With examples. - [Editor types](latest/getting-started/setup/editor-types.md): Learn more about available CKEditor 5 editor types. - [Root types](latest/getting-started/setup/root-types.md): Learn how to configure CKEditor 5 root types to control whether a root accepts block content, inline-only content, or a mix of both. - [Configuring features](latest/getting-started/setup/configuration.md): Learn how to configure CKEditor 5 features. - [Editor toolbar](latest/getting-started/setup/toolbar.md): Learn about configuring and handling the CKEditor 5 toolbars for the best experience and better performance. - [Menu bar](latest/getting-started/setup/menubar.md): Handling and fully utilizing the CKEditor 5 menu bar to boost productivity and easy access to features. - [UI language](latest/getting-started/setup/ui-language.md): Configuring and handling the language of the editor fot both the user interface and content. - [Editor and content styles](latest/getting-started/setup/css.md): Learn how to style the editor and content with CSS. - [Customizing icons](latest/getting-started/setup/customizing-icons.md): Learn how to customize editor icons. - [Content Security Policy (CSP)](latest/getting-started/setup/csp.md): Learn about the CKEditor 5 Content Security Policy (CSP). - [Optimizing build size](latest/getting-started/setup/optimizing-build-size.md): Learn how to optimize your CKEdiotr 5 build. - [Loading CDN resources](latest/getting-started/setup/loading-cdn-resources.md): Learn how to load CKEditor 5 resources from CDN. - [Using LTS Edition](latest/getting-started/setup/using-lts-edition.md): Learn about CKEditor 5 Long-term Support (LTS) Edition for enterprise use cases requiring extended support and maintenance. - **Licensing** - [License key and activation](latest/getting-started/licensing/license-key-and-activation.md): Managing your license keys and activating the editor. - [Usage-based billing](latest/getting-started/licensing/usage-based-billing.md): Learn how usage-based billing works in CKEditor 5. - [Editor license](latest/getting-started/licensing/license-and-legal.md): Choosing the right license type for you needs. - [Whitelabelling the editor](latest/getting-started/licensing/managing-ckeditor-logo.md): Managing the "Powered by CKEditor" logo. ## Features - [CKEditor 5 features overview](latest/features/index.md): Explore CKEditor 5's rich text editing features, including media management, collaboration tools, and more — all fully customizable and extensible. - [Feature digest](latest/features/feature-digest.md): CKEditor 5 offers over 150 features, from basic editing capabilities like bold or italics to full-blown real-time collaboration - this page lists them all. - [Accessibility support](latest/features/accessibility.md): Accessibility support in CKEditor 5 - WCAG 2.x and Section 508 conformance, VPAT Accessibility Conformance Report, keyboard shortcuts. - [Autoformatting](latest/features/autoformat.md) - [Automatic text transformation](latest/features/text-transformation.md) - [Autosave](latest/features/autosave.md) - [Basic text styles](latest/features/basic-styles.md) - [Block indentation](latest/features/indent.md) - [Block quote](latest/features/block-quote.md) - [Bookmarks](latest/features/bookmarks.md): The bookmarks feature allows for adding and managing bookmark anchors attached to the content. - [Case change](latest/features/case-change.md): The case change feature lets you automatically change the letter case of selected content. - **CKEditor AI** - [Overview](latest/features/ai/ckeditor-ai-overview.md): CKEditor AI integrates real-time AI writing assistance into editing workflows, boosting productivity, improving content quality, and streamlining creation. - [Chat](latest/features/ai/ckeditor-ai-chat.md): CKEditor AI integrates real-time AI writing assistance into editing workflows, boosting productivity, improving content quality, and streamlining creation. - [Quick Actions](latest/features/ai/ckeditor-ai-actions.md): CKEditor AI integrates real-time AI writing assistance into editing workflows, boosting productivity, improving content quality, and streamlining creation. - [Review](latest/features/ai/ckeditor-ai-review.md): CKEditor AI integrates real-time AI writing assistance into editing workflows, boosting productivity, improving content quality, and streamlining creation. - [Translate](latest/features/ai/ckeditor-ai-translate.md): CKEditor AI integrates real-time AI translation assistance into editing workflows, boosting productivity, improving content quality, and streamlining creation. - [Feature understanding](latest/features/ai/ckeditor-ai-feature-understanding.md): CKEditor AI understands which editor features are enabled and how they are configured, and tailors its output to your exact editor setup. - [Context library](latest/features/ai/ckeditor-ai-context-library.md): Ground CKEditor AI features in your organization's reusable prompts and reference files with the Context Library. - [AI-generated suggestions](latest/features/ai/ckeditor-ai-generated-suggestions.md): Visually distinguish CKEditor AI edits from manual ones with an AI-generated pill, a dedicated AI author identity, or an AI marker in revision history. - [Programmatic usage](latest/features/ai/ckeditor-ai-programmatic.md): Learn how to use CKEditor AI programmatically — from the front-end editor API and the REST API. - [Multi-root and multiple editors support](latest/features/ai/ckeditor-ai-multi-root-multi-editor-support.md): Use CKEditor AI features across all roots of a multi-root editor or across multiple editors that share a Context. - [MCP support](latest/features/ai/ckeditor-ai-mcp.md): Extend CKEditor AI with custom tools using the Model Context Protocol (MCP). Learn how to pass context to MCP tools and handle tool responses in the editor. - [Integration](latest/features/ai/ckeditor-ai-integration.md): Integrate CKEditor AI with OpenAI or Azure OpenAI - a complete setup guide with configuration and customization. - [Deployment (Cloud & On-premises)](latest/features/ai/ckeditor-ai-deployment.md): Learn about CKEditor AI deployment options including Cloud (SaaS) and On-premises, and how to configure the AI service endpoint. - **AI Assistant (legacy)** - [Overview](latest/features/ai/ai-assistant/ai-assistant-overview.md): Boost editing with CKEditor 5 AI Assistant. Generate content, improve writing, and process data using AI commands. Integrates with OpenAI & more. - [Integration](latest/features/ai/ai-assistant/ai-assistant-integration.md): Integrate CKEditor 5 AI Assistant with OpenAI or Azure OpenAI - a complete setup guide with configuration and customization. - **Cloud Services** - [Overview](latest/features/cloud-services/cloud-services-overview.md): Cloud platform with document conversion, editing features and real-time collaboration services that extend the capabilities of CKEditor 5. - [REST API and Webhooks](latest/features/cloud-services/cloud-services-rest-api.md): Available RESTful APIs of the Cloud Services platfrom and webhooks that extend the capabilities of CKEditor 5. - [Server-side editor API](latest/features/cloud-services/server-side-editor-api.md): Learn how to use server-side API to manage content and collaboration data easily without running the editor on the client side. - [Code blocks](latest/features/code-blocks.md) - **Collaboration** - [Overview](latest/features/collaboration/collaboration.md): Check CKEditor 5 collaboration features - comments, track changes, and revision history. Read about real-time and asynchronous modes for team document editing. - **Comments** - [Overview](latest/features/collaboration/comments/comments.md): Add comments to any content in CKEditor 5 - text, images, and media. Check two display modes, thread management, and collaborative editing. - [Integration](latest/features/collaboration/comments/comments-integration.md): Integrate CKEditor 5 comments with your database using simple load/save or adapter methods. It's a step-by-step guide with code examples. - [Comments-only mode](latest/features/collaboration/comments/comments-only-mode.md): Enable CKEditor 5 comments-only mode to let users add, edit, and remove comments while preventing document content changes. - [Comments outside the editor](latest/features/collaboration/comments/comments-outside-editor.md): Learn how to enable CKEditor 5 comments on form fields outside the editor using the Comments API and Context for deeper application integration. - [Comments archive custom UI](latest/features/collaboration/comments/comments-archive.md): Learn how to create a custom comments archive UI in CKEditor 5 with a tabbed interface to display resolved comment threads in your container. - [Walkthrough](latest/features/collaboration/comments/comments-walkthrough.md): Explore CKEditor 5 comments functionality, states (open, resolved, unlinked, deleted), integration with revision history, and Word import/export features. - **Track changes** - [Overview](latest/features/collaboration/track-changes/track-changes.md): Learn how to enable track changes in CKEditor 5 to follow edit history, accept/decline suggestions, and collaborate with multiple editors. - [Integration](latest/features/collaboration/track-changes/track-changes-integration.md): Integrate CKEditor 5 track changes with your app using simple load/save or adapter methods. Save suggestions to a database with API and plugins. - [Custom features](latest/features/collaboration/track-changes/track-changes-custom-features.md): Learn how to integrate custom CKEditor 5 plugins with track changes. Enable commands, handle insertions and deletions, and track attribute changes. - [Saving data without suggestions](latest/features/collaboration/track-changes/track-changes-data.md): Save CKEditor 5 data with all track changes' suggestions accepted or discarded using a plugin for document preview and printing. - [Increasing granularity](latest/features/collaboration/track-changes/track-changes-granular-suggestions.md): Learn to control CKEditor 5 track changes suggestion granularity - configure merging, tracking sessions, and prevent automatic joining for better editing. - [Preview final content](latest/features/collaboration/track-changes/track-changes-preview.md): Learn how to preview the CKEditor 5 final content with all track changes accepted. Configure custom DOM structure and styling. - **Revision history** - [Overview](latest/features/collaboration/revision-history/revision-history.md) - [Integration](latest/features/collaboration/revision-history/revision-history-integration.md) - **Real-time collaboration** - [Overview](latest/features/collaboration/real-time-collaboration/real-time-collaboration.md) - [Integration](latest/features/collaboration/real-time-collaboration/real-time-collaboration-integration.md): Learn how to integrate CKEditor 5 real-time collaboration features. Set up multiuser editing with Cloud Services, configure channels, and handle data. - [Users in real-time collaboration](latest/features/collaboration/real-time-collaboration/users-in-real-time-collaboration.md): Configure user presence lists and sessions in CKEditor 5 real-time collaboration. Show connected users, customize UI themes, and manage user permissions. - [Users](latest/features/collaboration/users.md): Manage user data, permissions, and avatars in CKEditor 5 collaboration features. Configure local users and anonymous users. Customize themes and colors. - [Context and collaboration features](latest/features/collaboration/context-and-collaboration-features.md): Use Context to organize multiple CKEditor 5 instances with shared collaboration features, including configuring channel IDs, common sidebars, and presence lists. - **Annotations** - [Overview](latest/features/collaboration/annotations/annotations.md): Learn how to use annotations in CKEditor 5 for collaborative editing, including comments, highlights, and real-time collaboration features. - [Display mode](latest/features/collaboration/annotations/annotations-display-mode.md): Discover how to customize annotation display modes in CKEditor 5 to enhance user experience during collaborative editing sessions. - [Configuration](latest/features/collaboration/annotations/annotations-custom-configuration.md): Learn how to configure annotations in CKEditor 5, including custom styles, positions, and integration options for tailored collaboration experiences. - [Custom theme](latest/features/collaboration/annotations/annotations-custom-theme.md): Learn to create a custom theme for annotations in CKEditor 5 to match your application's look and improve collaboration usability. - [Custom template](latest/features/collaboration/annotations/annotations-custom-template.md): Customize annotation UI in CKEditor 5 with your own HTML templates for comments and highlights using the Annotations Custom Template guide. - [Custom view](latest/features/collaboration/annotations/annotations-custom-view.md): Learn how to create a fully custom annotation view in CKEditor 5 to tailor the display and behavior of comments and highlights. - [Content minimap](latest/features/minimap.md): Add a minimap to CKEditor 5 for quick document navigation, enhancing the editing experience with a compact overview of content structure. - [Custom widgets and components](latest/features/custom-components.md) - **Document conversion** - [Export to PDF](latest/features/converters/export-pdf.md): Export your CKEditor 5 content to PDF with ease, preserving formatting and layout for cross-platform interoperability and portability. - [Export to Word](latest/features/converters/export-word.md): Easily export CKEditor 5 content to Microsoft Word format, keeping styles and formatting intact for seamless document sharing and editing. - **Import from Word** - [Import from Word](latest/features/converters/import-word/import-word.md): Import Microsoft Word documents into CKEditor 5, preserving formatting and structure for smooth editing and content integration. - [Features comparison](latest/features/converters/import-word/features-comparison.md): Compare CKEditor 5's Word import features to see supported elements, formatting options, and limitations for seamless document integration. - [Document outline](latest/features/document-outline.md): Enable a document outline in CKEditor 5 to easily navigate headings and improve content structure visibility during editing. - [Document title](latest/features/title.md): Add and configure a document title in CKEditor 5 to define the main heading, thereby improving content structure and accessibility. - [Drag and drop](latest/features/drag-drop.md): Learn all about using the drag and drop mechanism to manage content and uploads in CKEditor 5. - [Editor placeholder](latest/features/editor-placeholder.md): Learn how to configure and style CKEditor 5 placeholder text—set via textarea or config, customize with CSS, and update it dynamically in your editor. - **Email editing** - [Overview](latest/features/email-editing/email.md): Transform CKEditor 5 into a powerful, feature-rich WYSIWYG email editor with our comprehensive suite of intuitive tools and seamless customization options. - [Email configuration helper](latest/features/email-editing/email-configuration-helper.md): Get to know our set of tools to easily turn CKEditor 5 into a robust email editor. - [Emoji](latest/features/emoji.md): Insert and manage emojis in CKEditor 5 to enhance content expression and user engagement. - [Export with inline styles](latest/features/export-with-inline-styles.md): Seamlessly convert your content's external CSS style sheets into inlined styles for compatibility in applications such as email editing. - **File management** - [CKBox](latest/features/file-management/ckbox.md): Learn all about using the CKBox asset manager and service with CKEditor 5. - [Uploadcare](latest/features/file-management/uploadcare.md): Learn all about using the Uploadcare image uploader and editor with CKEditor 5. - [CKFinder](latest/features/file-management/ckfinder.md): Learn all about using the CKFinder file manager and service with CKEditor 5. - [Find and replace](latest/features/find-and-replace.md): Quickly find and replace text in CKEditor 5 with a powerful, user-friendly interface to streamline content editing and corrections. - [Font family, size, and color](latest/features/font.md): Customize text appearance in CKEditor 5 with font family, size, and color options to enhance content style and readability. - [Footnotes](latest/features/footnotes.md): Add footnotes to your content with CKEditor 5 footnotes feature for enhanced document structure and referencing. - [Format painter](latest/features/format-painter.md): Use the Format Painter in CKEditor 5 to copy and easily apply text formatting, ensuring consistent styling across your content. - [Fullscreen mode](latest/features/fullscreen.md): The fullscreen mode lets you expand the editor to the whole browser viewport to comfortably edit content and use editor's UI features. - [Headings](latest/features/headings.md): Structure your content with customizable headings in CKEditor 5 to improve readability, organization, and accessibility. - [Highlight](latest/features/highlight.md): Highlight text in CKEditor 5 with customizable colors to emphasize important content and improve document clarity. - [Horizontal line](latest/features/horizontal-line.md): Insert horizontal lines in CKEditor 5 to visually separate content, improve document structure, and enhance readability. - **HTML advanced support** - [General HTML Support](latest/features/html/general-html-support.md): Enable General HTML Support in CKEditor 5 to freely use custom HTML elements and attributes for advanced content editing and flexibility. - [HTML comment element](latest/features/html/html-comments.md): Add and manage HTML comments in CKEditor 5 to include non-visible notes or instructions within your content for developers or editors. - [HTML embed](latest/features/html/html-embed.md): Embed custom HTML in CKEditor 5 to insert interactive or third-party content, enhancing flexibility and functionality in your documents. - [Full page HTML](latest/features/html/full-page-html.md): Edit full-page HTML documents in CKEditor 5, including HTML, head, and body tags, for complete control over the page structure. - **Images** - [Basics](latest/features/images/images-overview.md): Find out all about images in CKEditor 5 - available image features, attributes, or the image toolbar. - [Installation](latest/features/images/images-installation.md): Learn how to install and configure various image-related CKEdiotr 5 plugins. - [Text alternative](latest/features/images/images-text-alternative.md): Learn about setting and managing the alt tag on images in CKEditor 5. - [Image captions](latest/features/images/images-captions.md): Learn how to utilize image captions to enhance your rich content. - [Image optimizer](latest/features/images/images-image-optimizer.md): Learn all about image editing capabilities with CKBox and Uploadcare in CKEdiotr 5. - [Resizing images](latest/features/images/images-resizing.md): All about various ways of resizing images to fit the content better. - [Responsive images](latest/features/images/images-responsive.md): Learn how responsive images can make your content better. - [Image styles](latest/features/images/images-styles.md): Learn all about styling your images. - [Linking images](latest/features/images/images-linking.md): Learn how to use your images as link anchors. - [Inserting images via URL](latest/features/images/images-inserting.md): Learn how to insert your images into the content. - **Image upload** - [Overview](latest/features/images/image-upload/image-upload.md): Easily upload and manage images in CKEditor 5. Learn about available solutions, configuration options, and customizing image upload. - [Using file managers](latest/features/images/image-upload/using-file-managers.md) - [Custom upload adapter](latest/features/images/image-upload/custom-upload-adapter.md): Learn how to create your own image upload adapter for CKEditor 5 to better suit your specific needs. - [Base64 upload adapter](latest/features/images/image-upload/base64-upload-adapter.md): Upload images as Base64 in CKEditor 5 to embed them directly in the content, omitting a server or external storage. - [Simple upload adapter](latest/features/images/image-upload/simple-upload-adapter.md): Upload images to your server in CKEditor 5 using the Simple Upload Adapter for easy, direct image handling with minimal configuration. - [Line height](latest/features/line-height.md): Adjust line spacing in your CKEditor 5 content with the line height feature for better text readability and formatting. - [Link](latest/features/link.md): Add, edit, and customize links in CKEditor 5 to easily connect your content to external URLs, email addresses, or internal resources. - **Lists** - [Ordered and unordered lists](latest/features/lists/lists.md): Create and manage ordered and unordered lists in CKEditor 5 to organize content clearly and improve readability. - [To-do lists](latest/features/lists/todo-lists.md): Add interactive to-do lists in CKEditor 5 to track tasks and boost productivity with checkable list items directly in your content. - [Multi-level lists](latest/features/lists/multi-level-lists.md): Multi-level lists allow the user to set different markers (symbols, text or numbers) to display at each level of the list. - [List properties](latest/features/lists/lists-properties.md): Change the various properties of the ordered and unordered lists in CKEditor 5, such as marker styles, ordering and starting number. - [Lists editing behavior](latest/features/lists/lists-editing.md): Easily edit and customize lists in CKEditor 5 with intuitive tools for nesting, reordering, and formatting list items. - [Markdown output](latest/features/markdown.md): The Markdown plugin lets you switch the default CKEditor 5 output from HTML to Markdown. - [Math and chemical formulas](latest/features/math-equations.md): Add math equations and chemical formulas to CKEditor 5 using MathType. Learn how to enable, configure, and customize math formula support. - **Media embed** - [Basics](latest/features/media-embed/media-embed.md): Embed rich media content like videos and social media posts in CKEditor 5 to enhance engagement and interactivity in your documents. - [Configuration](latest/features/media-embed/media-embed-configuration.md): Configure the media embed data output format and extend, remove, or override the default media providers. - [External services](latest/features/media-embed/media-embed-external-preview.md): Use Iframely or Embedly to show media previews inside CKEditor 5 and to render media from the editor's output on your target website. - [Resizing media embeds](latest/features/media-embed/media-embed-resize.md): Resize embedded videos and other media content using drag handles, a toolbar dropdown, or standalone buttons in CKEditor 5. - [Media embed styles](latest/features/media-embed/media-embed-styles.md): Apply alignment and other configurable styles to media embeds, with support for custom styles. - [Styling non-previewable media](latest/features/media-embed/styling-non-previewable-media.md): Create dedicated styles for non-previewable media providers (e.g. Facebook, Instagram) to help users identify them in the editor content. - [Mentions](latest/features/mentions.md): Use the mentions feature in CKEditor 5 to tag users or items with @, enabling collaboration and dynamic content referencing. - [Merge fields](latest/features/merge-fields.md): Insert dynamic merge fields in CKEditor 5 to personalize documents with placeholders for names, dates, and other custom data. - [Mermaid flowcharts and diagrams](latest/features/mermaid.md): Create diagrams and visualizations in CKEditor 5 using Mermaid. Learn how to enable, configure, and render flowcharts, graphs, and more. - [Page break](latest/features/page-break.md): Insert page breaks in CKEditor 5 to control content flow and ensure proper pagination in printed or exported documents. - **Pagination** - [Overview](latest/features/pagination/pagination.md): Enable pagination in CKEditor 5 to view and edit content in page-like sections, ideal for print layouts and structured documents. - [Integration with Export to PDF/Word](latest/features/pagination/pagination-integration.md): Integrate pagination in CKEditor 5 with your app to manage content by pages, ensuring precise control over layout and print formatting. - **Pasting** - [Paste from Office](latest/features/pasting/paste-from-office.md): CKEditor 5 lets you handle content that you paste from Word and paste from Excel. - [Enhanced paste from Office](latest/features/pasting/paste-from-office-enhanced.md): CKEditor 5 lets you handle content that you paste from Word and paste from Excel while retaining as much of the original Office formatting as possible. - [Paste from Google Docs](latest/features/pasting/paste-from-google-docs.md): CKEditor 5 lets you handle content that you paste from Google Docs. - [Paste plain text](latest/features/pasting/paste-plain-text.md): Force plain text pasting in CKEditor 5 to remove formatting from copied content, ensuring clean and consistent text input. - [Paste Markdown](latest/features/pasting/paste-markdown.md): The paste Markdown feature lets users paste Markdown-formatted content straight into CKEditor 5. - [Read-only support](latest/features/read-only.md) - [Remove formatting](latest/features/remove-format.md): Use the Remove Format feature in CKEditor 5 to clear text styling and return content to its default, unformatted state. - [Restricted editing](latest/features/restricted-editing.md): Enable restricted editing in CKEditor 5 to limit content changes to specific regions, ensuring control and document integrity. - [Select all](latest/features/select-all.md): Use the Select All feature in CKEditor 5 to quickly manage the entire content of your document with a single action. - [Show blocks](latest/features/show-blocks.md): Display block-level elements in CKEditor 5 using the Show Blocks feature to visualize document structure during editing. - [Slash commands](latest/features/slash-commands.md): Use slash commands in CKEditor 5 to quickly insert elements and trigger actions, enhancing productivity with a streamlined editing experience. - **Source code editing** - [Source code editing](latest/features/source-editing/source-editing.md): Edit HTML source code directly in CKEditor 5 with the Source Editing feature for greater control and customization of your content. - [Enhanced source code editing](latest/features/source-editing/source-editing-enhanced.md): Use Enhanced Source Editing in CKEditor 5 for a better HTML editing experience with syntax highlighting, validation, and improved usability. - [Special characters](latest/features/special-characters.md): Easily insert special characters in CKEditor 5 to add symbols, accented letters, and other non-standard characters to your content. - [Spell and grammar checker](latest/features/spelling-and-grammar-checking.md): Enable spelling and grammar checking in CKEditor 5 with WProofreader. Learn how to configure, customize, and enhance writing quality. - [Styles](latest/features/style.md): Apply predefined styles to content in CKEditor 5 using the Style feature to ensure consistent formatting and visual design. - [Table of contents](latest/features/table-of-contents.md): Generate a table of contents in CKEditor 5 to improve navigation and give readers a clear overview of your document's structure. - **Tables** - [Basics](latest/features/tables/tables.md): Create and customize tables in CKEditor 5 to organize data effectively with support for merging cells, headers, and responsive layouts. - [Installation](latest/features/tables/tables-installation.md): Create and customize tables in CKEditor 5 to organize data effectively with support for merging cells, headers, and responsive layouts. - [Styling tables](latest/features/tables/tables-styling.md): Style tables in CKEditor 5 with custom classes, alignment, and formatting options to match your document’s design and improve readability. - [Table column resizing](latest/features/tables/tables-resize.md): Resize table columns and rows in CKEditor 5 to adjust the layout and improve data presentation with flexible, user-friendly controls. - [Table scrolling](latest/features/tables/tables-scroll.md): Let tables that are wider than the editor scroll horizontally instead of squeezing their columns or breaking the page layout. - [Table caption](latest/features/tables/tables-caption.md): Add captions to tables in CKEditor 5 to provide context or descriptions, enhancing accessibility and content clarity. - [Layout tables](latest/features/tables/layout-tables.md): Add support for different table types to distinguish between content tables and layout tables and allow to create table-based layouts. - [Templates](latest/features/template.md) - [Text alignment](latest/features/text-alignment.md): Align text in CKEditor 5 with left, right, center, or justified options to control layout and enhance content presentation. - [Text part language](latest/features/language.md): Set the language of content in CKEditor 5 to improve accessibility, support screen readers, and optimize language-specific features. - [Undo/Redo](latest/features/undo-redo.md): Use the Undo and Redo features in CKEditor 5 to revert or reapply changes, enhancing editing control and flexibility. - [Watchdog](latest/features/watchdog.md): Use the Watchdog feature in CKEditor 5 to automatically detect and recover from editor crashes, ensuring a stable editing experience. - [Word and character count](latest/features/word-count.md): Track word and character count in CKEditor 5 with the Word Count feature to monitor content length and meet writing requirements. ## Examples - [Overview](latest/examples/index.md): Navigate through CKEditor 5 examples to see what you can create using this rich text editing framework. - **Editor types** - [Classic editor](latest/examples/builds/classic-editor.md): Explore the classic editor setup, featuring a fixed toolbar and a boxed editing area, ideal for traditional content creation. - [Inline editor](latest/examples/builds/inline-editor.md): Learn how to implement an inline editor with a floating toolbar for direct content editing in its target location. - [Balloon editor](latest/examples/builds/balloon-editor.md): Explore the balloon editor implementation with a floating toolbar for seamless inline content editing. - [Balloon block editor](latest/examples/builds/balloon-block-editor.md): Learn how to implement a balloon block editor with inline and block toolbars for enhanced content editing. - [Document editor](latest/examples/builds/document-editor.md): Explore the document editor preset for rich text editing with features similar to native word processors. - [Multi-root editor](latest/examples/builds/multi-root-editor.md): Explore the multi-root editor implementation with multiple editable areas sharing a single editor instance and toolbar. - **Presets** - [Feature-rich editor](latest/examples/builds-custom/full-featured-editor.md) - [Collaborative document editor](latest/examples/builds-custom/collaborative-document-editor.md): Experience the collaborative document editor in CKEditor 5, enabling real-time co-editing with comments, track changes, and advanced collaboration tools. - **Advanced configurations** - [Bottom toolbar with button grouping](latest/examples/framework/bottom-toolbar-editor.md): Learn how to implement a custom editor with a bottom toolbar and button grouping for improved user experience. - [Chat with mentions](latest/examples/framework/chat-with-mentions.md): Build a chat interface with user tagging in CKEditor 5 to create interactive messaging experiences using the "mentions" feature. - [Theme customization](latest/examples/framework/theme-customization.md): Customize the CKEditor 5 theme to match your app's look and feel by modifying styles, icons, and UI components. - [Custom UI (with Bootstrap)](latest/examples/framework/custom-ui.md): Create custom UI elements in CKEditor 5 to extend the editor interface with tailored buttons, panels, and interactions. ## Framework - [Overview](latest/framework/index.md): Learn how to install, integrate, configure, and develop CKEditor 5 Framework. Browse through the API documentation and online samples. - **Tutorials** - [Overview](latest/framework/tutorials/overview.md): Install and configure your copy of CKEditor 5, deep-dive into the ecosystem’s internal works, create new features, and tailor the system to your needs! - **Crash course** - [Editor and configuration](latest/framework/tutorials/crash-course/editor.md): Learn how to use CKEditor 5 APIs to create a custom editor plugin. - [Plugins](latest/framework/tutorials/crash-course/plugins.md): Create custom plugins in CKEditor 5 with this crash course, covering the basics of extending editor functionality step by step. - [Model and schema](latest/framework/tutorials/crash-course/model-and-schema.md): Understand the model and schema in CKEditor 5 to structure and validate content effectively while building custom features. - [Data conversion](latest/framework/tutorials/crash-course/data-conversion.md): Learn how data conversion works in CKEditor 5 to seamlessly transform content between the model, view, and HTML during editing and output. - [Commands](latest/framework/tutorials/crash-course/commands.md): Discover how to create and use commands in CKEditor 5 to define editor actions and enable custom functionality in your plugins. - [Editor UI](latest/framework/tutorials/crash-course/view.md): Explore the view layer in CKEditor 5 to manage how content is presented and interacted with in the editor UI. - [Events and observables](latest/framework/tutorials/crash-course/events-and-observables.md): Learn to use events and observables in CKEditor 5 to handle user interactions and build responsive, interactive editor features. - [Handling keystrokes](latest/framework/tutorials/crash-course/keystrokes.md): Customize keyboard behavior in CKEditor 5 with the keystrokes API to enhance user interaction and streamline editing workflows. - [Plugin configuration](latest/framework/tutorials/crash-course/plugin-configuration.md): Configure plugins in CKEditor 5 to customize their behavior and integrate flexible options into your editor setup. - [Creating a basic plugin](latest/framework/tutorials/creating-simple-plugin-timestamp.md): Learn how to create a simple timestamp plugin in CKEditor 5 to insert the current date and time into your content with a custom toolbar button. - **Creating an advanced plugin** - [Defining a model and a view](latest/framework/tutorials/abbreviation-plugin/abbreviation-plugin-level-1.md): Build a basic abbreviation plugin in CKEditor 5 to insert and manage abbreviations with accessible tooltips in your content, part 1. - [Getting user input with a custom UI](latest/framework/tutorials/abbreviation-plugin/abbreviation-plugin-level-2.md): Build a basic abbreviation plugin in CKEditor 5 to insert and manage abbreviations with accessible tooltips in your content, part 2. - [Improving accessibility and adding a command](latest/framework/tutorials/abbreviation-plugin/abbreviation-plugin-level-3.md): Build a basic abbreviation plugin in CKEditor 5 to insert and manage abbreviations with accessible tooltips in your content, part 3. - **Using widgets** - [Implementing a block widget](latest/framework/tutorials/widgets/implementing-a-block-widget.md): Learn how to implement a custom block widget in CKEditor 5, covering schema definition, editing view, conversion, and UI integration. - [Implementing an inline widget](latest/framework/tutorials/widgets/implementing-an-inline-widget.md): Discover how to create a custom inline widget in CKEditor 5 with steps on schema, view integration, conversion, and user interaction. - [Using a React component in a widget](latest/framework/tutorials/widgets/using-react-in-a-widget.md): Learn how to integrate a React component into a CKEditor 5 widget, including setup, rendering, and data binding techniques. - [Data from an external source](latest/framework/tutorials/widgets/data-from-external-source.md): Learn how to load and display data from an external source in a CKEditor 5 widget, with steps on integration, updates, and conversion. - **Development tools** - [Inspector](latest/framework/development-tools/inspector.md) - [Testing helpers](latest/framework/development-tools/testing-helpers.md): Discover CKEditor 5 testing helpers to simplify writing, managing, and running unit tests for editor features and plugins. - [Mr. Git](latest/framework/development-tools/mrgit.md): Learn how to use Mr. Git, a tool for managing multiple CKEditor 5 repositories, streamlining cloning, updating, and linking packages. - **Package Generator** - [Using package generator](latest/framework/development-tools/package-generator/using-package-generator.md): Learn how to scaffold a Vite-based CKEditor 5 package, answer the generator prompts, and start building your plugin. - [Build output and integration](latest/framework/development-tools/package-generator/build-output-and-integration.md): See what the CKEditor 5 package generator writes to dist and how to use it with npm, ZIP, and CDN setups. - **Architecture** - [Introduction](latest/framework/architecture/intro.md) - [Plugins in CKEditor 5](latest/framework/architecture/plugins.md) - [Core editor architecture](latest/framework/architecture/core-editor-architecture.md): Understand the core editor architecture of CKEditor 5, including its modular design, editing layers, and plugin-based extensibility. - [Editing engine](latest/framework/architecture/editing-engine.md) - [UI library](latest/framework/architecture/ui-library.md) - [UI components](latest/framework/architecture/ui-components.md) - **Deep dive** - [Clipboard](latest/framework/deep-dive/clipboard.md): Explore how the CKEditor 5 clipboard pipeline works, including input/output processing, integration, and customization techniques. - [Custom upload adapter](latest/framework/deep-dive/upload-adapter.md): Understand CKEditor 5 upload adapters, their role in handling file uploads, and how to create and integrate custom adapters. - [Event system](latest/framework/deep-dive/event-system.md): Explore the CKEditor 5 event system, including event types, bubbling, delegation, and how to create and handle custom events. - [Observables](latest/framework/deep-dive/observables.md): Discover how to work with observable objects in CKEditor 5. Understand reactive properties and event binding. Implement observable patterns in your code. - [Schema](latest/framework/deep-dive/schema.md): Explore the CKEditor 5 schema system, defining document structure, rules, and how to extend and customize content models. - **Conversion** - [Introduction](latest/framework/deep-dive/conversion/intro.md): Discover CKEditor 5’s conversion system, transforming model data to view and vice versa, including concepts and customization techniques. - [Model to view (downcast)](latest/framework/deep-dive/conversion/downcast.md): Understand downcasting in CKEditor 5. It converts model data into view elements for proper content rendering and editing experience. - [View to model (upcast)](latest/framework/deep-dive/conversion/upcast.md): Learn about upcasting in CKEditor 5. It converts view elements into model data for accurate content representation and editing. - **Conversion helpers** - [Introduction](latest/framework/deep-dive/conversion/helpers/intro.md): Explore CKEditor 5 conversion helpers that simplify writing upcast and downcast converters for efficient model-view synchronization. - [Downcast helpers](latest/framework/deep-dive/conversion/helpers/downcast.md): Learn how to use CKEditor 5 downcast helpers to streamline converting model elements into view elements efficiently. - [Upcast helpers](latest/framework/deep-dive/conversion/helpers/upcast.md): Discover CKEditor 5 upcast helpers to simplify converting view elements into model elements during content loading and editing. - [Attributes and inline formatting](latest/framework/deep-dive/conversion/attributes.md): Learn how CKEditor 5 represents inline formatting with model text attributes and how they are rendered in the view. - **User interface** - [Focus tracking](latest/framework/deep-dive/ui/focus-tracking.md): Learn how CKEditor 5 tracks UI focus, managing focus state across components for better user interaction and accessibility. - [Widget internals](latest/framework/deep-dive/ui/widget-internals.md): Explore CKEditor 5 widget internals, including structure, behaviors, and how to create interactive, editable UI components. - [Theme customization](latest/framework/deep-dive/ui/theme-customization.md): Learn how to customize CKEditor 5 themes, including styling components and applying custom CSS for a unique editor look. - [Third-party UI](latest/framework/deep-dive/ui/external-ui.md): Discover how to create and integrate external UI components with CKEditor 5 for seamless editor extension and customization. - [Document editor](latest/framework/deep-dive/ui/document-editor.md): Explore CKEditor 5 Document Editor UI, its architecture, features, and how to customize the editing interface for complex documents. - [Creating custom editor](latest/framework/deep-dive/ui/custom-editor-creator.md) - [Localization](latest/framework/deep-dive/ui/localization.md): Learn how CKEditor 5 handles localization, including translating UI strings and managing multiple languages in the editor. - [How-tos](latest/framework/how-tos.md): Find out how to configure a specific setting of CKEditor 5. - **Contributing** - [Contributing](latest/framework/contributing/contributing.md): Discover how to contribute to CKEditor 5, including guidelines for reporting issues, submitting code, and joining the community. - [Development environment](latest/framework/contributing/development-environment.md): Learn how to set up a development environment for CKEditor 5, including cloning, building, and running the editor locally. - [Testing environment](latest/framework/contributing/testing-environment.md): Test CKEditor 5 using the official testing environment. Run unit and manual tests effectively. - [Code style](latest/framework/contributing/code-style.md): Learn about CKEditor 5's code style guidelines to ensure consistency and quality when contributing to the project. - [Package metadata](latest/framework/contributing/package-metadata.md): Understand CKEditor 5 package metadata, including configuration, dependencies, and guidelines for maintaining consistent package information. - [Changelog entries](latest/framework/contributing/changelog-entries.md): Learn how to write structured, user-facing changelog entries for CKEditor 5 using a Markdown-based system designed for clarity, versioning, and long-term maintainability. ## Updating - [Overview](latest/updating/index.md): Learn how to maintain and keep your CKEditor 5 up-to-date at all times. - **Migrations from npm to CDN** - [Vanilla JS](latest/updating/migrations/vanilla-js.md): Migrate CKEditor 5 from npm to CDN in a few simple steps. Learn how to install CKEditor 5 in your project using the CDN. - [Vanilla JS testing suite](latest/updating/migrations/testing-suite.md): Migrate CKEditor 5 testing suite from npm to CDN in a few simple steps. Learn how to install the testing suite in your project using the CDN. - [React](latest/updating/migrations/react.md): Migrate React CKEditor 5 integration from npm to CDN in a few simple steps. Learn how to install the integration in your project using the CDN. - [Vue.js 3+](latest/updating/migrations/vuejs-v3.md): Migrate Vue 3+ CKEditor 5 integration from npm to CDN in a few simple steps. Learn how to install the integration in your project using the CDN. - [Angular](latest/updating/migrations/angular.md): Migrate Angular CKEditor 5 integration from npm to CDN in a few simple steps. Learn how to install the integration in your project using the CDN. - **New installation methods** - [Migrating to new installation methods](latest/updating/nim-migration/migration-to-new-installation-methods.md): Learn how to upgrade your CKEditor5 project to the new installation methods. - [Migrating from predefined builds](latest/updating/nim-migration/predefined-builds.md): Learn how to upgrade from predefined builds to the new installation methods. - [Migrating from legacy Online Builder](latest/updating/nim-migration/online-builder.md): Learn how to upgrade build from the legacy Online Builder to new installation methods. - [Migrating from customized builds](latest/updating/nim-migration/customized-builds.md): Learn how to upgrade from customized builds to the new installation methods. - [Migrating from DLL builds](latest/updating/nim-migration/dll-builds.md): Learn how to upgrade from DLL builds to the new installation methods. - [Migrating custom plugins](latest/updating/nim-migration/custom-plugins.md): Learn how to upgrade custom plugins to the new installation methods. - [Migrating imports](latest/updating/nim-migration/migrating-imports.md): Migrate CKEditor 5 to new, clearer, standardized public API names. - **CKEditor 4 migration** - [Migration from CKEditor 4](latest/updating/ckeditor4/migration-from-ckeditor-4.md): Learn how the migrate from CKEditor 4 to the latest CKEditor 5 version without problems. - [Plugin equivalents](latest/updating/ckeditor4/ckeditor4-plugin-compatibility.md): This guide presents plugins available in CKEditor 4 and their equivalent in CKEditor 5. - [Configuration options compatibility](latest/updating/ckeditor4/ckeditor4-configuration-compatibility.md): Learn about the CKEditor 4 configuration options and their equivalent in CKEditor 5. - [Troubleshooting](latest/updating/ckeditor4/ckeditor4-troubleshooting.md): Overcoming possible obstacles during your migration to CKEditor 5. - [Maintaining your editor](latest/updating/maintaining.md): Learn how to maintain and keep your CKEditor 5 up-to-date at all times. - [Versioning policy](latest/updating/versioning-policy.md): How CKEditor 5 is versioned and released - aligned versions across packages, release channels (stable, nightly, alpha/RC), and guidance on staying up to date. - [Technology upgrades policy](latest/updating/technology-upgrades-policy.md): How and when CKEditor 5 is upgrading the core technologies that it is built upon. - **Update guides** - [Updating CKEditor 5](latest/updating/guides/updating-ckeditor-5.md): Learn how to maintain and keep your CKEditor 5 up-to-date at all times. - [Changelog](latest/updating/guides/changelog.md) - [Update to v48.x](latest/updating/guides/update-to-48.md) - [Update to v47.x](latest/updating/guides/update-to-47.md) - [Update to v46.x](latest/updating/guides/update-to-46.md) - [Update to v45.x](latest/updating/guides/update-to-45.md): Follow the guide to update CKEditor 5 to version 45.x, including key changes, migration tips, and compatibility considerations. - [Update to v44.x](latest/updating/guides/update-to-44.md): Follow the guide to update CKEditor 5 to version 44.x, including key changes, migration tips, and compatibility considerations. - [Update to v43.x](latest/updating/guides/update-to-43.md): Follow the guide to update CKEditor 5 to version 43.x, including key changes, migration tips, and compatibility considerations. - [Update to v42.x](latest/updating/guides/update-to-42.md): Follow the guide to update CKEditor 5 to version 42.x, including key changes, migration tips, and compatibility considerations. - [Updating from older versions](latest/updating/guides/updating-from-older-versions.md): Follow the guide to update CKEditor 5 from older versions. ## Support - [Support](latest/support/index.md): Learn how to get help and support for CKEditor 5 and how to provide feedback. ## Other pages - [CKEditor 5 documentation](latest/index.md): Learn how to install, integrate, update, configure, and develop CKEditor 5. Browse through the API documentation and online samples. - [bootstrap-ui](latest/snippets/examples/bootstrap-ui.md) - [Error codes](latest/support/error-codes.md): Explore CKEditor 5 error codes to identify, understand, and troubleshoot issues during development and integration.