Ckeditor installation and configuration. Installing the visual editor CKEditor

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, meaning it can be modified as you wish. 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(); ));

Hello CKEditor

function setValue() ( $("#editor1").val($("input#val").val()); ) Create Editors with jQuery

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.

// 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

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());