Drupal 8 CK Editor Enhancements

Drupal Version

Tags

Drupal 8 includes the popular What You See is What You Get (WYSIWYG) editor CKEditor, but out of the box it only provides the 'minimal' configuration, which is missing a lot of the features you may have come to enjoy when implementing CKEditor in Drupal 7 using the CKEditor module and the full version of CKEditor.

Fortunately, there are a few easy ways to make CKEditor much more useful.  To start, the Drupal core team has assembled a list of add-on modules that implement popular CKEditor plugins, which makes it very easy to add official CKEditor features to your site:

  CK Editor Modules and Plugins | Drupal.org

    Important:  Most if not all of these modules do not include the actual plugin.  You will need to go to ckeditor.com and download the matching plugin, then create a 'libraries' directory at the root of your Drupal 8 installation and unpack the plugin into that directory.  For example, for the 'font' plugin, you should end up with a 'libraries/font' directory, which would have a file named 'plugin.js' in it, along with any other supporting files for the plugin.

    When downloading a plugin, you will need the version that works with CKEditor 4.5.1, as that is what comes with Drupal 8.2.x.  When you eventually upgrade to Drupal 8.3 or later, re-check the version of CKEditor included, as when they update to CKEditor 4.6, you'll have to update all of the extra plugins that you are using.

    In addition to the plugin based modules referenced above, the following special purpose Drupal 8 / CK Editor modules may also be of interest:

    • Editor Advanced Link - Adds additional properties (title, class, id, target, rel) to the Link properties box
    • Editor File - Adds the ability to upload files directly into CKEditor (just like you can now do with Images)

    Here are a few more tips and tricks for enhancing CKEditor:

    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

    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 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.