DOCSEARCHbyAlgolia
Submit Docs

CKEditor 5 Documentation

website·Indexed 19 days ago

https://ckeditor.com/docs/ckeditor5/latest/getting-started/

Comprehensive documentation for CKEditor 5, covering various editor types including classic, inline, balloon, document, and multi-root editors. Includes detailed guides on AI integration (AI Chat, AI Review, AI Translate), collaborative editing, custom UI development with Bootstrap, theme customization, and accessibility conformance with WCAG 2.x and Section 508 standards.

Tokens
550.2K
Snippets
2.2K
Records
3.6K
Agent score
98%

What's inside CKEditor 5

  1. Overview of CKBox Permissions

    CKBox uses a group-based permission system to provide fine-grained control over user access to assets, categories, and folders. Permissions determine which UI elements are visible (e.g., the upload button is hidden if the user lacks 'Create an Asset' permission) and which API actions are allowed. This is a premium feature. Admins and Superadmins have all access granted by default; permissions are only checked for regular users.

  2. Overview of the Server-side Editor API

    The Server-side Editor API allows developers to manipulate document content and manage collaborative data (suggestions, comments, revision history) directly from server-side code. It uses a remote script REST API endpoint that executes JavaScript code using the CKEditor 5 API on the Cloud Services server, removing the need for a human user to open the editor in a browser.

  3. Overview of MathType for CKEditor 5

    MathType is a premium add-on for CKEditor 5 (available via the Custom Plan) that enables the creation and editing of mathematical equations and chemical formulas. It supports standards like MathML for internal representation and PNG for display, and can handle LaTeX, Flash, SVG, and EPS formats. It includes a specialized tool called ChemType for chemical notation.

  4. Overview of CKEditor 5 Real-time Collaboration features

    CKEditor 5 provides a suite of real-time collaboration features that allow multiple users to edit content simultaneously, manage suggestions, and track document history. These features are implemented as plugins that can be added to any CKEditor 5 preset.

    Core real-time collaboration capabilities include:

    • Real-time collaborative editing: Enables simultaneous multi-user editing with automatic conflict resolution.
    • Users selection and presence list: Displays the current cursor positions (selections) of other users and provides a list of active collaborators.

    Premium collaboration plugins that integrate with real-time editing include:

    • Collaborative Comments: Allows users to add comments to specific parts of the content.
    • Collaborative Track Changes: Saves content changes as suggestions that can be accepted or rejected.
    • Revision History: Maintains and displays a chronological history of document versions.

    Custom plugins generally integrate automatically with real-time collaborative editing, though highly complex plugins may require additional integration effort.

  5. Overview of CKBox REST API capabilities

    The CKBox REST API allows developers to integrate CKBox into applications and automate workflows. It is particularly useful for migrating from other digital asset managers, performing mass uploads or modifications of assets and metadata, and interacting with assets without the UI. Key capabilities include:

    • Uploading, downloading, and managing assets and folders.
    • Creating and configuring asset categories.
    • Moving and copying assets between folders.
    • Resizing images and converting them to supported formats (webp, jpeg, png, gif, tiff).
    • Controlling image quality.
    • Fetching recently used assets for a specific user.
    • Modifying asset metadata (tags, descriptions, names, custom attributes).
    • Searching assets.

  6. Overview of CKEditor 5 image features

    CKEditor 5 provides a comprehensive image ecosystem via the @ckeditor/ckeditor5-image package. The Image plugin provides core support for block and inline images, while other plugins extend functionality including: captions, image styles (placement/size), text alternatives (alt tags), resizing, linking images to URLs, and various upload methods. Integration with CKBox or Uploadcare enables responsive images and advanced optimization (cropping, rotating, flipping).

  7. Overview of CKEditor Cloud Services

    CKEditor Cloud Services is a cloud platform providing editing and real-time collaboration services. It acts as a backend for specific rich text editing features in CKEditor 4 and CKEditor 5.

  8. Overview of CKEditor 5 Drag and Drop features

    The drag and drop feature in CKEditor 5 allows users to move text and content blocks (such as paragraphs, tables, or lists) within the editor. Users can select single or multiple blocks and reposition them before or after other blocks, including placing blocks inside other containers like tables or blockquotes. Additionally, the editor supports dragging and dropping HTML and plain text from external sources into the editor.

  9. Overview of the HTML embed feature

    The HTML embed feature allows advanced users to embed arbitrary HTML snippets directly into their content, bypassing CKEditor 5's standard filtering mechanisms. This is useful for content not supported by other features, such as:

    • Analytics code (requiring <script> tags)
    • Social page widgets
    • <iframe> embeds
    • HTML media elements like <audio> and <video>
    • External reports or charts
    • Interactive content combining HTML and scripts.

    For standard embeddable media, the Media Embed feature is recommended instead.

  10. Overview of CKEditor 5 Architecture

    CKEditor 5 is built on a highly flexible, plugin-based architecture where every feature—including basic typing and paragraph support—is implemented as a plugin. The framework is designed to be schema-less and decoupled, allowing developers to remove or replace plugins to create fully customized rich-text editing solutions. Key architectural features include:

    • Custom Data Model: A tree-structured model that supports complex editing (like nested blocks) and real-time collaboration via Operational Transformation.
    • Virtual DOM: A custom, editing-oriented virtual DOM that abstracts browser-specific contentEditable quirks.
    • TypeScript: The project is written in TypeScript, providing native type definitions for better maintainability.
    • Event-Based Extensibility: Components communicate in standardized ways, ensuring features do not have direct dependencies on one another.

  11. Overview of CKEditor 5 inspector

    The CKEditor 5 inspector is a debugging tool used to observe changes to editor internals—specifically the model, view, and commands—and the selection live in the editor. It is primarily used for developing new rich-text editor features or understanding existing ones. It is compatible with CKEditor 5 v12.0.0 and later.

  12. Overview of CKEditor 5 Image Styles

    The Image Styles feature allows developers to adjust the appearance of images in the editor by applying predefined or custom CSS classes and by toggling the image representation between inline and block types.

    Note that the actual CSS styling for the target pages is the responsibility of the integrator. While the editor provides default styles for the WYSIWYG view (found in ckeditor5-image/theme/index-content.css), these must be mirrored or overridden in the production environment's CSS.