Computer keyboard keys spilled on the floor

CKEditor in Drupal 8 Configuring and adding new options pt. I 

What is the CKEditor?

It is one of many visual HTML editors.
It allows you to easily enter text using an interface that resembles such editors as OpenOffice. 
It makes text formatting easier through a set of buttons that serve, among others, for things such as:

  • changing the font,
  • text size,
  • adding an image,
  • making lists,
  • and many others.

The CKEditor is the default text editor in the Drupal 8 system.
You do not need to add any libraries or modules in order to use it.

 Picture shows the CKEditor enabled in the text adding form
Enabled editor in the contend adding form

By default, the editor is enabled for two text input formats:

  • basic HTML,
  • full HTML.

They differ in the number of text formatting options enabled. You will notice this when you change the format when adding content.
The text formatting options and the visibility of the editor depending on the selected filter or user's role are fully configurable.
The editor settings are on the page
Configuration → Content Authoring → Text formats and editors

 The path to editor options as mentioned above and some of the options that can be changed

 

By default, any logged-in user can use the CKEditor by enabling the "Basic HTML" filter.
The "Full HTML" filter is reserved only for users that are administrators of the page.
With each editor-enabled filter, you have the option of configuring tool options.
Below are the options for "Basic HTML".

 

Configuring of basic htm view
 

You can see the "Text editor" option here, which enables or disables an extensive editor for this text format.
In the "Roles" section, defined are the roles of users that can use this format.
The "TOOLBAR CONFIGURATION" section is responsible for enabling and disabling options in the CKEditor.
"Available buttons" indicate which buttons are available for use in the CKEditor (except those already added).
"Active toolbar" is a section with enabled buttons.
By using a simple drag-and-drop method, you can enable additional options. Just move the button from the "Available buttons" section to the "Active toolbar". Now you just have to save the settings.

 
Using the editor

Add a new article to the page.
Content -> Add Content -> Article
In the text field, you should be able to see the text editor for the "Basic HTML" data format.

Some buttons of basic html editor visible  ckeditor enabled
 

If you change the text format to "Full HTML", then you will probably see more editor options.
In addition to standard options, such as boldface or italics, you also have the option of inserting an image by adding it into the page's server.
 

Extended editor with an option of uploading images opened.

Below is an example content with a text, a link, and an image.
In the editor, you can immediately see how it is going to look like after the content is saved. (Hence the name of such editors – WYSIWYG – What You See Is What You Get)
 

Example of text, link and picture  a sport car in this case - created with CKEditor.

 

Each button generates an HTML code that, once the content is saved, is put on the page.
The above example generated something like this:

 

<p><em><strong>This is a sample text. </strong></em><a href="https://drupal.org">With link.&nbsp;</a></p>

<p>And image</p>
<img alt="img" data-align="center" data-entity-type="file" data-entity-uuid="bae745ac-f47d-4426-84cd-9d319f8403f1" src="/sites/default/files/inline-images/DBten-web-news.jpg" />
<p>&nbsp;</p>

 

Custom text field with the CKEditor.

In Drupal, you can easily create new content types and add fields to them.
On the example of the existing content type – the Article, it will show how to add a field that can automatically use the extended text editor.
The page Structure -> Content Types
 

Defined Content Types in editor. Red arrow marks a button that brings an option to manage fields

 

By clicking on "Manage fields", you can add your own fields for the chosen type of content.

 

A button that lets the user to add new field types.

 
Choose Text (formatted, long) as the field type 
It adds a multiline text box.

 

Adding a new field. Option described above is set

 
After saving all the options, you will notice that the editor is automatically enabled for this field.

And that is it, just have to save the field to be able to use it.

A new field is visible to the user and ready tu use
 

Extending the CKEditor's capabilities in Drupal 8

There are many modules that introduce new functionalities to the CKEditor.
Some of these are described below, and here is the whole list of modules extending the CKEditor.

Editor Advanced Link
An extensive dialogue box for creating links. 
Allows you to define attributes such as:

  • title
  • class
  • id
  • target

Editor File Upload

It allows you to directly upload files and link to them in the text.

LinkIt
Provides a simple interface for creating internal and external links. You can link internally, e.g. through an autocomplete field that searches for links based on the titles of content added to the system.
 

Need a team of Drupal and PHP web development experts?

Contact us now!