CKEditor in Drupal 8 Configuring new options pt. I
What is the CKEditor?
CKEditor 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 Drupal 8. You don't need to add any libraries or modules in order to use it. CKEditor is great because it empowers the editors. Thanks to it, they can manage the markup of their drupal websites and do not need to ask their drupal agency to do it for them.
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
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 you will find the options for "Basic HTML".
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.
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.
Below is an example of 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).
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. </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> </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
By clicking on "Manage fields", you can add your own fields for the chosen type of content.
Choose Text (formatted, long) as the field type
It adds a multiline text box.
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.
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
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.
