Posted on:11-10-2018

CKEditor 5 v11.1.0 with media embed and collaborative tables

CKEditor 5 with tables available in real-time collaborative editing release

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.

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.

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.

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

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

The table and media embed features were added to all four official builds and they are enabled there by default.
The config.cloudServices.tokenUrl option of CKEditor Cloud Services can now accept a callback.
The Link button will be “on” when the caret is inside a link. This change plays along with the two-step caret movement which allows typing around links.
The set of heading icons was extended with levels 4 to 6.

# Improvements

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

# Table feature

# Autosave

Autosave will not be triggered if the previous attempt has not finished yet.
The heuristic for triggering the save callback was improved to execute the callback less often but in more desirable moments.

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

In the CKEditor 5 Builds documentation we created a new category called “Frameworks”. Besides an explanation of how to approach integrating CKEditor 5 with various frameworks we added the CKEditor 5 component for React and CKEditor 5 component for Angular 2+ documentation. Additionally, we introduced a section explaining how to use two or more editor types on one page.
In the CKEditor 5 Framework documentation we created a new category called “Deep dive” where two new articles found their place: “Clipboard” (an overview of the integration with clipboard) and “Schema” (a guide explaining how to use the schema and a detailed explanation of various concepts behind it).
In the Features section we added two new guides about rich text support (“Link feature”, “Media embed feature”) as well as a special section explaining how block and inline content works in tables.
Finally, a couple of API docs were extended to cover some frequently asked questions: model.insertContent(), toWidget() and toWidgetEditable().

# 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. Read more in the Getting support guide.