@ckeditor/ckeditor5-editor-decoupled
Advanced tools
Decoupled editor implementation for CKEditor 5.
@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.
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);
});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 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 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.
The decoupled editor implementation for CKEditor 5.
This package contains the DecoupledEditor class. Follow there to learn more about this type of editor and how to initialize it.
This package contains the source version of the decoupled editor. This kind of editor implementation is also available as a ready-to-use document build. Read more about CKEditor 5 predefined builds in the CKEditor 5 documentation.
See the @ckeditor/ckeditor5-editor-decoupled package page in CKEditor 5 documentation.
npm install ckeditor5
Licensed under a dual-license model, this software is available under:
For more information, see: https://ckeditor.com/legal/ckeditor-licensing-options.
44.2.1 (February 20, 2025)
We are happy to announce the release of CKEditor 5 v44.2.1.
During a recent internal audit, we identified a cross-site scripting (XSS) vulnerability in the CKEditor 5 real-time collaboration package (CVE-2025-25299). This vulnerability can lead to unauthorized JavaScript code execution and affects user markers, which represent users' positions within the document.
This vulnerability affects only installations with real-time collaborative editing enabled.
You can read more details in the relevant security advisory and contact us if you have more questions.
Check out the Versioning policy guide for more information.
<details> <summary>Released packages (summary)</summary>Other releases:
FAQs
Decoupled editor implementation for CKEditor 5.
The npm package @ckeditor/ckeditor5-editor-decoupled receives a total of 295,400 weekly downloads. As such, @ckeditor/ckeditor5-editor-decoupled popularity was classified as popular.
We found that @ckeditor/ckeditor5-editor-decoupled 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.
Security News
OpenSSF has published OSPS Baseline, an initiative designed to establish a minimum set of security-related best practices for open source software projects.
Security News
Michigan TypeScript founder Dimitri Mitropoulos implements WebAssembly runtime in TypeScript types, enabling Doom to run after processing 177 terabytes of type definitions.
Security News
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.