Drupal 9 CKEditor Enhancements, Tips and Tricks

Where Did Image Properties Go?

One thing you won't find in any of the lists above is a means of bringing back the extensive set of image properties available in CKEditor under Drupal 7, and there's a reason for this. The designers of Drupal 8+ want you to upload properly sized images and let Drupal handle their placement, so that they can be as responsive as possible. This is actually a good thing in retrospect, as it's going to minimize the situations where a content editor uploads a giant 3000+ pixel image and then uses the size properties to make it fit on the screen.

That said, you're probably going to want a way to float images left and right. That ability still exists and is enabled via Configuation -> Content authoring -> Text formats and editors. Modify one of your text formats and look for the "Align images" checkbox under "Enabled Filters". The explanation for the option isn't very informative, but enabling it will enable options on the CKEditor image placement pop-up to left or right align (float) the image.

You'll also want to enable "Caption images" directly below "Align images", as it provides a very useful feature for entering automatically positioned and formatted visible image captions.

Expanding CKEditor's Default Window Height

Editor's Note: All current versions of Drupal 8+ now support CKEditor's dynamic height feature, which automatically grows the height of the editor box based on the number of lines of text it contains. So, the following is no longer needed, but has been left here in case someone should still want to force the default height to be larger.

One feature lost in Drupal 8 is the ability to set the number of rows on a textarea field and have CKEditor expand to fill that space. However, you can still manually set the height of CKEditor, but you have to do it by creating a simple module. We won't go into how to write a module here, as there are plenty of tutorials out there covering this basic topic. Once you have the skeleton of a bare bones module in place, add this function to it, replacing 'xxxxxx' with the machine name of your module:

function xxxxxx_editor_js_settings_alter(array &$settings) {
foreach (array_keys($settings['editor']['formats']) as $text_format_id) {
if ($settings['editor']['formats'][$text_format_id]['editor'] === 'ckeditor') {
$settings['editor']['formats'][$text_format_id]['editorSettings']['height'] = '600px';
}
}
}

This will set your CKEditor window height to 600px tall. Just change 600 to another value if you prefer the window to he taller or shorter.

Adding a Font Size Drop-Down

While it is not recommendable to add a font selection drop down on Georgia Tech sites, many content editors want to be able to make lines of text bigger, and if you don't give them a way to do it correctly, they'll make those lines headings, which creates accessibility problems.

The easiest way to fix this is to add the CKEditor Font plugin using the CKEditor Font module. Once installed you can edit any of your text formats and add the 'S' button (for font 'S'ize) to the button bar. However, if you want to be fully accessibility compliant, you should also change the available size list from point sizes to percentages. That can be done by creating another bare bones module (see the Window Height section above) and putting the following code into it:

function xxxxxx_editor_js_settings_alter(array &$settings) {
foreach (array_keys($settings['editor']['formats']) as $text_format_id) {
if ($settings['editor']['formats'][$text_format_id]['editor'] === 'ckeditor') {
$settings['editor']['formats'][$text_format_id]['editorSettings']['fontSize_sizes'] ='80%/80%;90%/90%;Normal/100%;110%/110%;120%/120%;130%/130%;140%/140%;150%/150%';
}
}
}

Note: if you want to change both the font size menu and the window height, you can (and should) combine the code into a single function in a single module. Just add the innermost assignment line from one of the code snippets to the other snippet.

Getting CKEditor to Use Your Theme CSS

By default CKEditor uses a very basic set of CSS, so the text you create and edit won't look exactly like it will when displayed by your Drupal site's theme. However, you can tell CKEditor to use your site's CSS so that the editing experience better reflects reality.

To do this, you will need to be using a custom sub-theme. In your sub-theme's .info.yaml file, add the following lines:

ckeditor_stylesheets:
- css/fonts.css
- css/general.css

YAML is very picky about spacing, so take care to get it right: it's two blank spaces (no tabs allowed), then a dash, then one more space. Of course, replace fonts.css and general.css with whichever CSS files are needed to implement your theme's special text formatting. You can have any number of CSS lines underneath the 'ckeditor_stylesheets:' heading.

If you add this to a theme that is already active, be sure to flush all of your caches to get the change to take effect.

Printer-friendly version