¿Cómo se carga archivos JavaScript adicionales requeridos para la API de plugins WYSIWYG en el nodo / editar páginas?

Question

Estoy construyendo un plugin usando el módulo API WYSIWYG para Drupal 7 que agregará un botón a la barra de herramientas de editores compatibles.

Estoy usando el gancho hook_wysiwyg_plugin() para crear un nuevo botón en la barra de herramientas Editor, pero tengo que cargar algunos otros archivos javascript. El gancho hook_wysiwyg_plugin() parece que pueda especificar un archivo JS y CSS.

¿Cómo puedo cargar archivos extra que se requiere javascript necesarios para el plugin javascript?

He implementado hook_library() para definir una biblioteca es decir, archivos JS / CSS, pero estoy seguro de cómo me gancho que hasta api WYSIWYG para que se carguen en las pantallas del nodo / editar?

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.