{"id":10632,"library":"ckeditor5","title":"CKEditor 5 Rich Text Editor","description":"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.","status":"active","version":"48.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/ckeditor/ckeditor5","tags":["javascript","ckeditor","ckeditor5","ckeditor 5","wysiwyg","rich text","editor","html","contentEditable","typescript"],"install":[{"cmd":"npm install ckeditor5","lang":"bash","label":"npm"},{"cmd":"yarn add ckeditor5","lang":"bash","label":"yarn"},{"cmd":"pnpm add ckeditor5","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"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.","wrong":"const ClassicEditor = require('ckeditor5');","symbol":"ClassicEditor","correct":"import ClassicEditor from '@ckeditor/ckeditor5-build-classic';"},{"note":"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`.","wrong":"import { Paragraph } from 'ckeditor5';","symbol":"Paragraph","correct":"import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';"},{"note":"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.","wrong":"import { EditorConfig } from 'ckeditor5';","symbol":"EditorConfig","correct":"import type { EditorConfig } from '@ckeditor/ckeditor5-core';"}],"quickstart":{"code":"import ClassicEditor from '@ckeditor/ckeditor5-build-classic';\nimport type { EditorConfig } from '@ckeditor/ckeditor5-core';\n\n// This is a minimal example. In a real application, you might use a framework component.\n// Ensure a div with id=\"editor\" exists in your HTML.\n\n// Example CKEditor 5 configuration\nconst editorConfiguration: EditorConfig = {\n    toolbar: [ 'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote', '|', 'undo', 'redo' ],\n    language: 'en',\n    // Example of a potentially sensitive configuration, though basic editor doesn't need it.\n    // For LTS versions or specific features (like AI), a license key might be required.\n    // process.env.CKEDITOR_LICENSE_KEY is illustrative.\n    licenseKey: process.env.CKEDITOR_LICENSE_KEY ?? '' // Example: For LTS or specific premium features\n};\n\ndocument.addEventListener('DOMContentLoaded', () => {\n    const editorElement = document.querySelector('#editor');\n\n    if (editorElement) {\n        ClassicEditor\n            .create( editorElement, editorConfiguration )\n            .then( editor => {\n                console.log( 'Editor was initialized', editor );\n                // Access editor data: editor.getData();\n            })\n            .catch( error => {\n                console.error( 'There was a problem initializing the editor.', error );\n            });\n    } else {\n        console.error('Editor target element #editor not found.');\n    }\n});","lang":"typescript","description":"Initializes a `ClassicEditor` instance on a DOM element with basic toolbar configuration, demonstrating a common setup for rich text editing."},"warnings":[{"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.","message":"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.","severity":"breaking","affected_versions":">=47.7.0"},{"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-*`).","message":"CKEditor 5 v48.0.0 completes the sunset of old installation methods, potentially breaking existing custom build workflows.","severity":"breaking","affected_versions":">=48.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.","message":"The `Export to PDF` converter API version has changed in v48.0.0.","severity":"breaking","affected_versions":">=48.0.0"},{"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.","message":"The built-in Amazon Bedrock AI integration in the legacy AI Assistant plugin was removed. The `AWSTextAdapter` class now throws an error when used.","severity":"breaking","affected_versions":">=47.6.2 <48.0.0"},{"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.","message":"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.","severity":"breaking","affected_versions":">=47.6.0 <47.6.1"},{"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.","message":"Minor breaking changes to the CSS for the CKEditor AI integration in a sidebar mode (`config.ai.container`) were introduced.","severity":"gotcha","affected_versions":">=47.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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.","cause":"Attempting to use a CKEditor 5 Long-term Support (LTS) version without a valid LTS license key or an expired key.","error":"Editor failed to load: The license key is invalid or does not grant access to the requested product edition."},{"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.","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.","error":"AWSTextAdapter cannot be used as the Amazon Bedrock integration has been removed."},{"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`.","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.","error":"TypeError: ClassicEditor is not a constructor (or) Module not found: Can't resolve '@ckeditor/ckeditor5-build-classic'"},{"fix":"Import a specific editor build, such as `ClassicEditor` from `@ckeditor/ckeditor5-build-classic`, and then call `ClassicEditor.create(...)`.","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.","error":"Uncaught TypeError: editor.create is not a function"}],"ecosystem":"npm"}