What is @ckeditor/ckeditor5-editor-decoupled?
@ckeditor/ckeditor5-editor-decoupled is a decoupled editor build for CKEditor 5. It allows you to create a rich text editor with a customizable toolbar that can be placed anywhere in your application. This package is particularly useful for applications that require a flexible and highly customizable text editing experience.
What are @ckeditor/ckeditor5-editor-decoupled's main functionalities?
Basic Initialization
This code demonstrates how to initialize a decoupled editor and attach its toolbar to a separate container. This allows for greater flexibility in placing the toolbar anywhere in your application.
const DecoupledEditor = require('@ckeditor/ckeditor5-editor-decoupled/src/decouplededitor');
const ClassicEditor = require('@ckeditor/ckeditor5-build-classic');
DecoupledEditor.create(document.querySelector('#editor'))
.then(editor => {
const toolbarContainer = document.querySelector('#toolbar-container');
toolbarContainer.appendChild(editor.ui.view.toolbar.element);
})
.catch(error => {
console.error(error);
});
Customizing the Toolbar
This code sample shows how to customize the toolbar by specifying which tools should be included. In this example, only 'bold', 'italic', and 'link' buttons are added to the toolbar.
DecoupledEditor.create(document.querySelector('#editor'), {
toolbar: [ 'bold', 'italic', 'link' ]
})
.then(editor => {
const toolbarContainer = document.querySelector('#toolbar-container');
toolbarContainer.appendChild(editor.ui.view.toolbar.element);
})
.catch(error => {
console.error(error);
});
Handling Editor Data
This code demonstrates how to get and set data in the decoupled editor. This is useful for dynamically updating the content of the editor or retrieving the content for further processing.
DecoupledEditor.create(document.querySelector('#editor'))
.then(editor => {
const toolbarContainer = document.querySelector('#toolbar-container');
toolbarContainer.appendChild(editor.ui.view.toolbar.element);
// Get editor data
const data = editor.getData();
console.log(data);
// Set editor data
editor.setData('<p>Hello, world!</p>');
})
.catch(error => {
console.error(error);
});
Other packages similar to @ckeditor/ckeditor5-editor-decoupled
quill
Quill is a modern WYSIWYG editor built for compatibility and extensibility. It offers a similar decoupled toolbar feature and is highly customizable. Compared to @ckeditor/ckeditor5-editor-decoupled, Quill is known for its lightweight and fast performance.
tinymce
TinyMCE is a popular rich text editor that provides a wide range of features and plugins. It also supports a decoupled toolbar and offers extensive customization options. TinyMCE is often compared to CKEditor for its comprehensive feature set and ease of integration.
draft-js
Draft.js is a JavaScript rich text editor framework, built for React. It provides a lot of flexibility and control over the editor's behavior and appearance. Unlike @ckeditor/ckeditor5-editor-decoupled, Draft.js is more of a framework than a ready-to-use editor, requiring more setup and customization.
43.1.0 (September 5, 2024)
We are happy to announce the release of CKEditor 5 v43.1.0.
Release highlights
This release includes important bug fixes and enhancements for the editor:
-
Block merge fields: In contrast to regular, inline merge fields, the block merge fields are designed to represent complex, block-level structures, such as a dynamically generated table, a row of products, or a personalized call-to-action segment. Block merge fields are supposed to be replaced by arbitrary HTML data when the document template is post-processed or exported to a PDF or Word file.
-
Nested dropdown menus: this release introduces a new UI component: nested dropdown menus. They can be used by feature developers to easily provide an advanced user interface where UI elements are organized into a nested menu structure.
-
Customizable accessible label: You can now configure the label for the accessible editable area through the editor settings, ensuring it fits your system’s needs.
-
Improved table and cell border controls: It is now easier to manage both table and cell borders. The table user interface now clearly indicates the default border settings, allowing you to set “no borders” (None
) for tables and cells without any additional configuration.
⚠️ In some cases this update may lead to data changes in the tables’ HTML markup when the editor loads them. However, visually nothing will change, and the experience will be the same.
The full list of enhancements can be found below.