Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

Changing CKEditor skins with Drupal's WYSIWYG

Parent Feed: 
undpaul

CKEditor 4.x has been out for a while now. Something I really enjoy about the new release is the new skin, for which the people at CKEditor ran a contest. The winner of the contest was Moono, but I also really like the silver skin. So today I want to show you how you can change the skin when using CKEditor 4.x in Drupal. There is an overview of skins on ckeditor.com, but there's not much there yet. Moonocolor is worth a look, but we are going to focus on silver, which you can find on Github.

I'm going to show you how it's done by writing just a few lines of code (which stBorchert wrote for me :)) and I'm also including a feature module which you can just throw into your site to get going (make sure to grab a database dump first, just in case).

Assumptions

Here's the code that goes in your custom module's .module file:

  3. /**

  4.   * Implements hook__wysiwyg_editor_settings_alter().

  5.   */

  6. function MODULENAME_wysiwyg_editor_settings_alter(&$settings, $context) {

  7.  global $base_url;

  9.   if ($context['profile']->editor == 'ckeditor') {

  10.    $skins_path = drupal_get_path('module', 'MODULENAME') . '/ckeditor/skins';

  11.    // For flexibility we use a variable to get the active skin name.

  12.    $active_skin = variable_get('MODULENAME_skin', 'silver');

  13.    // Set custom skin.

  14.     $settings['skin'] = sprintf('%s,' . '%s/%s/%s/', $active_skin, $base_url, $skins_path, $active_skin);

  15.   }

  16. }

I created a WYSIWYG feature that serves as my custom module and contains my text format, its wysiwyg settings and the silver skin. If you have WYSIWYG module and CKEditor where they belong (as stated under Assumptions) then you can just download this feature and activate it like you would any other module. I created my own text format so it doesn't interfere with the text formats you might already have on your site. The settings are identical to the Filtered HTML format. Check the .module file of the feature to see above code in action. I have included a README.txt in the feature. You have to switch to text format undpaul WYSIWYG to see the editor in the silver skin.

Download the feature

Get the feature and try it out!

Have fun and let me know what you think.

Author: 
aschiwi
Original Post: 
https://www.undpaul.de/en/blog/2013/06/14/changing-ckeditor-skins-drupals-wysiwyg

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web