Enhancing CKEditor in Drupal 8

Enhancing CKEditor in Drupal 8

In Drupal 8, we have CKEditor installed by default as the primary content editor. However, it is scaled down version and lacking a lot of the bells and whistles that many CMSs offer out of the box.

So I’ll show you what modules to install to get it up a Wordpress-level editor. Whoops, I said the “W”-word, but to be honest the Wordpress content editing interface is really nice and people find it really easy to use. Its management of media elements like images and videos is excellent. But we can get there with Drupal too, it just takes some modules and ckeditor add-ons to get the job done.

Where Drupal 8 surpasses Wordpress’s editor is in its ability to configure options and permissions for each feature you include in your CKEditor. This is insanely powerful and I haven’t seen any other CMSs with this capability.

Changing CKEditor Settings in Drupal 8

I’ll be referencing the CKEditor’s config pages a lot, so here’s a quick overview for how to get there. Your CKEditor settings are located in Text Formats and editors on your Configuration page, so go to http://yoursite/admin/config/content/formats. Then you can click on the format/editor that you want to change.

Each text format can have separate CKEditor settings. So you can assign less CKeditor functionality to lower permissioned users, etc.

Linking to Content

Aside from formatting content, the most important thing people will want to do is create links. Out of the box, linking to content is a bit mysterious. When you click the “Link” button, you are faced with a URL field. No hints or clues to what’s acceptable to type in. No autofill either. So there are a few helper modules that will make it easier to set your links.

In Drupal 7, we had two main options, Ckeditor Link and Linkit. Linkit is still present in Drupal 8, but Ckeditor Link was changed to CKEditor Entity Link.

Option 1: CKEditor Entity Link

Once installed, go to admin/config/content/ckeditor_entity_link and configure what types of content you want to autofill when someone starts typing a link. Then in your Text format and editor settings, you’ll have a new Link icon that you can add to your toolbar.

Now when you edit content, the new link button will let you start typing a page name and automatically autofill and link it for you.

Option 2: Linkit

Once you install Linkit, you have to add a profile first - admin/config/content/linkit.

After you add a profile, you then add Matchers, which are essentially the available entities you want to autofill when someone starts typing a link. What this does a bit nicer than CKeditor Entity Link is it lets you give custom (meaningful) names to the available content types, so end users aren’t left scratching their heads asking, “What’s an entity”. You also have much more flexibility with Linkit in terms of permissions and offering different profiles for different user roles.

Now head to over your Text format and editor settings, where you will now see a Link icon that you can add to your toolbar. An additional setting below lets you select the Linkit Profile you just created.

Note: as of version 8.x-5x, there is no longer a separate Link Icon, it now integrates into the default Link button. :)

What about Link Attributes?

To get link attributes, like Title, Class, Target, Rel, and ID, we need to add the D8 Editor Advanced link module. This will give you those additional options for your links.

This module works nicely with Linkit 8.x-5x.

References:

CKEditor Entity Link - https://www.drupal.org/project/ckeditor_entity_link
Linkit - https://www.drupal.org/project/linkit
D8 Editor Advanced link - https://www.drupal.org/project/editor_advanced_link

Uploading Images and Files

The second most used feature of an html editor is adding images and files. By default, you can only upload images into your CKEditor edit window.

Luckily there are some great go-to modules that will let you upload and manage multiple types of files.

Option 1: D8 Editor File Upload

The most basic way to enable basic file uploads (not just for images), is to install the D8 Editor File upload module.

Once installed, you will need to add the new File icon (looks like a paperclip?) to your CK toolbar on the Text format and editor settings page. Then you can configure the allowed filetypes and upload directory.

On your content editing page, you can either highlight text or not, then click the File icon. Upload your file and it will either automatically link it to the text you selected or make its own filename link in your content edit window.

Option 2: IMCE File Manager

This is a popular and free file manager for Drupal and it plugs right into your CKEditor. IMCE makes it easy to upload and organize files.

Upon installation, review the settings page at /admin/config/media/imce – as you can see it can be set up differently for various roles.

When editing a role, I like to have a special setup for my files organization. Clients will haphazardly upload files anywhere, so I try to add a little organization to it all. That way we don’t end up with a million miscellaneous files sitting in the base /sites/default/files/ directory.

Here’s my setup for IMCE, you don’t have to use it, but it works great for me. And it keeps my /sites/default/files/ directory easy to look at.

I create an “assets” folder inside /sites/default/files. Then I create 3 base folders inside of an “assets” folder for “images”, “files”, and “media”. That way the client will know to put the image in “images”, PDFs in “files”, and video files in “media”.

I also encourage clients to make new subfolders inside of the images directory to keep related images together. For example, if you have a huge blog post with lots of images, make a separate folder for them so they don’t get mixed in with other images. Again, you don’t have to do this, but I like to see clean and organized file directories - I’m OCD like that.

With IMCE setup, edit your CK toolbar on the Text format and editor settings page. You’ll see a new Image icon is available. Remove the default Drupal Image icon and slide the new one down in its place.

Now when editing content, you can click the Image icon and the IMCE file manager will appear!

What's new in IMCE for Drupal 8?

IMCE Mkdir is now built-in, so you can add new folders by default.
You can upload multiple files at once.

What’s Missing for IMCE in D8?

In Drupal 7, we had IMCE Crop, it’s a great little built-in tool for cropping images in the file manager window. Also, IMCE Rotate, which lets you rotate images. Together they almost get you to WordPress-level image editing. Neither are ready in Drupal 8 yet.

Also in Drupal 7, we had Drag and Drop upload functionality via the IMCE plupload module, this made it really easy to upload lots of files into IMCE at one time. Plupload is currently available for Drupal 8, but integration with IMCE is not.

Option 3: elFinder File Manager

I'm really looking forward to elFinder (I use a Spanish accent when saying "el Finder"). It looks great and the demo feels like a next-gen IMCE but isn’t ready yet. I’ll update this post once the Drupal 8 version is working.

Option 4: Drupal 8 Media Module

The Drupal 8 Media initiative is an effort to make media handling better within Drupal. The D8 Media module itself is essentially a "glue" module combining the functionality of about 20 modules and 6 libraries. It's still in development, but you can track its progress here.

It will plug in to your CKEditor via the Entity Embed module and you will get a file browser as well via the Entity Browser module and File entity browser. Some other notable features include, drag and drop uploading, cropping, and slick carousels. What's also nice about this solution is that it will give you ultimate configuration and flexibility over the file management process. If you want to give the Media module a shot in its current state, you can grab it on Github, Once Media is ready for primetime, I'll do a follow-up post to showcase it in more detail.

Here is what Road Map statement:

"The Media module will be a vastly different module for Drupal 8. Many of the responsibilities and code that was contained in Media is being split into separate components. For example, the Media Browser functionality is being developed into the Entity Browser module and embedding media in WYSIWYG is being developed into the Entity Embed module. For D8, the Media module will basically be what was considered a "Feature module" in D7: prepackaged configuration, and maybe some code and styling to wrap everything in a nice UI. It will assume that media matches up with a corresponding file entity in Drupal."

References:

D8 Editor File upload - https://www.drupal.org/project/editor_file
IMCE – https://www.drupal.org/project/imce
elFinder file manager - https://www.drupal.org/project/elfinder
Drupal 8 Media Roadmap - https://www.drupal.org/node/2595163
Drupal 8 Media Status - http://drupal-media.github.io/d8-status-update/#/
Drupal Media Initiative - http://www.drupalmedia.org/

Bonus: Image Captions

New in Drupal 8, we have Image Captions that are easily configured and movable within the editor window. So you don’t have to worry about accidentally disconnecting the caption from the image. This is a feature that former Wordpress users will enjoy having back in their toolkit.

Drupal 8 Captions

Custom Styles

You may or may not remember that in Drupal 7 you had to create a separate ckeditor.styles.js file within your theme to get the Styles dropdown to reflect your own custom css class selection. Well, in Drupal 8, it is SO MUCH EASIER!!!

On your editor’s settings page under Toolbar configuration, drag the “Styles” drop menu button down to your toolbar. Then below, you can add your classes. You need to specify the element, the class for that element, and then give it a name. So “a.btn|Button”. Be sure all your classes are present in your theme’s stylesheet.

Once you add your classes, they will be available on your edit pages. So Easy.

Ckeditor Templates

Well, not for Drupal 8 yet, but it’s in progress. In Drupal 7, the Wysiwyg API template plugin allows you to set up preconfigured bits of code that your clients can insert and modify. This works great for prebuilding Bootstrap Rows and Columns.

I’ll update this post once the Drupal 8 version is working. In the meantime, here is a video I made to show you how the Drupal 7 Version works. https://www.youtube.com/watch?v=2xIrMvVFdXE

Other Helpful Modules

The amazing folks in the Drupal community are constantly building new add-on modules for CKEditor in Drupal 8. Here are some of my favorites so far…

CKEditor Upload Image
I wish this was called Drag and Drop uploads because this is exactly what it does. You can drag images right into your CKEditor window. Amazing.
https://www.drupal.org/project/ckeditor_uploadimage

CKEditor Media Embed Plugin
For a simple way to add embedded media like Youtube videos, then try this. Plus it supports auto-embedding, so if you simply paste a Youtube video URL into your edit window, it automatically detects and converts it to the proper embed code!
https://www.drupal.org/project/ckeditor_media_embed

CKEditor Wordcount
Great for bloggers and SEOs who need to keep track of word counts while typing. This is a feature that Wordpress has had forever, but this surpasses Wordpress by giving us lots of configurable options.
https://www.drupal.org/project/ckwordcount

CKEditor Font Size and Family
If you were wondering where your font size and font family dropdowns when, then here you go. They are in a separate module now. It’s probably not good practice to leave this in because some clients think retyping all their pages in purple Comic Sans will look great. Oh and don’t forget the Color select button plugin.
https://www.drupal.org/project/ckeditor_font
https://www.drupal.org/project/colorbutton

CKEditor Anchor Link
If you need to use Anchor links in your content, then just add this.
https://www.drupal.org/project/anchor_link

And more…
https://www.drupal.org/documentation/modules/ckeditor/contrib

Adding Custom Ckeditor Add-ons

Aside from the CKEditor add-ons you can find on drupal.org, there is actually a thriving community over at http://ckeditor.com/ and you can find add-ons galore at http://ckeditor.com/addons/plugins/all.

Some are free, but for some you have to pay. Getting add-ons to work with Drupal 8 is a little difficult... you have to build a module.

New to Drupal 8, is a ckeditor api that lets you create your own integrations with CKEditor’s vast library of skins and add-ons.

Here are a few resources to dig into if you want to learn more and start making your own CKEditor add-on modules:

API Docs: https://www.drupal.org/developing/api/8/ckeditor
Tutorial: http://activelamp.com/blog/drupal/drupal8-ckeditor-plugin/
Example Module: https://www.drupal.org/sandbox/alex43210/2427449

Good luck with your CKEditor setups. If you come across any great add-ons, please leave a note in the comments below.

About the Author

Bob Kruse is the founder of Drupal Aid and a Drupal fanatic since 2008. He is also the creator of Cart Craze, an ecommerce website design gallery and Sick Journal, an online tool for keeping track of your family's health, sicknesses, and medications.