How do you load extra javascript files required for wysiwyg api plugin on node/edit pages?

Question

I'm building a plugin using the WYSIWYG API module for Drupal 7 that will add a button to the toolbar of supported editors.

I'm using the hook_wysiwyg_plugin() hook to create a new button on editor toolbar but I need to load a few other javascript files. The hook_wysiwyg_plugin() hook seems to allow you to specify one JS and CSS file.

How can I load extra required javascript files required for the plugin javascript?

I've implemented hook_library() to define a library i.e. js/css files but am unsure how I hook that up to wysiwyg api so that they load on the node/edit screens?

Answer 1

It's actually quite simple, although my experience with doing the same thing is through Drupal 6, so there may be some minor differences with my code:

function MYMODULE_form_alter(&$form, &$form_state, $form_id) {
  // Only modify node_form's.
  // @TODO - Set a condition for all forms you wish to alter for D7 entities.
  if (isset($form['type']['#value']) && $form_id == "{$form['type']['#value']}_node_form") {
    // We use after build to add JS and CSS to prevent issues caused by form caching.
    $form['#after_build'][] = 'MYMODULE_form_alter_after_build';
  }
}

function MYMODULE_form_alter_after_build($form_element, &$form_state) {
  drupal_add_js(...);
}

Again, this code is for D6, but the basic principle should still work.

While it's not tied directly to the Wysiwyg API, it's probably the best option as the Wysiwyg API only supports on JS file per plugin (iirc).

A few wild/untested options for you:

• Make a menu callback for the Javascript file defined in the plugin and pass back a somewhat cached javascript file containing the sources of multiple javascript files. (Wysiwyg Fields does do the menu callback for dynamically generated plugins, but only for one javascript file, see the source for ideas).

• Use a Javascript dynamic Javascript loading technique similar to http://www.javascriptkit.com/javatutors/loadjavascriptcss.shtml

Hope this helps.

Answer 2

With drupal_add_js:

function yourmodule_preprocess_page(&$vars)
{
  $node = $vars['node']; 
  if($node->type == 'yournodetype' AND arg(2) == 'edit')
  {
    drupal_add_js([...]);
  }
}

Answer 3

In theory, all you would need to do is use the right "#text_format" parameter on the #type textarea FAPI element for the wysiwyg editor associated with the Text Format to be automatically included, this way:

function mymodule_menu(){
    return array(
        'mypage' => array(
            'title' => 'A page to test wysiwyg',
            'page callback' => 'drupal_get_form',
            'page arguments' => array('mymodule_page'),
            'access arguments' => array('access content'), 
        )
    );
}

function mymodule_page($form, &$form_state) {
    $element = array(
        '#type' => 'textarea', 
        '#title' => t('Comment'), 
        '#default_value' => 'something',
        '#text_format' => 'full_html',
        '#required' => TRUE,
    );
    $form['mytext'] = $element;
    return $form;
}

However, it doesn't get included unless it's a "node edit" page, so something related to functions "filter_process_format" or "wysiwyg_pre_render_text_format" may be able to force it, but I haven't found the magic combination yet, still reading the source of the Wysiwyg module to find the missing piece.