What is different about CKEditor 5 compared to CKEditor 4?

Enhanced UX

Every aspect of the editing experience, including features, have been reviewed.

Features which were implemented have been reviewed under the public Editor Recommendations project with the aim to look at their semantics, HTML syntax, and basic UI and UX related aspects (icons, keystrokes, behaviour).

As a result, the UX has been enhanced by:

• Super easy, intuitive image inserting with automated uploading, resizing and creating different image sizes for responsive design.
• Simple linking without complex dialogs.
• Auto formatting enabling to start lists, headings and apply some inline styles, like bold, just by typing.
• New toolbar in the classic editor being always visible when scrolling down the page.
• Easy styling with the contents of the editor placed inline in the page.

However, being a totally new editor, with time CKEditor 5 will have more features developed and available for the end users to benefit from. To read more about CKEditor 5 latest developments, report issues and feature requests, please go to the CKEditor 5 GitHub repository.

Highly customizable and extensible

CKEditor 5 gives powerful customizability and extensibility possibilities. The core is open for extensions and reuse, enabling a developer to create any kind of editor with any type of toolbars, balloons.

A new data model and a model-view-controller architecture (MVC) have been introduced making conversation between model and view extremely customisable with full control over changes applied to the model. MVC allows to achieve results which previously were very hard or impossible to achieve.

CKEditor 5 is implemented as multiple npm packages with each package having its own repository. This allows to focus on each feature separately and makes it easier for others to contribute.

New data model

A much more efficient data model has been designed in CKEditor 5, making the development of features a much more focused and creative experience.

The new data model is part of the MVC architecture of the editing engine. It is defined and controlled with pure JavaScript, moving the data model that represents the text totally away from the browser, providing more control on how the data is output and in what kind of format it is produced.

The data structure is normalized and optimized for complex data management operations making implementation of algorithms such as Operational Transformation and real-time collaboration possible. With the collaboration services provided by the CKEditor Collaboration Server, it is now extremely easy to bring real-time collaboration features inside any application.

Modern

CKEditor 5 has been totally rewritten in ES6, using the power of modules. It provides all the necessary tools to easily integrate it with modern applications and technologies, like Angular, React, Node.js, npm, etc.

As far as the quality of the code is concerned, it has 100% code coverage providing quality assurance on each level of the architecture.

For a deeper understanding of CKEditor 5, please refer to CKEditor 5 documentation.