Changing CKEditor skins with Drupal's WYSIWYG
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
- You're using WYSIWYG 7.x-2.x-dev (place in sites/all/modules/contrib)
- You're using CKEditor 4.1.2 (place in sites/all/libraries)
Here's the code that goes in your custom module's .module file:
- <?php
- /**
- * Implements hook__wysiwyg_editor_settings_alter().
- */
- function MODULENAME_wysiwyg_editor_settings_alter(&$settings, $context) {
- global $base_url;
- if ($context['profile']->editor == 'ckeditor') {
- $skins_path = drupal_get_path('module', 'MODULENAME') . '/ckeditor/skins';
- // For flexibility we use a variable to get the active skin name.
- $active_skin = variable_get('MODULENAME_skin', 'silver');
- // Set custom skin.
- $settings['skin'] = sprintf('%s,' . '%s/%s/%s/', $active_skin, $base_url, $skins_path, $active_skin);
- }
- }
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.
