Fixing Non Functional Modules for Font, Font Size, Font Color and Font Highlights for CKEditor in Drupal 8

Submitted by D2D on Fri, 10/04/2019 - 16:53

It seems that every time I build a new site the first problem I run into is that when I specify that I want all of the available editing buttons in CKEditor to be active in Full HTML, the editor disappears as soon as I try to use the Full HTML feature to generate any content.

In the past I have been able to find a patch and manually apply it.  I am not that hot in PHP, but the syntax of the patch is easy enough to decode.  The other solution that worked when I was working in my demo account was to copy the module from a working site.

Before I go any farther, I want to point out that the problem is in the module, not the javascript plugin for CKEditor.

I was working locally this time and capturing what I had done before would be cumbersome, so I did some more poking around.  I found a response from Wim Leers (a prime mover in the Drupal community) in a Drupal forum at   https://www.drupal.org/project/drupal/issues/2758579 .  I said some bad words reading the first part of what Mr. Leers said, but I kept reading, and at the end I found the statement:

“So, both the before and after listed in #2729087: Path to plugin is incorrect unless base path is "/" are wrong. Because both have a leading slash, and that means it's not Drupal root-relative; it's relative to the actual root of the file system. What you need, is libraries/a/b/c/file.js.”

I read it again slowly and realized that what I highighlighted was the enlightenment that I needed.

The bottom line is that in the “ckeditor_font” module the section

 

/**

   * {@inheritdoc}

   */

  public function getFile() {

    // Make sure that the path to the plugin.js matches the file structure of

    // the CKEditor plugin you are implementing.

   $path = '/libraries/font';

   return $path . '/plugin.js';

  }

 

has a “/” where there shouldn’t be one.  The section should be

 

/**

   * {@inheritdoc}

   */

  public function getFile() {

    // Make sure that the path to the plugin.js matches the file structure of

    // the CKEditor plugin you are implementing.

   $path = 'libraries/font';

   return $path . '/plugin.js';

  }

 

Likewise, the colorbutton module section

 

/**

   * Get path to library folder.

   */

  public function getLibraryPath() {

    $path = '/libraries/colorbutton';

    if (\Drupal::moduleHandler()->moduleExists('libraries')) {

      $path = libraries_get_path('colorbutton');

    }

 

    return $path;

  }

 

should be

 

/**

   * Get path to library folder.

   */

  public function getLibraryPath() {

    $path = 'libraries/colorbutton';

    if (\Drupal::moduleHandler()->moduleExists('libraries')) {

      $path = libraries_get_path('colorbutton');

    }

 

    return $path;

  }

 

The site I am working on now has a working CKEditor, and I have a permanent fix for this problem.