Front.id

Botones!, una forma estupenda de conectar ckeditor con funcionalidades avanzadas de Drupal. 

En Drupal 8 tenemos un sistema realmente bueno para añadir botones a ckeditor. Necesitas saber un pelín de backend y otro de JS y poco mas. 

En este tutorial vamos a crear un boton que nos permita poner una selección de texto en "bolder". Bolder viene a ser lo siguiente a poner un texto en negrita. Hay muchas fuentes que tienen fuentes mas gruesas que la negrita. Por ejemplo Open Sans:

El backend

Ckeditor es un plugin creado en JS. Entonces, ¿por que necesitamos PHP?

Fácil, porque tenemos que implementar una clase que informe unas pocas cosas al sistema para que este pueda ofrecernos el botón en la sección de configuración de ckeditor (ej: admin/config/content/formats/manage/full_html):

No te preocupes. La clase es muy simple y puedes usar como base la que hemos creado para este plugin:

<?php

namespace Drupal\ckeditor_bolder_text\Plugin\CKEditorPlugin;

use Drupal\ckeditor\CKEditorPluginBase;
use Drupal\ckeditor\CKEditorPluginInterface;
use Drupal\editor\Entity\Editor;

/**
 * Defines the "BolderButton" plugin.
 *
 * @CKEditorPlugin(
 *   id = "BolderButton",
 *   label = @Translation("CKEditor Bolder Button")
 * )
 */
class BolderButton extends CKEditorPluginBase implements CKEditorPluginInterface {

  /**
   * {@inheritdoc}
   */
  public function getFile() {
    return drupal_get_path('module', 'ckeditor_bolder_text') . '/js/bolderbutton/plugin.js';
  }

  /**
   * {@inheritdoc}
   */
  public function getConfig(Editor $editor) {
    return [];
  }

  /**
   * {@inheritdoc}
   */
  public function getButtons() {
    return [
      'BolderButton' => [
        'label' => $this->t('Bolder'),
        'image' => drupal_get_path('module', 'ckeditor_bolder_text') . '/js/bolderbutton/icons/bolderbutton.png',
      ],
    ];
  }

}

Expliquemos un poco:

La clase la hemos creado dentro de nuestro modulo "ckeditor_bolder_text" en /src/Plugin/CKEditorPlugin/BolderButton.php

Necesita 3 metodos:

getFile() indica la ruta en la que tenemos el plugin JS de ckeditor.

getConfig() nos brinda la posibilidad de crear un formulario de configuración para configurar parámetros para el plugin. Te va a quedar mas claro con este ejemplo. El botón de imagen Cuando lo añades al toolbar de ckeditor te ofrece el siguiente formulario:

getButtons() informa cual es el icono a usar en el botón y el label.

El Frontend

Ya declarada la clase de PHP solo nos queda crear un plugin de ckeditor que haga algo al clickear en el botón bolder:

/**
 * @file
 * Bolder plugin.
 */

CKEDITOR.plugins.add('BolderButton', {
  icons: 'bolderbutton',
  init: function (editor) {

    var bolderStyle = new CKEDITOR.style({element: 'span', attributes: {'class': 'bolder'}});

    // Listen to contextual style activation.
    editor.attachStyleStateChange(bolderStyle, function (state) {
      !editor.readOnly && editor.getCommand('setBolder').setState(state);
    });

    // Register the "bold" command, which applies the bold style.
    editor.addCommand('setBolder', new CKEDITOR.styleCommand(bolderStyle));

    editor.ui.addButton('BolderButton', {
      label: 'Bolder',
      command: 'setBolder'
    });

  }
});

No hace falta aclarar que el archivo JS está ubicado en el path definido anteriormente en la clase de PHP en el método getFile()

La explicación de lo que hace ya corresponde mas a ckeditor que a Drupal pero vamos a ello:

var bolderStyle define un elemento de tipo <span> con un class "bolder". Ese span es el que se le va a aplicar al texto seleccionado cuando le demos al botón (obviamente tenemos en nuestro CSS un class .bolder{ font-weight: 800 } sino no conseguiríamos nada).

editor.attachStyleStateChange() aplica o quita el tag dependiendo de si ya estaba aplicado o no anteriormente.

editor.addCommand() define el comando "setBolder" y su acción que viene a ser aplicar bolderStyle (ver mas arriba que está explicado bolderStyle)

Por ultimo editor.ui.addButton() añade el botón y le dice que comando ejecutar cuando sea presionado.

Resultado

Chau!