More WYSIWYG Fun

Previously, I created a custom module to change the symbol set provided by CKEditor, the WYSIWYG text editor on this site. (CKEditor is an applet that shows live formatting instead in lieu of HTML). Since then, a few other flaws have come up. 

1. Spellcheck is provided by a third party, but doesn't work in Opera. Modern browsers have their own spellcheckers, which were being suppressed. 
2. CKEditor provides a few styles for theming text. There are two problems with those styles. First, they're inline styles. Second, they're ugly. 
3. CKEditor uses its own styling. Ordinary formatting such as italics and headings look okay, but styles I've defined don't show up. 

The first flaw didn't bother me, but I found a setting in CKEditor that let me disable spellcheck. Now Opera will underline misspelled words (like spellcheck and inline) for my review.

Number two was more difficult. CKEditor's settings are stored in a javascript file, but Drupal's override hook is PHP. Most of the settings used strings or booleans, which translated nicely. 

The javascript:

config.disableNativeSpellChecker = false;

Translated into PHP:

$settings['disableNativeSpellChecker'] = FALSE;

Unfortunately, the styles setting used an dictionary in a list, instead of a simple data type:

config.stylesSet = [
{ name : 'Strong Emphasis', element : 'strong' },
{ name : 'Emphasis', element : 'em' }, ... ];

I don't know if PHP has a dictionary class, or if the hook even supports it. Fortunately, CKEditor docs suggest a workaround. The editor supports adding config files. I wrote the styles in javascript, using CKEditors format, then added the file in the customization hook:

$settings['customConfig'] = 'http://nitkin.net/sites/all/modules/wysiwyg_custom/styles.js';

Using a full path isn't particularly clean, but the module doesn't need to be portable, either. 

Unfortunately, I have no fix for the third issue yet. CKEditor applies its own styles, and the screen I'm editing isn't technically a node. The CSS rules don't apply here.

For reference, here are the files currently in use:

<?php
//wysiwyg_custom.module (Drupal PHP)

function wysiwyg_custom_wysiwyg_editor_settings_alter(&$settings, &$context) {
  if($context['profile']->editor == 'ckeditor') {
    //Symbol select.
    $settings['specialChars'] = array(
    "Ω", "µ", "α", "β", "θ", "π", "«", "»", "→", "⇒", "⇔", "►", "•", "♦", //Greek & ECE
    "×", "÷", "≈", //Math
    "°", "¼", "½", "¾", //Cooking; more math
    "‘", "’", "“", "”", "…", "–", "—", "¢", "¦", //Quotes & misc. markup
    "§", "¶", "©", "®", "™", //Textual navigation & copyleft
    "·", "Æ", "‛", "„", "¬", "¯", "´",
    );

    //Spellcheck
    $settings['disableNativeSpellChecker'] = FALSE;
    $settings['browserContextMenuOnCtrl'] = TRUE;

    //Styles
    $settings['customConfig'] = '/sites/all/modules/wysiwyg_custom/styles.js';
  }
}
?>

/*
styles.js CKEditor extra config file
*/

CKEDITOR.stylesSet.add('default',[
{name:'None', element:'p'},
{name:'Code', element:'code'},
{name:'Blockquote', element:'blockquote'},
{name:'Float: left', element:'div', attributes:{'id':'floating', 'class':'content-left'}},
{name:'Float: right', element:'div', attributes:{'id':'floating', 'class': 'content-right'}}
]);

name = WYSIWYG Customization module
description = allows for editor customization, beyond what WYSIWYG allows.
core = 7.x
dependencies[] = wysiwyg