Hogyan készítsünk egy alap TinyMCE plugint beépülve a WYSIWYG Drupal modulba?

Egyik jó barátom megkért, hogy segítsek neki a diplomamunkájában, aminek része lesz többek között egy Drupal filter, amihez tartozna egy WYSIWYG kiegészítő is. Ez a bejegyzás, nem teljesen fogja kielégíteni az igényeit, mert csak az alapjait mutatom meg, de később lesz egy olyan cikkem is, amivel már konkrétan az Ő problémáját is meg lehet oldani.

Csináljunk egy teljesen értelmetlen modult, a modul leírása a következő:

A modul készítsen el egy WYSIWYG kiegészítőt a TinyMCE editorhoz, aminek segítségével el lehet helyezni a szerkesztőn egy gombot ami a kijelölt szöveget H2 elemmé alakítja át.

Nos ahogy említettem ennek tényleg nincs igazából értelme, de az alapokat megmutatja.

Én a saját készítésű modulokat a sites/all/modules/custom könyvtárba szoktam elhelyezni, a contrib modulokat pedig a sites/all/modules/contrib-ba. Igazából ez nem kötelező, de szerintem jó így elkülöníteni a letöltött és a saját fejlesztésű modulokat.

A modulok ugye az info fájlal kezdődnek, úgyhogy hozzuk létre a wysiwyg_h2.info fájlt, állítsuk be a wysiwyg modult függőségnek:

name = WYSIWYG H2
description = WYSIWYG H2
version = VERSION
core = 6.x
 
dependencies[] = wysiwyg

Most nézzük meg a modul fájlt, hozzuk létre a wysiwyg_h2.module fájlt:

/**
 * Implementation of hook_wysiwyg_plugin().
 */
function wysiwyg_h2_wysiwyg_plugin($editor, $version) {
  switch ($editor) {
    case 'tinymce':
      if ($version > 3) {
        return array(
          'wysiwyg_h2' => array(
            'path' => drupal_get_path('module', 'wysiwyg_h2') .'/editor_plugin.js',
            'buttons' => array('wysiwyg_h2' => t('Wysiwyg h2')),
            'load' => TRUE,
          ),
        );
      }
      break;
  }
}

A hook_wysiwyg_plugin() kifejtésével megadhatjuk hogy melyik editorhoz szeretnénk bővítményt írni, mi legyen a gomb(ok) neve és honnan érheti el a rendszer a hozzá tartozó JavaScript fájlt. A load pedig azt állítja be, hogy szükséges a betöltése, ez általában TRUE, ritka esetben false, hogyha a plugin már betöltődött valami miatt. Persze itt még jó pár dolgot meglehet adni, de ez ehhez a modulhoz nem szükséges:

• url
• extensions
• options
• internal
• extended_valid_elements

És akkor a jöjjön a lényeg, a megadott editor_plugin.js:

(function() {
  tinymce.create('tinymce.plugins.wysiwygH2Plugin', {
    /**
     * Initialize the plugin, executed after the plugin has been created.
     *
     * This call is done before the editor instance has finished it's
     * initialization so use the onInit event of the editor instance to
     * intercept that event.
     *
     * @param ed
     *   The tinymce.Editor instance the plugin is initialized in.
     * @param url
     *   The absolute URL of the plugin location.
     */
    init : function(ed, url) {
      // Register the wysiwygH2Plugin execCommand.
      ed.addCommand('wysiwygH2Plugin', function() {
        ed.selection.setContent('<h2>' + ed.selection.getContent() + '</h2>');
      });
 
      // Register button.
      ed.addButton('wysiwyg_h2', {
        title : 'Create H2',
        cmd : 'wysiwygH2Plugin',
        image : url + '/icon.gif'
      });
    },
 
    /**
     * Return information about the plugin as a name/value array.
     */
    getInfo : function() {
      return {
        longname : 'Wysiwyg H2 Plugin',
        author : 'Kalman Hosszu',
        authorurl : 'http://www.kalman-hosszu.com'
      };
    }
  });
 
  // Register plugin.
  tinymce.PluginManager.add('wysiwyg_h2', tinymce.plugins.wysiwygH2Plugin);
})();

Először a tinymce.create metódusban létrehozzuk a plugin-t. Az init metódusban definiálunk egy command-ot és egy gombot, aminek ezt a command-ot adjuk meg. A wysiwygH2Plugin annyit csinál, hogy a kijelölt tartalmat felülírja, gyakorlatilag köré rakja a h2 elemeket.
A wysiwyg_h2 gombnál megadjuk a command-ot, valamint a kép elérést.

Szükség van még, a getInfo fgv kifejtésére is, itt megadhatjuk a plugin szerzőjét, nevét, és webcímét.

Legvégül, a PluginManager segítségével, hozzáadjuk a WYSIWYG-ben definiált gombhoz, a plugin-t.

Nagy vonalakban, ennyi egy alap plugin elkészítése.