CKEditor templates

Have you ever found yourself wanting to get more out of your HTML editor? Do you want to reuse designs from the rest of your web pages? Well, if that is the case, stay and read on.

Introduction

The drupal core comes with one of the best open source text editors: CKeditor. This text editor allows us to write good content with different options. However, sometimes, the functionalities of this HTML editor are not enough for the user.

Let's take an example: a user needs to write post entries in Drupal and for this purpose the website has implemented a specific content type, in which we find a formatted text field for the text editor. But the user also needs to easily insert predefined HTML snippets. With the default functionality of CKEditor we could not cover this need.

To satisfy it, we will make use of the CKEditor templates module, which provides a dialogue box to offer predefined content templates.

Requirements

This module needs to download the CKEditor "Templates" add-on. It can be downloaded from this page.

Installation

Download the templates and create a folder called libraries in your drupal root folder if it doesn't already exist. Unzip the previously downloaded file inside the libraries folder.

Next, install the CKEditor templates module as you would normally install a Drupal module.

Configuration

• The first thing we have to do is add the template button to the toolbar of our text editor. To do this we go to configuration > content audit > format and text editors and choose the format of the editor in which we want our button to be displayed.
• Add the templates button to the toolbar.

Template creation

For the implementation of templates the CKEditor templates module provides two ways to do this:

Option 1: HTML in JS template

In the first option we find that the html code of the fragment we want to implement must be inserted in a JS file. To do this, follow the steps below:

• Copy the ckeditor_templates.js.example file from the module templates folder to the theme templates folder, rename it without .example and customise it.
• Edit the image path. This path is used by the module to render the images of each defined template, in the dialog box.

• Copy the default images found in libraries/templates/templates/images in the path we have defined above: /themes/custom/da_vinci/images/ckeditor/. These images correspond to example templates provided with the module.

If we want to define our own templates, we just need to go to the ckeditor_templates.js file and write the structure of the HTML snippet we want to implement.

We can also create an image to guide the user and upload it to the images folder we created earlier.

Option 2: CKEditor Templates User Interface module

The other option we have is to install the CKEditor Templates User Interface module, this module allows us to create templates for the text editor in a more visual way and through the Drupal interface.

To do this, go to configuration > content audit > CKEditor templates.

We add the title, description, image and body that our template will contain. In these fields the title and body are required.

Once created, the user can make use of this template in the CKEditor dialogue box.

There is no better or worse way to implement such templates, what would depend a lot on the user's familiarity with the HTML structure to be implemented to choose one way or another.