Content editors are always looking for ways to get more efficient and faster at creating/updating content. It can be challenging to start with a blank page. Having a predefined set of templates to begin with makes the job much easier and quicker.

Let us introduce you to the Drupal 10 CKEditor Templates module.

CKEditor is a popular rich text editor used in many content management systems, including Drupal. Currently, Drupal 10 supports CKEditor version 5 and it comes with a great user experience, it is highly customizable and extensible. CKEditor offers many plugins to extend its functionality. One such plugin in focus today is 

“Content Templates” which is extremely useful for content creators and editors. 

The CKEditor Templates module is an extension/plugin for the CKEditor WYSIWYG editor in Drupal, that allows you to easily insert pre-defined templates or content snippets into your content, speeding up the writing process. It is also very handy when you're working in a team and everyone requires to comply with a similar format or template. For example, you can have a template for a formal letter, a simple document with a title and text along with an image on the right, a rich table or a sample resume template.

We are grateful for the Drupal community contributors who created this wonderful module!

How to Install the CKEditor Templates Module

The installation of the Drupal 10 CKEditor Templates module is the same as any other Drupal module. It has dependencies on the CKEditor template plugin. If the plugin is needed, add it to the libraries folder at the root of the Drupal setup.

After installing and adding the library, enable the module. Now, two main steps need to be followed to work with the module:

1. Configure CKEditor to include the CKEditor Templates button in the toolbar.
2. Create and manage templates in the template library.

Configure CKEditor to include the CKEditor Template Button

1. Configuration -> Content Authoring -> Text formats and editors Now, all the text formats will be listed.
2. Configure any text format that needs the Template insert option (using full HTML in this tutorial) and move the 'Templates' icon from "Available buttons" to "Active Toolbar."

Create and Manage Templates in the Template Library

1. Configuration -> Content Authoring -> CKEditor Templates
   Now, the previously created templates will also be listed.
2. Click on the ‘Add CKEditor template’ button to add a new template. It will now redirect to the template page and the following fields must be filled.

• Title: Title of Template
• Description: Description of the Template
• Image path for template: Preview the image of the Template. This can be added manually. Also, it will auto-fill when uploading an image using the next field ‘Image path for this template’.
• Image path for this template: This will upload the image and the ‘Image path for template’ field will be filled with the path of the uploaded image.
• Body: The predefined template’s HTML code will be added in this field which will be inserted in CKEditor when this template is added.

Inserting the Template into CKEditor

Now that you have configured the templates, let's look at how to add them to your CKEditor.

1. Add/Edit any node, block, or other component with CKEditor.
2. Click on the "Template" icon (resembling the attached screenshot) to insert the template.
3. A popup with a list of templates will appear.
4. Click on the template you want to insert in CKEditor, and the template will be added.
5. Make changes in content and save the component.

Final Thoughts

The Drupal 10 CKEditor Templates module enhances content creation by providing content editors with a user-friendly platform to insert pre-defined templates or snippets effortlessly. This module integrates seamlessly with the CKEditor WYSIWYG editor in Drupal, making the process more efficient and enjoyable.

As a focused Drupal development company, our experts continually strive to improve the end-user experience. If you’re looking for any Drupal development services, please do not hesitate to reach out to us. We’re here to assist you.