ckeditor5
Advanced tools
A set of ready-to-use rich text editors created with a powerful framework. Made with real-time collaborative editing in mind.
Supply Chain Security
Vulnerability
Quality
Maintenance
License
CKEditor 5 is a modern JavaScript rich text editor with a modular architecture. It offers a wide range of features and is highly customizable, making it suitable for various types of content editing needs.
Basic Text Editing
This code initializes a basic CKEditor 5 instance with classic build, allowing users to perform basic text editing tasks such as bold, italic, and underline.
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
ClassicEditor.create(document.querySelector('#editor'))
.then(editor => {
console.log('Editor was initialized', editor);
})
.catch(error => {
console.error(error);
});Custom Plugins
This code demonstrates how to initialize CKEditor 5 with custom plugins. In this example, only the Bold and Italic plugins are included, and the toolbar is customized to show only these options.
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
ClassicEditor.create(document.querySelector('#editor'), {
plugins: [Essentials, Bold, Italic],
toolbar: ['bold', 'italic']
})
.then(editor => {
console.log('Editor was initialized with custom plugins', editor);
})
.catch(error => {
console.error(error);
});Real-time Collaboration
This code initializes CKEditor 5 with real-time collaboration features, allowing multiple users to edit the same document simultaneously and see each other's changes in real-time.
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import RealTimeCollaborativeEditing from '@ckeditor/ckeditor5-real-time-collaboration/src/realtimecollaborativeediting';
import RealTimeCollaborativeComments from '@ckeditor/ckeditor5-real-time-collaboration/src/realtimecollaborativecomments';
ClassicEditor.create(document.querySelector('#editor'), {
plugins: [RealTimeCollaborativeEditing, RealTimeCollaborativeComments],
toolbar: ['comment', 'trackChanges']
})
.then(editor => {
console.log('Editor was initialized with real-time collaboration', editor);
})
.catch(error => {
console.error(error);
});TinyMCE is another popular rich text editor that offers a wide range of features and customization options. It is known for its ease of integration and extensive plugin library. Compared to CKEditor 5, TinyMCE has a more traditional architecture but offers similar functionalities.
Quill is a lightweight, open-source rich text editor with a focus on simplicity and extensibility. It provides a clean API and is highly customizable. While it may not have as many built-in features as CKEditor 5, it is a good choice for projects that require a simple and flexible editor.
Draft.js is a rich text editor framework for React, developed by Facebook. It provides a lot of flexibility and control over the editor's behavior and appearance. Unlike CKEditor 5, which is a complete solution, Draft.js is more of a toolkit for building custom editors.
CKEditor 5 is a modern JavaScript rich-text editor with MVC architecture, custom data model, and virtual DOM, written from scratch in TypeScript with excellent support for modern bundlers. It provides every type of WYSIWYG editing solution imaginable with extensive collaboration support. From editors similar to Google Docs and Medium to Slack or Twitter-like applications, all is possible within a single editing framework. As a market leader, it is constantly expanded and updated.
Refer to the Quick Start guide to learn more about CKEditor 5 installation.
The easiest way to start using CKEditor 5 with all the features you need is to prepare a customized setup with the CKEditor 5 Builder. All you need to do is choose the preferred editor type as a base, add all the required plugins, and download the ready-to-use package.
CKEditor 5 is a TypeScript project. Starting from v37.0.0, it offers native type definitions. Check out our dedicated guide to read more about TypeScript support.
For more advanced users or those who need to integrate CKEditor 5 with their applications, we prepared integrations with popular JavaScript frameworks:
CKEditor 5 is also a framework for creating custom-made rich text editing solutions.
To find out how to start building your editor from scratch go to the CKEditor 5 Framework overview section of the CKEditor 5 documentation.
Extensive documentation dedicated to all things CKEditor 5-related is available. You will find basic guides that will help you kick off your project, advanced deep-dive tutorials to tailor the editor to your specific needs, and help sections with solutions and answers to any of your possible questions. To find out more refer to the following CKEditor 5 documentation sections:
For FAQ please go to the CKEditor Ecosystem help center. For a high-level overview of the project see the CKEditor Ecosystem website.
Follow the CKEditor 5 changelog for release details and check out the CKEditor 5 release blog posts on the CKSource blog for important release highlights and additional information.
The CKEditor 5 Framework offers access to a plethora of various plugins, supporting all kinds of editing features.
From collaborative editing support providing comments and tracking changes, through editing tools that let users control the content looks and structure such as tables, lists, and font styles, to accessibility helpers and multi-language support - CKEditor 5 is easily extensible and customizable. Special duty features like Markdown input and output and source editing, or export to PDF and Word provide solutions for users with diverse and specialized needs. Images and videos are easily supported and CKEditor 5 offers various upload and storage systems to manage these.
The number of options and the ease of customization and adding new ones make the editing experience even better for any environment and professional background.
Refer to the CKEditor 5 Features documentation for details.
If you want to check full CKEditor 5 capabilities, including premium features, sign up for a free non-commitment 14-day trial.
The development repository of CKEditor 5 is located at https://github.com/ckeditor/ckeditor5. This is the best place for bringing opinions and contributions. Letting the core team know if they are going in the right or wrong direction is great feedback and will be much appreciated!
CKEditor 5 is a modular, multi-package, monorepo project. It consists of several packages that create the editing framework, based on which the feature packages are implemented.
The ckeditor5 repository is the place that centralizes the development of CKEditor 5. It bundles different packages into a single place, adding the necessary helper tools for the development workflow, like the builder and the test runner. Basic information on how to set up the development environment can be found in the documentation.
See the official contributors' guide to learn how to contribute your code to the project.
Report issues in the ckeditor5 repository. Read more in the Getting support section of the CKEditor 5 documentation.
Licensed under a dual-license model, this software is available under:
For more information, see: https://ckeditor.com/legal/ckeditor-licensing-options.
46.0.0 (July 9, 2025)
We are happy to announce the release of CKEditor 5 v46.0.0.
[!IMPORTANT]
This is a major release with significant amount of changes that may affect your CKEditor 5 integration. We strongly encourage you to read the entire update guide to understand all the changes. Pay special attention to:
- Unified exports and renames in the editor API: Many import/export names have changed
- Introduction of the default content styles: New default styling that may affect your content appearance These changes are designed to improve the long-term stability and maintainability of CKEditor 5, but they require careful attention during the upgrade process.
The new Line Height feature allows you to adjust the vertical spacing between lines of text, improving readability and visual harmony in your documents. This premium feature lets you set consistent line spacing across paragraphs and text blocks to enhance document accessibility and maintain visual hierarchy in your content.
Unneeded styles on block elements, such as tables and images, and General HTML Support nodes and attributes are finally eliminated when you hit the remove format button. The feature now cleans what it should, leaving the document structure untouched.
Working with styled lists becomes more intuitive as list markers (bullets and numbers) now automatically inherit text styling properties such as font size adjustments, text color changes, and font weight modifications (bold, italic).
This improvement makes it easier to create visually consistent and professional-looking lists without additional configuration. This improvement also supports Multi-level lists.
Important! This behavior is enabled by default, which means you may experience content change when you load the content to the editor 's new version (for the better in our opinion). But if this is not something you expect, you can opt out.
The Markdown feature dependencies have been modernized with a switch to the unified ecosystem, replacing the previous marked / turndown implementation. This change brings more consistent and symmetrical HTML ↔ Markdown conversion. By adopting remark and rehype from the same family of tools, we have created a more reliable and maintainable implementation that will better serve your document processing needs.
We have added the config.cloudServices.autoRefresh configuration property to disable the automatic token refresh mechanism. When it 's set to false, the token must be refreshed manually. This property opens up the ability to implement custom token handling if a certain use case requires this.
We have also introduced improvements to the addCommandThread command, which now supports creating comment threads on specified ranges. Additionally, it allows for creating a comment thread with an initial comment with the provided comment content.
Minor breaking change
The AddCommandThreadCommand#isEnabled property is no longer false when the current document selection is empty, as the command now allows for creating comment threads on custom ranges. If you previously used this property (for example, to provide a custom UI element), you should now use the observable AddCommentThreadCommand#hasContent property instead.
We have introduced dedicated methods for an easier way to get specific annotations related to a comment or a suggestion and vice versa.
After the big New Installation Method release (v42.0.0+), some developers upgrading from v41-x to v42-x were greeted by the does not provide an export named ... error. We addressed issues immediately as they were reported, but we knew it required a deeper are more comprehensive approach long-term.
With this release, we introduced a new, clear set of rules about internal imports, and also added re-exports if they were missing, changed the names of items to be more descriptive and avoid collisions, took care of internal methods that were already exported but not tagged, and cleaned up @deprecated code that was stale for some time.
If your build throws errors after the update, search and replace the old names with the new ones from the update guide. We have not changed the behavior of these APIs, just the names.
Last but not least, this release put us on the clean and straight path towards the deprecation of old installation methods. Please let us know if you have any questions on GitHub or support channels.
To improve the out-of-the-box experience and accessibility, we are introducing opinionated defaults for content styling. From this version, we ship a small defaults layer applied to .ck-content. These content styles are easily replaceable via CSS variable override. You may have already styled those things with more specific selectors.
While working on this initiative, we decided to standardize the CSS naming, too. All older variables that applied to the content styles now share the consistent --ck-content-* prefix. Read about the details in the update guide.
FAQs
A set of ready-to-use rich text editors created with a powerful framework. Made with real-time collaborative editing in mind.
The npm package ckeditor5 receives a total of 814,629 weekly downloads. As such, ckeditor5 popularity was classified as popular.
We found that ckeditor5 demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
A flawed sandbox in @nestjs/devtools-integration lets attackers run code on your machine via CSRF, leading to full Remote Code Execution (RCE).
Product
Customize license detection with Socket’s new license overlays: gain control, reduce noise, and handle edge cases with precision.
Product
Socket now supports Rust and Cargo, offering package search for all users and experimental SBOM generation for enterprise projects.