CKEditor 5 Documentation

repository·master·Indexed 27 days ago

https://github.com/ckeditor/ckeditor5

A modern JavaScript rich-text editor built with an MVC architecture, custom data model, and virtual DOM. It features official integrations for Angular, React, and Vue, and supports TypeScript. Key capabilities include real-time collaboration, document conversion (PDF/Word), asset management via CKBox, and a flexible image upload system with multiple official adapters. The editor is highly extensible, allowing for custom plugin development via the CKEditor 5 Framework.

Tokens
277.9K
Snippets
653
Records
1.2K
Agent score
93%

What's inside CKEditor 5

  1. Overview of CKEditor Cloud Services

    master

    CKEditor Cloud Services is a premium cloud platform that provides backend capabilities for CKEditor 5. It powers advanced features including real-time collaboration, document conversion (exporting/importing), and asset management.

    Key capabilities include:

    • Real-time collaboration: Handles collaborative editing, comments, track changes, and revision history.
    • Document conversion: Export HTML to PDF or Word (.docx), and import Word (.docx) files to HTML.
    • Asset management: Uses CKBox for managing images and document assets.
    • Integration: Features can be used via dedicated CKEditor 5 plugins or directly through the Cloud Services REST API and webhooks.
  2. Overview of CKBox features

    master

    CKBox is a premium asset management service for CKEditor 5 that provides:

    • Effortless Uploads: Drag and drop, pasting from clipboard, Word, or Google Docs.
    • Image Editing: Built-in tools for cropping, resizing, rotating, and flipping.
    • Management UI: A dedicated toolbar button to open the file manager for reusing assets.
    • Asset Separation: Support for multi-tenant workspaces.
    • Responsive Images: Optimized delivery via CDN for better SEO and performance.
    • Hosting Options: Available as a SaaS (Cloud) or as an On-premises (Self-Hosted) solution via Docker/Kubernetes.
  3. Overview of CKEditor 5 Image Features

    master

    The @ckeditor/ckeditor5-image package provides a modular ecosystem for image handling. The core Image plugin provides basic support for block and inline images, which can be extended with the following features:

    • Captions: Add descriptive text under images.
    • Styles: Control placement, size, and characteristics via predefined styles.
    • Text Alternative: Improve accessibility and SEO with alt tags.
    • Resizing: Control image dimensions directly in the content.
    • Linking: Use images as URL anchors.
    • Upload Methods: Support for URL pasting and custom upload integrations.
    • Responsive Images: Integration with CKBox and Uploadcare for viewport-aware images.
    • Image Optimization: Advanced editing (cropping, rotating, flipping) via CKBox or Uploadcare.
  4. Overview of the Server-side Editor API

    master
    The Server-side Editor API allows you to integrate your application deeply with document data by manipulating content and managing collaborative data (such as suggestions, comments, and revision history) directly from your server-side code. It enables you to execute JavaScript code that uses the CKEditor 5 API on the Cloud Services server instead of requiring a client-side editor instance to be opened by a user.
  5. Overview of Media embed features

    master

    The @ckeditor/ckeditor5-media-embed package provides several specialized plugins to extend media functionality:

    • Configuration: Set data output formats and manage media providers.
    • External services: Use Iframely or Embedly to render rich previews inside the editor and on your target website.
    • Resizing media embeds: Enable drag handles, toolbar dropdowns, or predefined size buttons (Premium).
    • Media embed styles: Apply alignment and other styles to the media <figure> element.
    • Styling non-previewable media: Create dedicated styles for specific media providers that do not support native previews.
  6. Understand CKEditor 5 plugin dependencies

    master

    CKEditor 5 functionality is provided by plugins. The editor acts as a shell that requires plugins to perform tasks like typing, undoing, or rendering HTML tags.

    Some plugins act as wrappers for multiple smaller plugins. For example, the Essentials plugin provides several core functionalities including:

    • Clipboard
    • Enter
    • SelectAll
    • ShiftEnter
    • Typing
    • Undo

    Note that plugins often have dependencies on other plugins. If a required plugin is missing, the editor will throw an error explaining which dependency is missing.

  7. Use tables in CKEditor 5

    master

    CKEditor 5 provides tools for creating and editing tables to organize data or create document layouts. There are two main types of tables:

    1. Content tables: Used for presenting tabular data.
    2. Layout tables: Used to organize content structure (switchable from content tables).

    Key Capabilities:

    • Insertion: Use the 'Insert table' button to add a new table.
    • Editing: Add or remove rows and columns, and merge or split cells using the contextual toolbar.
    • Properties: Customize the entire table or individual cells (e.g., captions, alignment, and cell properties).
    • Resizing: Click and drag the edge of a column to control its width.
    • Nesting: You can nest tables inside the cells of other tables for advanced layouts.
  8. Choose between Open Source and Commercial licenses

    master

    CKEditor 5 is dual-licensed. You can choose between an open-source license (GPL 2+) or a commercial license depending on your project requirements.

    Open Source License (GPL 2+)

    Use this if you are running an open-source project. Note that if your project uses an OSS license incompatible with GPL, you should contact CKEditor to discuss alternative open-source licensing options.

    Certain features are available for GPL-compliant projects, but their availability depends on the specific commercial licensing plans. Examples of features include:

    • Page break
    • Remove format
    • Special characters
    • Layout tables
    • Column resize
    • Image Resize
    • Simple Upload Adapter
    • Base64 adapter
    • HTML embed
    • Restricted editing
    • Paste From Office
    • Word count
    • Find and replace
    • Bookmarks
    • Full page HTML
    • Table and cell properties
    • List properties
    • Multi-root editor
  9. CKEditor 5 Productivity and Interoperability

    master

    Additional tools to improve workflow and compatibility:

    • AI Assistant: Helps rewrite, edit, translate, or generate new content.
    • Word and Character Counter: Tracks content volume.
    • Text Transformation & Spell Checker: Includes autocorrect (automatic text transformations) and spell/grammar checking.
    • Autosave Plugin: Protects work by automatically saving progress.
    • Fullscreen Mode: Provides a larger viewport for editing.
    • Cross-platform Paste: Supports pasting content from Microsoft Office and Google Docs while preserving formatting, as well as pasting plain text or Markdown-formatted content.
  10. CKEditor 5 Collaboration Features

    master

    CKEditor 5 includes a suite of tools for team-based editing:

    • Users API: Manages user data and permissions across collaboration features.
    • Track Changes: Allows users to follow, accept, or reject changes made to a document asynchronously or in real time.
    • Comments: Provides a platform for team communication within the document; resolved discussions move to an archive.
    • Restricted Editing Mode: Limits editing permissions to specific parts of the content.
    • Read-only & Comments-only Modes: Allows users to view content or only participate in discussions without editing the document.
    • Revision History: Enables document versioning, allowing users to create named versions, compare changes, and restore previous versions.
  11. Related productivity features for Mentions

    master

    When using the Mentions feature, you might also consider these related CKEditor 5 features:

    • Automatic text transformation: Automatically converts snippets like (tm) to .
    • Autolink: Converts typed or pasted links and email addresses into active URLs.
    • Autoformatting: Allows quick application of formatting while typing.
    • Emoji: Enables quick insertion of emojis.
  12. Determine when to use the CKEditor 5 Framework

    master

    CKEditor 5 offers both ready-to-use editor presets and a full framework. You should use the framework instead of the CKEditor 5 Builder or standard presets when you need to:

    • Write your own features: Implementing entirely new functionality requires the framework.
    • Customize existing features: Changing the behavior or visual appearance of existing features.
    • Create new types of editors: Building editor types that are not covered by existing presets.