Posted on: 05-03-2019

CKEditor 5 v12.0.0 with inline widgets and distraction free editor released

CKEditor 5 inline widgets and distraction free editor release

We are happy to announce the release of CKEditor 5 v12.0.0. This editor version brings many new features (editor placeholder, inline widgets, CKEditor 5 inspector), a new editor build, many improvements for plugin authors as well as integration developers and, of course, some new guides in our documentation.

It is a major release, so there are some breaking changes for plugin authors, possibly more breaking changes for developers who created their own rich text editors and a few changes that will affect CKEditor 5 integrations.

Read the blog post for more details or jump right to the migration guide if you want to upgrade your CKEditor 5 installation or plugin.

# New rich text editor features

Thanks to the great amount of feedback that we are receiving from the community and customers, we are able to prioritize the features that you would like to see the most in the upcoming releases. The following new features made it to this release — we hope you will enjoy them, give them a serious test and provide us with even more feedback!

# Distraction-free writing in balloon block editor

This editor uses a balloon toolbar for inline text formatting options (like bold, italic) and block toolbar to display the block formatting options (like headings, lists) and other block-level features such as “Insert image” or “Insert table”.

This is a distraction-free editor that lets you focus on creating content without the editor tools getting in your way. It is similar to rich text editors that you know from platforms such as Medium where all the formatting features are available at hand when you need them, without distracting your writing process.

Check out the demo of the distraction-free WYSIWYG editor build of CKEditor 5.

# Inline widgets

So far widgets could only be used for block-type elements such as images or tables. Starting from this release, it is possible to turn inline elements into widgets, too.

There is no end-user feature that utilizes this functionality yet, but it was requested many times by the community, so we hope it will let you start creating features based on it. We also plan to use it soon in features such as @mentions and #tags.

In the meantime, you can read how to create inline widgets in the Implementing an inline widget tutorial.

# WYSIWYG editor placeholder

You can now show the editor content placeholder (e.g. “Type here…”) by using the config.placeholder option. It was one of the most commonly requested features — we heard your voice!

Check out the WYSIWYG editor placeholder demo of CKEditor 5.

# Media embeds and images in tables

We are constantly improving the table feature in CKEditor 5 WYSIWYG editor. Starting from this release, media embeds and images can also be used in tables. Refer to particular issues (#161 and #99) to learn more.

You can try out how table support works in CKEditor 5 in the table feature demo.

# Multi-root editors

Support for multi-root editors was one of our initial requirements for CKEditor 5, therefore, most of the codebase supported them. However, since we have not shipped such an editor yet, we had to polish a few things to make them a reality.

Multi-root editors can be used in various scenarios in which a single editor instance is preferred over multiple ones. The reasons for using a single editor instance are, for example, a shared undo stack and a shared UI.

We think that multi-root editors are often an answer to very specific requirements and therefore we have not proposed such an editor type yet. You can build your own one, though. See the demo of a multi-root editor. You can also leave us feedback on how you used this feature on GitHub.

# CKEditor 5 inspector

Besides introducing new features by ourselves, we also want to make it easy for you to write your own ones to use the full power of our rich-text editor framework. CKEditor 5 inspector is a tool that you can easily enable during the development and use it to inspect the model and tree structures as well as the list of commands. In the future, we plan to add more features which will allow checking things like the schema, markers, events, etc.

You can install the inspector from npm and contribute to the project in https://github.com/ckeditor/ckeditor5-inspector.

# Rich text editor improvements

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

# Checking if the editor is empty

This is a small change for CKEditor 5 but a big step to make integrating CKEditor 5 easier. So far, editor.getData() was returning '<p> </p>' for empty content. Right now, if the editor is empty, an empty string will be returned.

You can also use the editor.model.hasContent() method directly.

# Base editor classes cleanup

Every WYSIWYG editor implementation consists of multiple classes glued together by the editor class. They need to implement specific interfaces like EditorWithUI, DataApi, ElementApi, EditorUI, EditorUIView, etc.

These classes and interfaces define the API which can be used by plugins. Since there are multiple types of editors and most plugins should work with all of them, these interfaces need to meet specific requirements. On one hand, they need to be generic (minimal) enough to fit the needs of different editors. On the other hand, the interfaces should be sufficient enough to let the plugins implement their functionality.

In this iteration, when implementing features such as support for multi-root editors and cleaning up the responsibilities between the engine and the UI layers (see one of the next sections), we noticed the need to improve these interfaces.

You can find the details in each editor type changelog (see e.g. the ClassicEditor’s changelog) and in the migration guide.

# Converter helpers at your service

So far, to write a one-way converter you had to import functions from the upcast-converters and downcast-converters modules. We decided to expose these converters directly on the editor.conversion.for() method to make using them much more convenient.

The old modules were removed, therefore you will need to update your plugins to use the new method. Read more in the migration guide.

# Other improvements

The compatibility issue between CKEditor 5 and create-react-app@2 was resolved. The Babel issue which caused it is still open so we rewrote the bit of our code which hit it.
We introduced the is() methods to the DocumentSelection and Selection classes in order to avoid the need to use the instanceof operator.
We stopped using the native Symbols to enable extending features which used them previously.
We significantly improved the performance for bigger documents.
HeadingButtonsUI now exposes buttons for all levels of headings.
The development environment uses yarn workspaces instead of lerna with npm which significantly improved its cold start times and ease of use.
Editable classes are now managed solely by the engine view layer. This finally makes it possible for the developers to control them with ease.

# 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 you can already see the first snapshot of it here.

# New guides

Together with this release we introduced 4 new tutorials:

Content Security Policy (CSP) settings for CKEditor 5.
Implementing a block widget tutorial – A step-by-step tutorial on implementing a block widget called “simple box”.
Implementing an inline widget tutorial – A step-by-step tutorial on implementing an inline widget called “placeholder”.
Implementing a multi-root editor – A guide on how to implement a multi-root editor.

# Compatibility with CSS frameworks

We added a new guide about CKEditor 5 compatibility with CSS frameworks which covers Bootstrap, Foundation, Materialize and Semantic-UI.

# Compatibility with Ionic and Cordova

In order to enable CKEditor in a mobile application built with Ionic, you need to re-enable the user-select style inside the editor. Read more in the documentation about CKEditor 5 compatibility with Ionic and Cordova.

# What’s next?

No surprise here — we will continue working on features and improving the existing ones along the way. The next features on our radar are:

Autocomplete (and its specific implementations such as @mentions).
Automatic text transformations (dashes, smart quotes, etc.).
RTL support.
The remove formatting feature.

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