CKEditor

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 pokażemy, jak samodzielnie możesz rozszerzyć funkcjonalność tego edytora.

 

W przypadku wielu stron internetowych podstawowe funkcjonalności CKEditora są wystarczające. 

Trafiają się jednak projekty, gdzie klient wymaga od nas, aby nieco rozszerzyć możliwości 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

 

JS

 

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

 

W tym przypadku najpierw musisz zainstalować plugin basewidget, a dopiero później layoutmanager.

 

getLibraries()

Określa dodatkowe biblioteki.

 

getFile()

Lokalizacja pluginu.

 

getButtons()

Dodaje nowy przycisk do edytora.

 

Zwróć uwagę na to, że w zwracanej tablicy musisz użyć odpowiedniej nazwy:

W przypadku tego pluginu jest to “Youtube

 

Youtube

 

Odpowiednią nazwę znajdziesz w pliku plugin.js

 

Plugin.js2

 

W momencie, gdy cała struktura oraz nazewnictwo są poprawne, możesz włączyć nowy moduł.

Strona Extend (/admin/modules/)
 

Extend

 

Teraz na stronie konfiguracji formatów tekstu

Configuration → Content Authoring → Text formats and editors (/admin/config/content/formats/)

 

Dla wybranego formatu dodaj nowy przycisk do edytora.

przycisk do edytora

 

Po zapisaniu zmian dodaj nową treść, wybierz format tekstu, dla którego jest ustawiony przycisk “Add Youtube Video”.

Jeżeli wszystko działa poprawnie, po naciśnięciu przycisku otworzy się okno z możliwością wstawienia kodu embed lub URL do filmu.

 

URL do filmu

 

Porozmawiajmy o Twoich projektach

Napisz do nas!