In my opinion, CKEditor is one of the best wysiwyg editors for websites. Lately a lot of gibberish has appeared in it to simplify the user’s life, which ultimately gets in the way, for example ACF. I already know how to edit and disable it. But let’s return to the topic of our article: how to install plugins on CKEditor.

I see two approaches here.

First, we go to the editor’s website and rebuild CKeditor for ourselves, including the plugins we need. This is done as follows. We go to the website ckeditor.com, go to the download tab. Next, select Or let me customize CKEditor

But in this case, not all plugins are displayed. To include any new or special plugins in your build, you need to build your build a little differently. Go to Add-ons -> Plug-ins and see the following moving menu on the right

When you click the add to my editor button, the plugin is added to the assembly. When finished, click Build my editor and replace our built-in editor with the generated one.

The second approach is for those who are interested in delving into the code themselves.

On the website ckeditor.com, go to the add-ons->plug-ins section and click on the required plugin.

Select Download and follow the instructions from the site. For the most part, they either come down to the fact that you need to install dependencies for a given plugin and register the plugin itself in the field configuration file config.js and the plugin that the installer depends on, separated by commas, for example,

Config.extraPlugins = "codemirror,youtube,imagerotate";

CKEditor is a ready-to-use HTML text editor designed to simplify the creation of web page content. This is a WYSIWYG editor that provides text editing functions directly to your web pages.

CKEditor is an open source application source code, that is, it can be changed according to your wishes. Its usefulness comes from an active community that never stops developing applications with free add-ons and a transparent development process.

3-Download CKEditor

You have 4 options for downloading CKEditor.

Download result:

You can see examples of CKEditor in the folder samples:

4- Basic examples:

All examples of this article are contained in the folder samples in CKEditor which you downloaded. But I will try to make it easier so that it will be easier for you.

Create a folder myexamples, the examples in this article will be located in this folder.

4.1- Replace Textarea elements using JavaScript

A simple example is using CKEditor.replace(..) to replace via CKEditor .

replacebycode.html

Replace Textarea by Code Replace Textarea Elements Using JavaScript Code

Hello CKEditor

CKEDITOR.replace("editor1");

See example:

Results of running the example:

4.2- Replace textarea elements with name class

With having attribute name, and class ="ckeditor" will be automatically replaced by CKEditor.

Text

replacebyclass.html

Replace Textareas by Class Name Replace Textarea Elements by Class Name

Hello CKEditor

Running the example:

4.3- Create CKEditor with jQuery

An example of creating a CKEditor using JQuery.

jQuery Adapter - CKEditor Sample $(document).ready(function() ( $("#editor1").ckeditor(); )); function setValue() ( $("#editor1").val($("input#val").val()); ) Create Editors with jQuery

Hello CKEditor

As you can see, configurations are set by a simple JavaScript object passed to the create() method.

Removing features

Builds come with all features included in the distribution package enabled by default. They are defined as plugins for CKEditor.

In some cases, you may need to have different editor setups in your application, all based on the same build. For that purpose, you need to control the plugins available in the editor at runtime.

In the example below Heading and Link plugins are removed:

// Remove a few plugins from the default setup. ClassicEditor .create(document .querySelector("#editor" ), ( removePlugins : [ "Heading" , "Link" ], toolbar : [ "bold" , "italic" , "bulletedList" , "numberedList" , "blockQuote" ] )).catch(error => ( console .log(error); ));

Be careful when removing plugins from CKEditor builds using config.removePlugins . If removed plugins were providing toolbar buttons, the default toolbar configuration included in a build will become invalid. In such case you need to provide the updated toolbar configuration as in the example above.

List of plugins

Each build has a number of plugins available. You can easily list all plugins available in your build:

ClassicEditor.builtinPlugins.map(plugin => plugin.pluginName);

Adding complex features

As CKEditor builds do not include all possible features, the only way to add more features to them is to create a custom build .

Adding simple (standalone) features

There is an exception to every rule. Although it is impossible to add plugins that have dependencies to @ckeditor/ckeditor5-core or @ckeditor/ckeditor5-engine (that includes nearly all existing official plugins) without rebuilding the build, it is still possible to add simple, dependency-free plugins .

import ClassicEditor from "@ckeditor/ckeditor5-build-classic" ; function MyUploadAdapterPlugin ( editor ) ( editor.plugins.get("FileRepository" ).createUploadAdapter = function ( loader ) ( // ... ); ) // Load the custom upload adapter as a plugin of the editor. ClassicEditor .create(document .querySelector("#editor" ), ( extraPlugins : [ MyUploadAdapterPlugin ], // ... )) .catch(error => ( console .log(error); )); Toolbar setup

In builds that contain toolbars an optimal default configuration is defined for it. You may need a different toolbar arrangement, though, and this can be achieved through configuration.

Each editor may have a different toolbar configuration scheme, so it is recommended to check its documentation. In any case, the following example may give you a general idea:

ClassicEditor .create(document .querySelector("#editor" ), ( toolbar : [ "bold" , "italic" , "link" ] )) .catch(error => ( console .log(error); ));

The above is a strict UI-related configuration. Removing a toolbar item does not remove the feature from the editor internals. If your goal with the toolbar configuration is to remove features, the right solution is to also remove their respective plugins. Check above for more information.

Listing available items

You can use the following snippet to retrieve all toolbar items available in your editor:

Array .from(editor.ui.componentFactory.names());

I used BUEditor on my website - a simple, convenient editor, but it is not very convenient for users. I often thought about installing CKEditor, but it seemed like some kind of monster to me, but in reality everything turned out to be not so scary.

Read how to install the module.

After connecting through your module, on the admin/config/content/ckeditor/edit/profile_assignment page in the tab APPEARANCE OF THE EDITOR, In chapter Plugins An activation checkbox will appear. Turn on, save, check.

3. Inserting links. Out of the box, the link insertion dialog box contains a bunch of unnecessary and unclear stuff. We replace it with the Simple link plugin. How to install, see step 2. Connect (see point 1):

Config.extraPlugins = "SimpleLink";

A new plugin icon (button) will also appear.

4. Inserting images. Here everything is the same as with links; you can install the Simple Image plugin to insert images via links.

Config.extraPlugins = "SimpleImage";

Or upload images using the One Click Upload module. . Read more. I settled on the second method, although I used both in BUEditor.

The only thing I want to add is that the Enhanced Image plugin requires two more plugins Widget and Lineutils.

I couldn’t understand why the plugin didn’t start until I looked at the log

5. Appearance. The Moono skin is used by default, but I wanted to bring the appearance to the look of BUEditor.

this is what BUEditor looked like

7. Placeholder. To add a placeholder, install the plugin (see point 2) Configuration Helper. Connect (see point 1):

Config.extraPlugins = "confighelper"; config.placeholder = "Our text"; // текст нашего placeholder !}

8. Smileys. The Insert Smiley plugin is responsible for smiles in CKEditor; it is included in the standard package - Full Package.

This is what the smileys look like out of the box:

To replace them with your own, you need to specify the path to the folder with images smiley_path in the config (see step 1):

Config.smiley_path = "/sites/default/files/smileys/";

Enter the names of the files (images) that will be displayed smiley_images :

Config.smiley_images = ["smile_1.png","smile_2.png"];

And description (hover description) smiley_descriptions

Config.smiley_descriptions = ["description-1", "description-2"];

You can also specify how many columns to display smileys in (default: 8) smiley_columns

Config.smiley_columns = 6;

Here's what I got

9. Browser spell checking. As UksusoFF wrote in CKEditor, browser spell checking is disabled. In order to disable this disabling (a bit of a tautology), you need to write in the config:

Config.disableNativeSpellChecker = false;

10. Context menu. In CKEditor, when you press RMB, a context menu opens, not the native browser menu

Download options

There are several options to download CKEditor 5 builds:

After downloading the editor jump to the Basic API guide to see how to create editors.

CDN

Builds can be loaded inside pages directly from , which is optimized for worldwide super fast content delivery. When using CDN no download is actually needed.

npm

All builds are released on npm. Use this search link to view all official build packages available in npm.

Installing a build with npm is as simple as calling one of the following commands in your project:

Npm install --save @ckeditor/ckeditor5-build-classic # Or: npm install --save @ckeditor/ckeditor5-build-inline # Or: npm install --save @ckeditor/ckeditor5-build-balloon # Or: npm install --save @ckeditor/ckeditor5-build-balloon-block # Or: npm install --save @ckeditor/ckeditor5-build-decoupled-document

CKEditor will then be available at node_modules/@ckeditor/ckeditor5-build-/build/ckeditor.js . It can also be imported directly to your code by require("@ckeditor/ckeditor5-build-") .

Zip download

Go to the and download your preferred build. For example, you may download the ckeditor5-build-classic-1.0.0.zip file for the Classic editor build.

Extract the .zip file into a dedicated directory inside your project. It is recommended to include the editor version in the directory name to ensure proper cache invalidation once a new version of CKEditor is installed.

Included files

• ckeditor.js – The ready-to-use editor bundle, containing the editor and all plugins.
• ckeditor.js.map – The source map for the editor bundle.
• translations/ – The editor UI translations (see Setting UI language).
• README.md and LICENSE.md

Loading the API

After downloading and installing a CKEditor 5 build in your application, it is time to make the editor API available in your pages. For that purpose, it is enough to load the API entry point script:

Once the CKEditor script is loaded, you can