@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.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:

• Choose the plan that fits your needs, pay only for what you use, and get started instantly with a commitment-free trial.
• Seamlessly manage your license keys, track usage, and more in the new Customer Portal.

💡 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.