@ckeditor/ckeditor5-editor-decoupled

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.

README

CKEditor 5 decoupled editor implementation

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.

Documentation

See the @ckeditor/ckeditor5-editor-decoupled package page in CKEditor 5 documentation.

Installation

npm install ckeditor5

License

Licensed under a dual-license model, this software is available under:

• the GNU General Public License Version 2 or later,
• or commercial license terms from CKSource Holding sp. z o.o.

For more information, see: https://ckeditor.com/legal/ckeditor-licensing-options.

Changelog

44.2.0 (February 12, 2025)

We are happy to announce the release of CKEditor 5 v44.2.0.

Release Highlights

🖥️ Enhanced Source Code Editing (⭐)

Introducing new premium feature: Enhanced Source Code Editing. It displays the source code in a dialog and is compatible with all editor types. It offers syntax highlighting, code completion, code folding, and other advanced functionalities. Additionally, it supports both HTML and Markdown formats.

📤 Uploadcare and image optimizer (⭐)

We have integrated the Uploadcare image manager service, enabling you to upload and edit images to their cloud environment. You can upload files from various sources, including local devices, social media, or online drives ensuring rapid uploads. The integration takes care of efficient media delivery with responsive images mechanism, making sure your users will save bandwidth and have faster website loading. You can also optimize images with the built-in image editor which offers a range of features, such as cropping, rotating, flipping, photo filters and more. All this directly from the editor, try it out!

🖼️ Image Merge Fields (⭐)

Image merge fields are a new type of merge fields, dedicated for image placeholders. They maintain all standard image interactions, like styling, resizing or captions (in which you can use merge fields too!) At the same time, they keep all merge fields functionalities, like data previews or document export integration. In the document data, image merge fields are represented like other images, however their src attribute is set to a respective merge field, for example, src="{{CompanyLogo}}", making them easy to post-process!

📝 Track Changes Preview (⭐)

We have added the preview mode that displays a document with all suggestions accepted. Accessible from the track changes dropdown, this modal preview helps check the final content without extensive markers.

😀 Emoji support

They are here! 🎉 🥳 🎊 Insert emojis effortlessly in the editor by typing : or through a user-friendly emoji picker. This feature enhances the richness of your content by allowing quick access to a wide range of emojis.

⚡ Performance improvements: Part 4

Here comes the final batch of the planned performance improvements in the editor loading speed area, that we worked on through a couple of past releases.

• A new caching mechanism in Mapper now handles model-to-view mappings, substantially improving performance for loading and saving data.
• Images with specified height and width automatically use [loading="lazy"] in the editing area, optimizing the loading time (read more on MDN). This attribute is only applied during editing to enhance the loading efficiency of images, and it does not reflect in the final data output.

We are greatly satisfied with the improved editor loading times. At the same time, we acknowledge some other problematic areas, and we will keep delivering more performance-related improvements in the future.