In TinyMCE, the advance style settings just injects span tags with the class name. Now what I would want is to make the classes specific to block elements, like H1,H2 and so on.. I don't know any other way to do it but this :

 //after all the js files are loaded insert this in your page.tpl.php:
 <script type='text/javascript'>
  jQuery.extend(Drupal.settings.wysiwyg.configs.tinymce.format2 ,
   {style_formats :
       [
        {title : 'Heading 1 - Green',   block : 'h1', classes : 'goape-green'},
        {title : 'Heading 2 - Orange', block : 'h1', classes : 'goape-orange'}
      ]
    });
 </script>
  

What this does is to extend the Drupal object and inject some additional settings. Now for any selected text and you applied this format it will automatically convert it to the appropriate element...

THanks

Comments

smk-ka’s picture

As long as WYSIWYG API is rather limited in functionality, you could also put the following code in a custom.module:

/**
 * Implementation of hook_wysiwyg_editor_settings_alter().
 */
function custom_wysiwyg_editor_settings_alter(&$settings, $context) {
  if ($context['profile']->editor == 'tinymce') {
    // Add custom styles for the styleselect plugin.
    $settings['style_formats'] = array(
      array('title' => 'Heading highlighted', 'inline' => 'span', 'classes' => 'highlight'),
      array('title' => 'First image right aligned', 'selector' => 'img', 'classes' => 'teaser-image'),
      // etc.
    );
  }
}

-Stefan

alansch’s picture

As long as you're tossing together a custom module to inject additional editor configuration information, it's quite easy to use Drupal's hook_form_FORM_ID_alter() functionality to add or modify (or even remove entirely) elements of WYSIWYG's configuration form. Once you've wandered this far afield, it's also quite easy to add your own function to either pre-process, post-process or completely replace WYSIWYG's form submit function. Article drupal.org/node/637500 talks about this.

For example, if you want to change the css_path entry element to a textarea instead of a textbox, the following code fragment will achieve that. The fragment also specifies an additional submit function that will be called. This fragment uses array_unshift to put the added submit function at the head of the array so it will be called first. Alternatively, array_push (or simply assigning to $form['#submit'][]) will add the new function to the end of the array so it will be called last. And a straight assignment to $form['#submit;] will replace WYSIWYG's form submit function - as well as any additional submit functions already in place - with one of your own devising.

Note that the calls to drupal_set_message() are simply for trace printing and should be omitted from the production version of the module.

Note also that hook_form_alter() can be used here, as long as you remember to test the value of the $form_id parameter to make sure you're hijacking the right form.

/**
* Implements hook_form_FORM_ID_alter().
*/
function yourmodule_form_wysiwyg_profile_form_alter(&$form, &$form_state, $form_id) {
drupal_set_message("in function yourmodule_form_wysiwyg_profile_form_alter()");

  $form['css']['css_path']['#type'] = 'textarea';
  $form['css']['css_path']['#rows'] = '1';
  array_unshift($form['#submit'], 'yourmodule_form_submit');
}

function yourmodule_form_submit($form, &$form_state)
{
drupal_set_message("in function yourmodule_form_submit");
/*
 * perform any required operations on the submitted form data in $form_state
 */
}

Having added or modified the saved WYSIWYG editor configuration, you may need to use the hook_wysiwyg_editor_settings_alter() hook shown earlier in this thread to actually pass your new configuration elements to the editor as it initialises.