CKEditor 5 Rich Text Editor

48.0.0 · active · verified Sun Apr 19

CKEditor 5 is a modern, highly extensible rich text editor framework designed for building custom WYSIWYG editing experiences, with a strong emphasis on real-time collaborative editing. It is not a single product but a collection of features, plugins, and builds that can be combined. The current stable major version is v48.0.0, released in April 2026. However, v47.x is designated as the Long-term Support (LTS) edition for licensed customers, receiving security and compatibility fixes, while v48.x introduces new features and significant updates. CKEditor 5 is characterized by its MVC architecture, custom data model, and support for operational transformation (OT) to power real-time collaboration. It typically follows a regular release cadence for minor and patch versions, with major versions introducing significant architectural changes or deprecations, requiring users to stay updated with release notes. Its modular design allows developers to create highly customized editor instances tailored to specific application needs, ranging from simple document editors to complex collaborative writing environments.

Common errors

```
Editor failed to load: The license key is invalid or does not grant access to the requested product edition.
```
cause Attempting to use a CKEditor 5 Long-term Support (LTS) version without a valid LTS license key or an expired key.

fix Ensure a valid CKEditor 5 LTS license key is provided in the editor configuration (`config.licenseKey`). Alternatively, if LTS is not required, use a non-LTS version of CKEditor 5.
```
AWSTextAdapter cannot be used as the Amazon Bedrock integration has been removed.
```
cause Attempting to use the `AWSTextAdapter` class from the legacy AI Assistant plugin, which had its built-in Amazon Bedrock integration removed in v47.6.2.

fix This integration is deprecated and removed. If this specific integration is critical, revert to a version prior to v47.6.2, or migrate to the current CKEditor AI solution and its recommended adapters.
```
TypeError: ClassicEditor is not a constructor (or) Module not found: Can't resolve '@ckeditor/ckeditor5-build-classic'
```
cause Incorrect import path or module resolution issues, often when mixing CommonJS `require` with ESM `import` or trying to import a build from the core `ckeditor5` package.

fix Ensure you are using `import ClassicEditor from '@ckeditor/ckeditor5-build-classic';` and that your build tools (e.g., Webpack, Vite) are configured for ESM. For custom builds, import `ClassicEditor` from `@ckeditor/ckeditor5-editor-classic`.
```
Uncaught TypeError: editor.create is not a function
```
cause Attempting to call `create` directly on the `ckeditor5` package instead of a specific editor build (e.g., `ClassicEditor`). The `ckeditor5` package is a meta-package and does not export `create` directly for instantiating editors.

fix Import a specific editor build, such as `ClassicEditor` from `@ckeditor/ckeditor5-build-classic`, and then call `ClassicEditor.create(...)`.

Warnings

breaking CKEditor 5 Long-term Support (LTS) Edition requires license verification. If your license key does not include LTS access, the editor will fail to load.
Fix: Obtain a valid CKEditor 5 LTS license key and provide it in the editor configuration (e.g., `config.licenseKey`). For non-LTS versions, ensure you are using a standard, non-LTS release.
breaking CKEditor 5 v48.0.0 completes the sunset of old installation methods, potentially breaking existing custom build workflows.
Fix: Review the official CKEditor 5 documentation for updated installation guides and migrate to modern build tooling (e.g., webpack, vite) for custom builds, or use official pre-built packages (`@ckeditor/ckeditor5-build-*`).
breaking The `Export to PDF` converter API version has changed in v48.0.0.
Fix: Update existing integrations with the `Export to PDF` feature to align with the new converter API version as specified in the v48 release notes.
breaking The built-in Amazon Bedrock AI integration in the legacy AI Assistant plugin was removed. The `AWSTextAdapter` class now throws an error when used.
Fix: If relying on this specific legacy Amazon Bedrock integration, revert to a version prior to 47.6.2 or contact CKSource support for migration options to the current CKEditor AI offering, which uses a different integration mechanism.
breaking A Cross-Site Scripting (XSS) vulnerability (CVE-2026-28343) was discovered in the General HTML Support feature, which could lead to unauthorized JavaScript execution with unsafe configurations.
Fix: Upgrade to CKEditor 5 v47.6.1 or a later patch version (e.g., v48.0.0). Additionally, always review and restrict the configuration of the General HTML Support feature to prevent the insertion of malicious or untrusted HTML.
gotcha Minor breaking changes to the CSS for the CKEditor AI integration in a sidebar mode (`config.ai.container`) were introduced.
Fix: Review and adjust any custom CSS rules that target the CKEditor AI sidebar integration to align with the updated structure described in the v47.1.0 release notes.

Install

npm install ckeditor5 npm
yarn add ckeditor5 yarn
pnpm add ckeditor5 pnpm

Imports

ClassicEditor
wrong:
```
const ClassicEditor = require('ckeditor5');
```
correct:
```
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
```
For easiest integration, use a pre-built editor like `@ckeditor/ckeditor5-build-classic`. The core `ckeditor5` package does not directly export `ClassicEditor`. For custom builds, you would import `ClassicEditor` from `@ckeditor/ckeditor5-editor-classic` and assemble plugins manually.
Paragraph
wrong:
```
import { Paragraph } from 'ckeditor5';
```
correct:
```
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
```
When creating a custom editor build, individual features and plugins are imported from their specific sub-packages, like `@ckeditor/ckeditor5-paragraph`, not directly from the meta-package `ckeditor5`.
EditorConfig
wrong:
```
import { EditorConfig } from 'ckeditor5';
```
correct:
```
import type { EditorConfig } from '@ckeditor/ckeditor5-core';
```
Core types like `EditorConfig` are generally available from the `@ckeditor/ckeditor5-core` package for type safety. It's often beneficial to use more specific editor config types, such as `ClassicEditorConfig` from `@ckeditor/ckeditor5-editor-classic`, when applicable.

Quickstart

Initializes a `ClassicEditor` instance on a DOM element with basic toolbar configuration, demonstrating a common setup for rich text editing.

import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import type { EditorConfig } from '@ckeditor/ckeditor5-core';

// This is a minimal example. In a real application, you might use a framework component.
// Ensure a div with id="editor" exists in your HTML.

// Example CKEditor 5 configuration
const editorConfiguration: EditorConfig = {
    toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', '|', 'undo', 'redo' ],
    language: 'en',
    // Example of a potentially sensitive configuration, though basic editor doesn't need it.
    // For LTS versions or specific features (like AI), a license key might be required.
    // process.env.CKEDITOR_LICENSE_KEY is illustrative.
    licenseKey: process.env.CKEDITOR_LICENSE_KEY ?? '' // Example: For LTS or specific premium features
};

document.addEventListener('DOMContentLoaded', () => {
    const editorElement = document.querySelector('#editor');

    if (editorElement) {
        ClassicEditor
            .create( editorElement, editorConfiguration )
            .then( editor => {
                console.log( 'Editor was initialized', editor );
                // Access editor data: editor.getData();
            })
            .catch( error => {
                console.error( 'There was a problem initializing the editor.', error );
            });
    } else {
        console.error('Editor target element #editor not found.');
    }
});

view raw JSON →