CKEditor - WYSIWYG HTML editor

13 Aug 2020

CKEditor makes our lives easier

CKEditor 4 - is a WYSIWYG article or basic page editor. It allows you to perform flexible text formatting, including working with styles, lists, links, graphic images, Instagram posts, insert videos etc. The text editor has a wide variety of functions and formatting plugins. CKEditor is very similar to MS Word, which makes using it more comfortable. The part of our Drupal web services is installing and configuring this module. Since we cannot use the well-known Word or Google Speed Sheets for content management, CKEditor is an excellent helping tool.

CKEditor vs. CKEditor and WYSIWYG

Numerous articles or guidance tell us about the benefits of using CKEditor. However, we need to be informed about the difference between the alone CKEditor version and CKEditor + WYSIWYG module. This information is applicable only for Drupal 7.

Be careful while downloading both modules, the correct link for Drupal is: http://drupal.org/project/ckeditor, accordingly the appropriate folder is sites/all/modules. In case you accidentally downloaded CKEditor from its official website, then WYSIWYG module cannot be used in a pair. You must enable one of the modules to avoid conflicts.

Probably, you are about to use both text editors for the different fields or even pages. You have to install the WYSIWYG module. Respectively install on the extra module to the libraries' folder. If the users report the problem, you must disable one of the modules and use only one.

CKEditor Drupal 8

Let us announce. Drupal 8 core already contains the CKeditor integrated into the modules' system. Welcome to get to know more about Drupal CKEditor here.

Many people choose the CKEditor as the most appropriate tool, which features powerful functionality and numerous possible settings. In this case, the most natural step seems to be the need to download and install the appropriate module, which makes it possible to connect CKEditor to Drupal, as well as the editor itself, without which this module will not work. To be honest, it’s the wrong way.

If you disable its display by default, then vice versa - when creating new types of materials or new blocks, you will have to register their field IDs in the list of allowed.
If you require to extend the control panel by the other tools, it can be done only through the modifying of a configuration file.
Setting up a different editor toolbar requires creating its couple of profiles, the setting of which is also not entirely trivial.

Installing of the CKEditor

  1. Browse the CKEditor website, then select “Full version” and download the archive.
  2. Through the FTP go to /sites/all/libraries (if it has not existed, just create the new one) and drop our CKEditor folder from the archive there.
  3. Download, install and enable the CKEditor module. Overview of the Quick Start Guide to be more convenient with the module configuration. In case of any questions or issues appeared to check the troubleshooting to get answers and solutions.

By the way, CKEditor documentation contains the clarification on how to adjust the Advanced Content Filter, in case you are using CKEditor 4.1 +.

CKEditor features

The interface is user-friendly. Simultaneously, it's compatible with all browsers (Firefox, IE, Opera, Chrome, and Safari).

CKEditor module setting contains the possibility to change theme and language.

Copy and paste the text.

Insert text from Word while preserving formatting.

It contains the Preview button.

Search and replace text.

Autosave - Automatically save content temporarily (for example, when a login session expires). And after saving the content, you can restore it after rebooting the editor.

AutoCorrect feature. For example: AutoCorrect a character sequence (e.g. (c)> ©) Auto format serial number (e.g. 1st> 1st (superscript) Convert hyphen to dash (-> -) and so on.

Insert forms, buttons, quotes.

Cancel formatting.

Insert tables and lists.

Code Editor (Source) with syntax highlighting.

Insert Font Awesome Icons.

Bootstrap 3 markup tools, etc.

The insert the images through the built-in OpenCart 3 Filemanager.

Spell check with browser tools.

Useful links in one place:

A shortlist of tools available:

Switch to HTML mode
Print and article template selection
Work with the clipboard (cut, copy, paste, cancel)
Search and Replace
Forms creating
Insert spoilers (collapsible text) and page breaks
Text style changing
Paragraph formatting
Link Insertion
Insert media content from third-party sites
Insert Objects
Additional viewing options (display blocks and expand)
Select text color and background
Spell Checking
Formatting style selection
Select paragraph formatting

 

Resent module updates

  • CKEditor Full 4.14 is the latest stable version available.
  • In the new version of the module, there is added the ability to register editor configurations directly in the module settings in the admin panel. You can easily configure any editor settings by yourself. See the available configurations on the website.

Contact us at any time!

Comments

An
Anonymous