CKEditor 5. New content editing experience

CKEditor is a WYSIWYG editor formerly called FCKeditor. But after its Brazilian creator, Frederico Caldeira Knabben discovered that FCK is a negative abbreviation in English, the name was changed to CKEditor. CKEditor 5 version was launched back in 2018. To date, many users have already updated and improved this indispensable and beloved tool. It is an entirely new product.
Brew yourself a hot cup of coffee and read our CKEditor 5 blog to find out:

• What's new in it?
• How is CKEditor 5 different from CKEditor 4, and should it be preferred?
• And how to install and configure the CKEditor 5 module.

New CKEditor 5: Overview

The main task in creating the CKEditor 5 online builder was its complete modernization. CKEditor's latest version is written from scratch in ES6. And that means even more power, flexibility, and ease of use. Drupal 9.3 includes CKEditor 5 as a new WYSIWYG editor. It is possible to adjust features. The features can be customized once and reused everywhere!
There is native integration with Angular, React, and Vue.js.
This modern WYSIWYG text editors can be embedded in any software you need: 

• CMS
• Customer relationship management 
• Project and document management
• Customer communication
• Social media
• Digital publishing platforms

or whatever you want.

Top CKEditor 5 WYSIWYG editor features

1. Customizable and extensible

All functions can be fully customized to suit individual needs. In addition, the CKEditor 5 framework features a flexible and open API structure. The core is extensible and reusable. All these features allow developers to create their editor with toolbars and tooltips. There is also a new data model and MVC. In particular, the dialogue between the model and the view is highly customizable.

2. Autoformatting

Edit content on the go. The auto-formatting feature opens up endless possibilities for constantly improving content. Inline codes like markdown allow for quick editing without using toolbar buttons. For example, you can use * or - to add bulleted lists, or use # or ## or ### to add heading 1, heading 2, or heading 3, respectively.

3. Top text features

Content pasting from Office
Easily inserts content from Microsoft Word, Excel, and Google Docs.
Media embedding
Embed tweets, videos, images, and Instagram or Facebook posts hassle-free.
Responsive Images
To insert images, use the drag and drop feature. In addition, Drupal 9 CKEditor 5 supports responsive images for different devices.
Autosaving
Drupal CKEditor 5 provides content on your server to enable users to delete data.

4. Quick export

All your documents are saved in HTML format by default. Exporting to PDF and Word is now even easier with CKEditor 5's updated features. Now you can convert all documents into portable file formats. Afterward, the document can be downloaded or printed.

5. Adding images by pasting a URL

Do you have many photos on the site? Pasting the URL will shorten the time it takes to paste the images. Images can now be uploaded more easily by pasting their URLs into the editor. A plugin called AutoImage recognizes image links and automatically inserts them. With CKEditor 5 you can insert, resize, style, and caption images. Click here to try the demo.

6. Covering documentation

The CKEditor 5 documentation is what developers who will work with your site will most appreciate. The new version has amazingly extensive documentation that is easy for anyone to understand. Do not think that this is an unimportant advantage. You will change your mind as soon as some problem arises and the answer will be found in these documents.

Ready-to-use CKEditor 5 builds

Today there are 6 sets of ready-to-use CKEditor 5:

1. Classic editor
2. Inline editor
3. Balloon editor
4. Balloon block editor
5. Document editor
6. Superbuild

Every "build" offers a specific type of editor with a default configuration. The solutions provide easy-to-install solutions that satisfy the most common editing needs.

Installation and configuration of CKEditor 5 module

Here's how we can add CKEditor5 into the module. There are two types of plugin discovery methods used by the CKEditor5 module, YML & annotation. In the following steps, we will show you how to add new plugins.
1. The YAML plugin is the best option to integrate a new CKEditor plugin without providing any settings. The following example shows how to integrate a select-all plugin.Due to Drupal's DLL build approach, a DLL-compatible js file is required. You can generate the DLL-compatible js file by following the following steps:

The following steps should be sufficient if you use CKEditor's plugin, as they provide all the necessary setup to produce DLL-compatible files. Now let's look at how we can add the special characters plugin via a custom module.
2. You need to create a new custom module. For example, let's call it - ckeditor5_drupal_spesial.

# ckeditor5_drupal_spesial.info.yml
name: CKEditor 5 Drupal Spesial
type: module
description: "Provides CKEditor Special characters plugin."
package: CKEditor 5
core_version_requirement: ^9.2
dependencies:
  - drupal:ckeditor5

3. The required DLL compatible files will be generated in CKEditor5/packages/your-package/build. You need to find and copy them. After that paste this data under the js/build folder.
Then copy the icon file from the CKEditor5/themes/icons folder. Then go ahead and place it in your modules icons folder. In the future, this button will be displayed on the toolbar.
4. To activate this plugin in CKEditor you should copy the file at packages/your-package/build and generate it in {custom_module_name} js/build file. This is necessary in order to create a library for adding JS / CSS, which we will use later.
5. Next, you should name the module YML file. This ends with .ckeditor5.yml.
6. Once all the steps are done, customize the text filter page. You should see the plugin icon in the plugins list.

How to integrate CKEditor5?

Let's consider three variants of CKEditor5 integration: integration of existing builds, assembly from sources, and DLL builds.

• Integration of existing builds
  To do this, you need to select the plugins you want to use and create a package. No webpack configuration is required since you are using a built-in editor. In this case, CKEditor functions as a ready-made library. In five easy steps, you can build your own CKEditor 5 build with custom plugins, toolbars, and languages.
• Source-code building
  This option is suitable if you want complete control over the building process. Compared to the previous approach, you do not use existing builds but create your project. That is, you add only those features you need to the custom project and nothing more.
• DLL builds
  To implement the above two methods, you need to recompile CKEditor. Such actions should be repeated every time a new feature is added, which is inconvenient and time-consuming. Let's take Drupal as an example because it has a lot of contributed modules. The two previous options are tricky to add custom plugins to CKEditor. This situation can be avoided with CKEditor's "DLL build a solution." DLLs help build core and load plugins with simple JS concatenation. The DLL allows you to run new plugins in the editor without recompiling them. The CKEditor 5 official paper says that DLL builds and divides the entire project into multiple files.

CKEditor 4 vs. CKEditor 5 

Don't see the difference between CKEditor4 and CKEditor5? Keep reading to find the answer to this question. Looking ahead, we want to emphasize that the difference is really noticeable!

Do you have anything CKEditor5 related to add, or do you need help with Drupal third-party integrations? Our team will be happy to hear from you and help you!