TinyMCE - Customize alignment options

The defaults for these formatting buttons are set in TinyMCE's internals and look like this:

alignleft : [
  {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', styles : {textAlign : 'left'}},
  {selector : 'img,table', styles : {'float' : 'left'}}
],
aligncenter : [
  {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', styles : {textAlign : 'center'}},
  {selector : 'img', styles : {display : 'block', marginLeft : 'auto', marginRight : 'auto'}},
  {selector : 'table', styles : {marginLeft : 'auto', marginRight : 'auto'}}
],
alignright : [
  {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', styles : {textAlign : 'right'}},
  {selector : 'img,table', styles : {'float' : 'right'}}
],
alignfull : [
  {selector : 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', styles : {textAlign : 'justify'}}
],

You can override it via Wysiwyg module's settings hook:

function myModule_wysiwyg_editor_settings_alter(&$settings, $context) { 
  if ($context['profile']->editor == 'tinymce') {
    $settings['formats'] = array (
      'alignleft' => array('selector' => 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', 'classes' => 'leftAligned'),
      'aligncenter' => array('selector' => 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', 'classes' => 'centerAligned'),
      'alignright' => array('selector' => 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', 'classes' => 'rightAlighed'),
      'alignfull' => array('selector' => 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', 'classes' => 'fullAligned'),
    );
  }
}

This example will make TinyMCE set a class to the listed element instead of adding a float style inline. Then can easily add the default margins/styling for those classes to your main theme file. Then will still be possible to override margins etc for specific parts of the content and you can change the default styling without having to modify the nodes.

Of course, you could also make it add the margins inline, and/or keep the float/textAlign:left/right; etc inline too. Less flexible at the time you decide to change the overall design, but a possible workaround if you for some reason can't change the stylesheets.

function myModule_wysiwyg_editor_settings_alter(&$settings, $context) { 
    $settings['formats'] = array (
      'alignleft' => array(
         array('selector' => 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', 'styles' => array('textAlign' => 'left', 'marginLeft' => '1em')),
         array('selector' => 'table,img', 'styles' => array('float' => 'left', 'marginLeft' => '1em')),
      ),
      'aligncenter' => array(
        array('selector' => 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', 'styles' => array('textAlign' => 'center', 'marginLeft' => '1em', 'marginRight' => '1em')),
        array('selector' => 'img', 'styles' => array('display' => 'block', 'marginLeft' => 'auto', 'marginRight' => 'auto')),
        array('selector' => 'table', 'styles' => array('marginLeft' => 'auto', 'marginRight' => 'auto')),
      ),
      'alignright' => array(
        array('selector' => 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', 'styles' => array('textAlign' => 'right', 'marginRight' => '1em')),
        array('selector' => 'table,img', 'styles' => array('float' => 'right', 'marginRight' => '1em')),
      ),
      'alignfull' => array(
        array('selector' => 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', 'styles' => array('textAlign' => 'justify', 'margin' => '1em')),
      ),
    );
  }
}

Just note that the second example has each 'selector' => ... part in its own array, which it needs to be if you want to apply different styling depending on which element is selected when the button is clicked.

I can't seem to get this to work for some reason. I'm running TinyMCE 3.2.7 and have a module set up to hook into wysiwyg called wysiwyg_mods (very original, I know) with the following:

// $Id$

/**
* Display help and module information
* @param path which path of the site we're displaying help
* @param arg array that holds the current path as would be returned from arg() function
* @return help text for the path
*/
function wysiwyg_mods_help($path, $arg) {
  $output = '';  //declare your output variable
  switch ($path) {
    case "admin/help#wysiwyg_mods":
      $output = '<p>'.  t("Hooks into the Wysiwyg module settings to allow overrides to the default button behaviours") .'</p>';
      break;
  }
  return $output;
} // function wysiwyg_mods_help

/**
 * Implementation of hook_wysiwyg_editor_settings_alter().
 */
function wysiwyg_mods_wysiwyg_editor_settings_alter(&$settings, $context) {
  if ($context['profile']->editor == 'tinymce') {
      $settings['formats'] = array (
      'alignleft' => array('selector' => 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', 'classes' => 'leftAligned'),
      'aligncenter' => array('selector' => 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', 'classes' => 'centerAligned'),
      'alignright' => array('selector' => 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', 'classes' => 'rightAlighed'),
      'alignfull' => array('selector' => 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img', 'classes' => 'fullAligned'),
    );
  }
  
  //print highlight_string(print_r($settings,true),true); exit();
}

If I uncomment that highlight_string() line the settings are being updated and if I check the source of the page the Drupal JS settings are showing the formats being output correctly:

"formats": { 
"alignleft": { "selector": "p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img", "classes": "leftAligned" }, 
"aligncenter": { "selector": "p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img", "classes": "centerAligned" }, 
"alignright": { "selector": "p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img", "classes": "rightAlighed" }, 
"alignfull": { "selector": "p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img", "classes": "fullAligned" }
}

I've cleared the Drupal caches, cleared my browser cache and the alignment buttons are all still only adding floats and text-aligns instead of the classes. I've tried this on both a live site and on my sandbox site with a fresh install of D6.17 + Wysiwyg + TinyMCE 3.2.7 and it still didn't work.

Anyone got any ideas why it wouldn't work?