« See all

CKEditor 5 v11.1.0 with media embed and collaborative tables

We are happy to announce the release of CKEditor 5 v11.1.0. This editor version brings the long-awaited media embed feature, support for block content in tables, tables available in real-time collaborative editing and many smaller features and improvements. We also streamlined our Operational Transformation engine to improve its support for already implemented collaboration features as well as those planned in the near future (like “suggestion mode”).

# New rich text editor features

We are committed to producing a modern editor that helps creators easily craft rich text content with elements such as captioned images, videos, tables, block quotes — and we are happy to say that we have just ticked yet another feature off this list!

# Media embed

The media embed feature lets you embed rich media such as YouTube videos or tweets. You can insert the media via the toolbar button or by pasting a link to them directly into the editor content.

Screencast of media embed in rich text editor, CKEditor 5 v11.1.0.
Screencast of media embed in rich text editor, CKEditor 5 v11.1.0.

This feature produces a semantic markup (<oembed url="..."></oembed> tags) and integrates easily with external media embed services (such as Iframely or Embedly).

See the demo and read more about this feature in the Media embed feature guide.

# Block content in tables

Up until now the table feature only allowed inserting inline content (text, links, bold, etc.) into table cells. Starting from this release, you can also create block content (multiple paragraphs, headings, list items) in table cells.

Block content (paragraphs and lists) supported in tables of the rich text editor in CKEditor 5 v11.1.0.
Block content (paragraphs and lists) supported in tables of the rich text editor in CKEditor 5 v11.1.0.

The dual nature of table cell content is a well-known issue for any HTML WYSIWYG editor. Assuming that you start with inline content in a table cell (<td>Text^</td>), if you press Enter and then Backspace in the table cell, most editors will produce something like <td><p>Text^</p></td>. The same happens if you change the format to a heading and then back. You end up with random paragraphs in some table cells and no paragraphs in others.

CKEditor 5 handles these cases with extreme grace. Thanks to its custom data model it is able to ensure that no paragraphs are produced unless it is really necessary, no matter what the user did. The output is always as clean HTML as possible.

You can read more about this feature and test it in the Table feature guide.

# Real-time collaboration in tables

In terms of model structure, the table feature is the most complex one we have implemented so far. Its two-dimensional nature and additional constraints (it should have the same number of cells in each row) are challenging, especially in real-time collaborative editing scenarios. A commonly discussed scenario in the context of real-time collaboration technologies (such as Operational Transformation) is: What happens if one user adds a row and the other adds a column at the same time? Imagine a 3x3 table. User A adds a row of 3 cells while User B adds one cell to each of the 3 rows. That gives 15 cells in total (3 * 3 + 3 + 3), while a 4x4 table should have 16 cells.

We learned that this issue is not exclusive to tables and can, in fact, appear in many other scenarios. If you would like to learn more about our experience with real-time collaboration see our latest blog post: “How we approached collaborative editing — Lessons learned from creating a rich text editor with real-time collaboration”.

Long story short, the table feature is now available in our portfolio of CKEditor 5 Collaboration Features.

Screencast of real-time collaboration with tables in CKEditor 5 rich text editor.
Screencast of real-time collaboration with tables in CKEditor 5 rich text editor.

# Adding toolbars to your widgets made easier

Many CKEditor 5 features use the concept of “contextual balloon toolbars”. Such toolbars appear next to features like images, tables, links, etc.

Contextual balloon toolbar for rich text editor widgets (like captioned image) in CKEditor 5 v11.1.0.
Contextual balloon toolbar for rich text editor widgets (like captioned image) in CKEditor 5 v11.1.0.

To simplify the job of adding toolbars to your widgets, we implemented the WidgetToolbarRepository plugin. A sample plugin that adds a toolbar to your widget would look like this:

class MyWidgetToolbar extends Plugin {
    static get requires() {
        return [ WidgetToolbarRepository ];
    }

    afterInit() {
        const editor = this.editor;
        const widgetToolbarRepository = editor.plugins.get( WidgetToolbarRepository );

        widgetToolbarRepository.register( 'myWidget', {
            items: [ 'makeMyWidgetBigger', 'makeMyWidgetSmaller' ],
            visibleWhen: viewSelection => isMyWidgetSelected( viewSelection )
        } );
    }
}

# And more

# Improvements

Besides the new rich text editor features, we also prepared many improvements. Let’s walk through the most important ones.

# Table feature

# Autosave

# Operational Transformation cleanup

While being hidden under the hood, the OT engine is the key component of CKEditor 5. It powers features such as real-time collaborative editing or selective undo. It will also be the crucial mechanism for the upcoming track changes (“suggestion mode”) feature. In this iteration, we rolled out a thoroughly reviewed and cleaned up implementation of the OT engine. Based on our experience, we decided to remove the mechanism of deltas (sets of operations) and special transformation cases for deltas and focus on transforming operations only. The new, simplified implementation will let us make faster progress on the stability and performance aspects of this system. You can read more about the change in issue #1162.

# Other improvements

# Documentation

One of our ongoing initiatives is to review the existing documentation and cover the missing parts, especially those that we are frequently asked about. Due to the size of the project this work will continue for several months but here is its first snapshot.

# What’s next?

The Paste from Word feature (now renamed and extended as “Paste from Office”) is just around the corner (its first version is currently on review).

We plan to start working on CKEditor 5 rich text editor component for Vue.js which will join the family of CKEditor 5 component for React and CKEditor 5 component for Angular.

Other than that, we will continue working on row and column selections in tables. We also plan to add support for configurable editor placeholders and introduce whitespace trimming in data which will, for example, make it easier to check if the editor is empty.

# Download

CKEditor 5 builds can be downloaded from the CDN, npm or as zip packages. Read more in the Installation guide.

# License

CKEditor 5 is available under Open Source and Commercial licenses. Full details can be found on our license page.

# Reporting issues and contributing

You can report all general issues in the main CKEditor 5 repository. Read more in the Reporting issues guide.

# Support

The CKEditor 5 documentation is growing and always up to date. Community support is available through Stack Overflow. Visit the Gitter channel if you have some quick questions. Read more in the Getting support guide.

The best WYSIWYG editor for Angular and React is here
Lessons learned from creating a rich-text editor with real-time collaboration