Customizing WYSIWYG editor settings

Submitted by on
A screenshot of CKEditor being used to edit some example content.

The WYSIWYG module abstracts the integration and customization of client-side content editors. It enables you to install one or more supported editors, such as CKEditor or TinyMCE, and configure them per text format.

WYSIWYG provides a number of standard editor options including whether the editor is enabled by default, where the editor toolbar should be located and which CSS file should be used to style the editor's contents. Although these options are quite extensive, they are not comprehensive (mostly do to the fact that different editors suport different options). Most editors have a host of variables that can be tweaked to customize everything from blocked keystrokes to button colors. Luckily, WYSIWYG includes a hook specifically designed to modify these settings, hook_wysiwyg_editor_settings_alter().

Altering non-standard editor settings

In order to alter non-standard editor options, a custom module can implement hook_wysiwyg_editor_settings_alter(). The hook has has two parameters, $settings and $context, which make it simple to change certain editor options depending on the situation.

  • $context - an array of information about the WYSIWYG profile that's currently in use
  • $settings - an array of settings to pass to the editor

In most cases, you'll want to check $context to ensure that your custom settings are only being applied to your editor of choice.

Configuring settings for a specific editor

A common challenge with using client-side editors is properly formatting content that has been copy+pasted from another source, such as an office suite. Content taken from most word processing programs contains a variety of inline styling and HTML with can easily cause presentation issues or validation editors if it is used verbatim on your website. Luckily, most client-side editors contain a feature which allows them to automatically format copy+pasted content as plain text. Configuring this options is simple with hook_wysiwyg_editor_settings_alter():

/**
 * Implements hook_wysiwyg_editor_settings_alter().
 */
function modulename_wysiwyg_editor_settings_alter(&$settings, $context) {
  if ($context['profile']->editor == 'ckeditor') {
    $settings['forcePasteAsPlainText'] = TRUE;
  }
}

Simply implement hook_wysiwyg_editor_settings_alter() in a custom module, check $context to ensure that the settings are only being applied to your desired editor and then add the option and its value to the $settings array.

Tags: