What is @ckeditor/ckeditor5-editor-classic?
@ckeditor/ckeditor5-editor-classic is a classic editor build for CKEditor 5, which provides a rich text editor with a wide range of features for content creation. It is highly customizable and can be extended with various plugins to enhance its functionality.
What are @ckeditor/ckeditor5-editor-classic's main functionalities?
Basic Text Editing
This code initializes a basic instance of the classic editor, allowing users to perform standard text editing operations such as typing, formatting, and styling text.
const ClassicEditor = require('@ckeditor/ckeditor5-editor-classic/src/classiceditor');
ClassicEditor.create(document.querySelector('#editor'))
.then(editor => {
console.log('Editor was initialized', editor);
})
.catch(error => {
console.error(error);
});
Adding Plugins
This code demonstrates how to add plugins to the classic editor. In this example, the 'Bold' and 'Italic' plugins are added, and the toolbar is configured to include buttons for these functionalities.
const ClassicEditor = require('@ckeditor/ckeditor5-editor-classic/src/classiceditor');
const Essentials = require('@ckeditor/ckeditor5-essentials/src/essentials');
const Bold = require('@ckeditor/ckeditor5-basic-styles/src/bold');
const Italic = require('@ckeditor/ckeditor5-basic-styles/src/italic');
ClassicEditor.create(document.querySelector('#editor'), {
plugins: [Essentials, Bold, Italic],
toolbar: ['bold', 'italic']
})
.then(editor => {
console.log('Editor with plugins was initialized', editor);
})
.catch(error => {
console.error(error);
});
Customizing Toolbar
This code shows how to customize the toolbar of the classic editor. The toolbar is configured to include specific items such as 'heading', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'undo', and 'redo'.
const ClassicEditor = require('@ckeditor/ckeditor5-editor-classic/src/classiceditor');
ClassicEditor.create(document.querySelector('#editor'), {
toolbar: {
items: [
'heading',
'|',
'bold',
'italic',
'link',
'bulletedList',
'numberedList',
'|',
'undo',
'redo'
]
}
})
.then(editor => {
console.log('Editor with custom toolbar was initialized', editor);
})
.catch(error => {
console.error(error);
});
Other packages similar to @ckeditor/ckeditor5-editor-classic
tinymce
TinyMCE is a popular rich text editor that offers a wide range of features similar to CKEditor. It is highly customizable and supports various plugins for extending its functionality. Compared to @ckeditor/ckeditor5-editor-classic, TinyMCE has a different API and plugin system but offers comparable text editing capabilities.
quill
Quill is a modern rich text editor built for compatibility and extensibility. It provides a clean API and a modular architecture, making it easy to customize and extend. While Quill offers a different approach to text editing compared to @ckeditor/ckeditor5-editor-classic, it is also a powerful tool for creating rich text content.
draft-js
Draft.js is a JavaScript rich text editor framework developed by Facebook. It provides a set of tools for building rich text editors with React. Unlike @ckeditor/ckeditor5-editor-classic, Draft.js is more of a framework than a ready-to-use editor, offering more flexibility for developers to create custom text editing experiences.
44.0.0 (December 2, 2024)
Release Highlights
We are excited to introduce CKEditor 5 v44.0.0, a release packed with high impact updates designed to enhance your editing experience and simplify access to our premium offers. Here's what’s new:
🚀 Self-service plans: Simplified access to premium features
We are introducing flexible self-service plans that put you in control with full transparency. Now, you can:
💡 Important for current users:
If you are upgrading to v44.0.0+, ensure a smooth transition by updating your license keys in the editor, as we implemented a new format of the key. To get the new key, visit the Customer Portal. You can also refer to our license key and activation guide for help with logging in to the portal.
📣 The open-source licensing remains unchanged. However, config.licenseKey
is now a required property in the editor configuration. Use 'GPL'
for installations under the GPL terms. Read more in the update guide.
🔖 Bookmarks: Organize your content with ease
Say hello to Bookmarks, a long-awaited feature that simplifies content navigation within the editor. With this release, you can:
- Add anchors as reference points within text.
- Link to the newly created bookmarks in the editor to navigate to specific locations within complex documents, such as contracts or technical manuals.
📍 Future updates to Bookmarks and the linking experience are planned for the upcoming releases. Follow progress and share your feedback on GitHub.
⚡ Performance improvements: Faster table rendering
The current release includes another stride towards improving the performance aspect of the editor, this time focusing on how tables are handled in the content. Implemented optimizations have made table rendering 3x faster, with the average load time of a document with a very long, complex tables dropping from around 4.5 seconds to just 1.5 seconds.