Własny przycisk (plugin) do CKEditora cz. II

20.02.2018

W jednym z poprzednich wpisów pokazaliśmy, jak skonfigurować CKEditor w Drupalu 8. Tym razem przedstawimy, w jaki sposób samodzielnie można rozszerzyć jego możliwości. W przypadku wielu internetowych witryn podstawowe funkcjonalności CKEditora są wystarczające, ale duże strony firmowe na Drupalu wymagają często niestandardowych rozwiązań - trafiają się bowiem projekty, gdzie klient wymaga od nas, aby nieco rozszerzyć działanie edytora treści.

CKEditor używa pluginów do rozszerzenia swojej funkcjonalności. Wszystkie dostępne są na oficjalnej stronie.

http://ckeditor.com/addons/plugins/all

Dodanie nowego pluginu do strony opartej o system Drupal 8 jest znacznie prostsze w porównaniu do tego, jak to się robiło w poprzedniej wersji Drupala i ogranicza się do stworzenia prostego modułu.

Jako przykład wybrałem plugin, który da nam możliwość wstawienia filmu z Youtube, używając kodu embed lub URL’a.

Plugin: https://ckeditor.com/cke4/addon/youtube

Stwórz moduł o nazwie cke_youtube (lub wybierz swoją nazwę).

Struktura modułu wygląda następująco:

Zdjecie1

Plik cke_youtube.info.yml zawiera standardowe dane modułu.

Plik cke_youtube.module to pusty plik php, nie potrzebujemy tam żadnego kodu.

W strukturze znajdują się dwa dodatkowe katalogi:

Katalog z pluginem - js.

W nim znajduje się dodatkowy katalog plugins.

Tam rozpakuj pliki pobrane ze strony https://ckeditor.com/cke4/addon/youtube

Tworzenie nowego pluginu w Drupalu odbywa się w nowym pliku z klasą, który musimy stworzyć oraz odpowiednio skonfigurować.

W naszym przypadku będzie to Youtube.php, a cała struktura musi wyglądać następująco:

Youtube PHP

Kod pliku:

<?php

namespace Drupal\cke_youtube\Plugin\CKEditorPlugin;

use Drupal\ckeditor\CKEditorPluginInterface;
use Drupal\ckeditor\CKEditorPluginButtonsInterface;
use Drupal\Component\Plugin\PluginBase;
use Drupal\editor\Entity\Editor;

/**
 * Defines the "Youtube" plugin, with a CKEditor.
 *
 * @CKEditorPlugin(
 *   id = "youtube",
 *   label = @Translation("Youtube Plugin")
 * )
 */
class Youtube extends PluginBase implements CKEditorPluginInterface, CKEditorPluginButtonsInterface {

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

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

  /**
   * {@inheritdoc}
   */
  public function isInternal() {
    return FALSE;
  }

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

  /**
   * @return array
   */
  public function getButtons() {
    $iconImage = drupal_get_path('module', 'cke_youtube') . '/js/plugins/youtube/images/icon.png';

    return [
      'Youtube' => [
        'label' => t('Add Youtube Video'),
        'image' => $iconImage,
      ]
    ];
  }

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

}

Klasa Youtube korzysta z dwóch interfejsów - CKEditorPluginInterface, CKEditorPluginButtonsInterface

Zwróć uwagę na jej komentarz, w zmiennej “id” trzeba użyć takiej samej nazwy jak nazwa pluginu, który instalujesz.

W tym przypadku jest to “youtube”.

Dla innych pluginów nazwę tę znajdziesz w pliku plugin.js

plugin.js

Do czego służą poszczególne metody?

getDependencies()

Tutaj wpisujesz nazwy pluginów, które są wymagane do działania Twojego pluginu.
Jeżeli nie są potrzebne, zostawiasz tę metodę pustą, tak jak w przypadku pluginu youtube.

Wymagane pluginy znajdziesz w pliku plugin.js
Przykład dla pluginu Layout Manager:

Layaut Manager