Crear plugin y filtro para CKEditor WYSIWYG - 1/2

En ocasiones nos surje la necesidad de crear un plugin que nos permita añadir dentro de un textarea (body por ejemplo) de nuestro contenido una funcionalidad específica que requiera del uso de html avanzado. javascript o cualquier otro método. Vamos a ver cómo crear nuestro propio plugin con el cuál trataremos los datos añadidos a nuestro antojo.

En este ejemplo, vamos a añadir un simple botón para que al añadir una url de un video de youtube, nos genere un patrón específico que podremos tratar con el filtro que crearemos a posteriori.
Lo primero que haremos será crear un nuevo módulo custom (youtube_filter). Una vez definidos el .info y .module, vamos a ir añadiendo las funciones necesarias en este último.
Ahora pasaremos a definir cada uno de los hooks necesarioas para crear tanto nuestro plugin, como el posterior filtro. Para el plugin, usaremos el hook_wysiwyg_plugin (aquí podemos ver los hook de wysiwyg). 

function youtube_filter_wysiwyg_plugin($editor,$version) {
  switch ($editor) {
    case 'ckeditor':
         drupal_add_js('//cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js','external');
         drupal_add_css('http://cdn.datatables.net/1.10.2/css/jquery.dataTables.css','external');
      return array(
        'youtube_wysiwyg' => array(
          'path' => drupal_get_path('module', 'youtube_filter') . '/plugins/youtube_wysiwyg',
          'buttons' => array(
            'YoutubeVideos' => t('Youtube Videos'),
          ),
          // No need for 'extensions' key if the plugin has buttons.
          'load' => TRUE,
          'internal' => FALSE,
        ),
      );
     break;
  }
}

Como podéis ver, añadimos un botón con el cuál podemos insertar el video y tratarlo como querámos con nuestro filtro. Para ello, lo hemos separado en otra carpeta plugins, donde podríamos añadir tantos plugins como desearamos. En este caso solo tendremos uno, youtube_wysiwyg, que será donde tengamos el icono a añadir en nuestro perfil de wysiwyg, así como el js en el que vaya parte de la "lógica" que se quiera conseguir. En nuestro caso, hemos llamado al archivo con el el javascript plugin.js

( function($) {
    CKEDITOR.plugins.add( 'youtube_wysiwyg',
    {
        init: function( editor )
        {
           var me = this;
           CKEDITOR.dialog.add( 'YoutubeVideosDialog', function (instance)
           {
              return {
                 title : 'Insertar video',
                 minWidth : 550,
                 minHeight : 200,
                 contents :
                       [
                          {
                             id : 'iframe',
                             expand : true,
                             elements :[{
                                id : 'urlvid',
                                name: 'valueUrl',
                                type : 'text',
                                label : 'Url video', 
                              },{
                                type: 'button',
                                hidden: true,
                                id: 'url',
                                label: editor.lang.common.browseServer,
                                filebrowser: {
                                  action: 'Browse',
                                  onSelect: function( fileUrl, data ) {
                                     var dialog = this.getDialog();
                                     dialog.getContentElement( 'iframe', 'urlvid' ).setValue( fileUrl );
                                  }
                                }
                              }]
                          }
                       ],
                  onOk: function() {
                        var dialog = this;
                        var url = dialog.getValueOf('iframe','urlvid');
                        var id =  url.substr(url.length - 11);                    
                        if (!url) {
                          url = "empty";
                        }
                        var text = '[youtube:'+id+']';
                        var div = instance.document.createElement('div');
                        div.setHtml(text);
                        instance.insertElement(div);

                  }
              };
           } );
            editor.addCommand( 'YoutubeVideos', new CKEDITOR.dialogCommand( 'YoutubeVideosDialog',
                { allowedContent: 'iframe[*]' }
            ) );

            editor.ui.addButton( 'YoutubeVideos',
            {
                label: 'Youtube Videos',
                command: 'YoutubeVideos',
                toolbar: 'youtubeVideos',
                icon: this.path + 'icons/youtube.png'
            } );
        }
    } );

} )(jQuery);

Al final es un js bastante sencillo, que lo único que hace es mostrar un nuevo cuadro de diálogo en el que insertar una url, y esta se devuelve con un formato determinado ([youtube:ID]) que posteriormente trataremos con el filtro (en el siguiente post). Tan solo nos faltaría activarlo. Para ello, accedemos a Administración » Configuración » Autoría del contenido » Wysiwyg (admin/config/content/wysiwyg/) y seleccionamos el formato de texto que queramos editar. Por ejemplo, full html (admin/config/content/wysiwyg/profile/full_html/edit). Ahora, en el fieldset BOTONES Y EXTENSIONES podremos encontrar un nuevo check para marcar nuestro nuevo plugin (se llamará "Youtube Videos"). Podemos verlo aquí

Como resultado, se nos añadiría a nuestro texto la cadena [youtube:9pI8bCZ2FM0], la cuál ahora podremos manejar a nuestro antojo con la creación de un filtro. El último paso que nos quedaría, sería activar el filtro que vamos a crear, pero eso lo podréis ver en el post Crear plugin y filtro para CKEditor WYSIWYG - 2/2.