What is ckeditor5?
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.
What are ckeditor5's main functionalities?
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);
});
Other packages similar to ckeditor5
tinymce
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
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
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
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.
Table of contents
Quick start
Refer to the Quick Start guide to learn more about CKEditor 5 installation.
CKEditor 5 Builder
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.
TypeScript support
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.
CKEditor 5 advanced installation
For more advanced users or those who need to integrate CKEditor 5 with their applications, we prepared integrations with popular JavaScript frameworks:
CKEditor 5 Framework
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.
Documentation and FAQ
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.
Releases
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.
Editing and collaboration features
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.
Contributing and project organization
Ideas and discussions
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!
Development
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.
Reporting issues and feature requests
Report issues in the ckeditor5
repository. Read more in the Getting support section of the CKEditor 5 documentation.
License
Licensed under the terms of GNU General Public License Version 2 or later. For full details about the license, please check the LICENSE.md
file or https://ckeditor.com/legal/ckeditor-oss-license.
43.0.0 (August 7, 2024)
We are happy to announce the release of CKEditor 5 v43.0.0.
Release highlights
Merge fields
The new merge fields feature is a game-changer for creating document templates and other kinds of personalized or dynamic content. Thanks to this feature, you can insert placeholders into your content, indicating where actual values should go. These places are marked in the final content in a distinctive way, making it easy to later process the template and fill it with the actual values. The feature supports a preview mode too - you can define preview data sets, and see how the content will look like when real values are used directly in the editor. The plugin is highly customizable to fit various applications and scenarios. Finally, merge fields are fully integrated with our Export to Word, Export to PDF, and Import from Word features, both when they are used from the editor and via REST API.
We are extremely happy to share with you this highly demanded feature, and we cannot wait to listen to your feedback!
Make sure to visit our builder or documentation to learn more about the feature.
Export to Word V2 as the default version
The V2 version of the export to Word feature introduced significant improvements, optimizations, and fixes. This update enhances the overall performance, making the export process faster and more reliable, especially for large documents. Key improvements include better handling of table borders, automatic detection of Word styles from CSS, and support for more text-related CSS properties, ensuring your documents maintain their intended formatting.
Starting this version, the V2 configuration becomes the default in the ExportWord
plugin. Make sure to migrate your configuration if you are using it.
Improved sidebar accessibility and navigation
We have introduced multiple enhancements to make the sidebar more accessible. Among other improvements, you can now use the <kbd>Shift</kbd>+<kbd>Ctrl</kbd>+<kbd>E</kbd> keystroke to move focus from the editor marker to the active annotation. When your comment reply is ready, you can quickly submit it using the new <kbd>Ctrl</kbd>+<kbd>Enter</kbd> shortcut. Also, navigation from one annotation to another is now possible by using arrow keys.
The full lists of keyboard supported actions can be reviewed in our Accessibility support guide.
Important bug fixes and improvements
This release brings notable bug fixes and improvements to enhance your editing experience.
- Several improvements have been made to typing in the editor, especially for Android IME and Safari. On Android, issues like duplicated characters and reverse writing effects have been resolved. In Safari, the reverse typing effect after focus change has been fixed.
- A couple of UI improvements:
- We replaced the visual indication of the selected option in dropdowns (blue background) with the checkbox marks to better indicate selected options, aligning visual cues across the toolbar and menu bar.
- All editor types now support the menu bar.
- Additionally, the special characters UI has been moved from a dropdown to a dialog. This unifies the action between the menu bar and toolbar, and also gives content creators quicker access to the always-on-top dialog.
- We have improved the drawing of page break line algorithm to address the pagination feature issues. We also improved the performance of the plugin.
React and Vue integrations updates
We have released new major versions of the React and Vue integrations. In both of them, we have migrated to JavaScript modules (ESM) and rewritten large parts of the codebases to support the latest versions of these frameworks and to follow the latest recommendations for writing the components.
We strongly recommend that you follow the release highlights to update to the latest versions: