CKEditor API

CKEditor API je novina u Drupalu 8.

Obratite pažnju da se ovo odnosi samo na API modula CKEditor u Drupalu 8, a ne na API JavaScript biblioteke CKEditor — za to pogledajte http://docs.ckeditor.com/.

Za detaljnije informacije o tome šta ovaj modul radi, pogledajte dokumentaciju modula Text Editor.

Osobine API-ja

Rangirano po najređe korišćenim API-jima:

CKEditor skins

CKEditor u Drupalu 8 po difoltu koristi skin Moono. To je pogodno za većinu sajtova jer je prilično neutralan skin. Međutim, neki sajtovi žele savršenu integraciju, i u tom slučaju možete instalirati drugi skin — možda čak i onaj koji ste sami napravili.
Za to implementirajte hook_editor_js_settings_alter():

function hook_editor_js_settings_alter(array &$settings) {
  foreach (array_keys($settings['editor']['formats']) as $text_format_id) {
    if ($settings['editor']['formats'][$text_format_id]['editor'] === 'ckeditor') {
      $settings['editor']['formats'][$text_format_id]['editorSettings']['skin'] = 'IME_SKINA,APSOLUTNI_URL_DO_SKINA';
    }
  }
}

CKEditor iframe CSS

CSS koji se učitava u CKEditor iframe instancu, npr. na /node/add/article (dakle CKEditor koji se ne koristi za inline uređivanje), možda treba podesiti tako da CKEditor iframe instance odgovaraju stilu front-enda (za one koji preferiraju WYSIWYG) ili da prikazuju strukturu (za one koji preferiraju „čisto“ pomoćno uređivanje teksta).
         - CSS teme front-enda
Gotovo svaka eksterna tema ima CSS za stilizovanje pasusa, citata, podnaslova slika itd. Zbog toga sve eksterne teme treba da navedu CSS koji će se učitati u CKEditor iframe instance za sav sadržaj (tekst/markup) koji kreiraju kreatori sadržaja. To se može učiniti navodeći ključ ckeditor_stylesheets u svom *.info.yml fajlu. CSS resursi koji su tamo navedeni takođe će se učitati u iframe. Pogledajte primer u Bartiku. Takođe pogledajte vodič Kako naterati CKEditor da odgovara vašoj temi („WYSIWYG je laž“)!
         - CSS modul
Moduli koji učitavaju CSS na eksternoj strani mogu koristiti hook_ckeditor_css_alter() da takođe učitaju taj CSS u CKEditor iframe instance.

CKEditor pluginovi

Dodajte više funkcionalnosti u CKEditor!

\Drupal\ckeditor\CKEditorPluginInterface: Drupal pluginovi koji su u 1:1 odnosu sa CKEditor pluginovima da Drupal zna koji CKEditor pluginovi su dostupni. Otuda, na prvi pogled zbunjujući naziv: CKEditor Plugin Plugin, ali to zaista ima smisla!

• Postoje četiri dodatna interfejsa koja možete implementirati

             1. \Drupal\ckeditor\CKEditorPluginButtonsInterface omogućava CKEditor pluginu da definiše koje dugmiće pruža, tako da korisnici mogu prilagoditi CKEditor toolbar instancu preko drag-and-drop interfejsa.
Primer: \Drupal\ckeditor\Plugin\CKEditorPlugin\StylesCombo pruža dugme na CKEditor toolbaru (čak i padajući meni).
             2. \Drupal\ckeditor\CKEditorPluginContextualInterface omogućava CKEditor pluginu da se automatski uključi zavisno od konteksta: ako je dugme nekog drugog CKEditor plugina uključeno, ako je neki filter uključen, ako neka podešavanja CKEditor plugina imaju određenu vrednost ili bilo koja kombinacija gore navedenog.
Primer: \Drupal\ckeditor\Plugin\CKEditorPlugin\DrupalImageCaption se sam uključuje ako postoji dugme Slika i ako je uključen filter poravnanja ili naslova.
             3. \Drupal\ckeditor\CKEditorPluginConfigurableInterface omogućava CKEditor pluginu da definiše formu parametara za podešavanje bilo kojih parametara koje taj CKEditor plugin može imati.
Primer: plugin \Drupal\ckeditor\Plugin\CKEditorPlugin\StylesCombo omogućava podešavanje stilova koje može primenjivati.
             4. \Drupal\ckeditor\CKEditorPluginCssInterface od verzije 8.1.0 omogućava CKEditor pluginu da definiše dodatni CSS koji će se učitati u CKEditor iframe instancama.
Primer: plugin \Drupal\ckeditor\Plugin\CKEditorPlugin\DrupalImageCaption učitava dodatni CSS.

• Implementacije pluginova moraju imati anotaciju @CKEditorPlugin da bi bile detektovane.

Ovo uključuje ID CKEditor plugina; ID koji je definisan u anotaciji mora se poklapati sa imenom plugina definisanim u JavaScript fajlu plugina u liniji gde se plugin dodaje.

// Anotacija plugina u PHP mora se poklapati sa onim što je definisano ovde.
CKEDITOR.plugins.add('pluginId', { ... });

• Metapodaci anotacije detektovanih pluginova mogu se menjati pomoću hook_ckeditor_plugin_info_alter().
• \Drupal\ckeditor\CKEditorPluginBase pruža podrazumevanu implementaciju, tako da CKEditor pluginovi ne moraju implementirati svaki metod. To znači da je optimizovan za najčešći slučaj: koristan je samo za pluginove koji pružaju dugmad.

Na kraju, kada implementirate novi plugin za tekst editor, verovatno ćete želeti da osigurate da UX za njegovo podešavanje radi odlično. Za to pogledajte ckeditor.drupalimage.admin.js i ckeditor.stylescombo.admin.js kao primere. Obratite pažnju da ovaj aspekt (i samo ovaj aspekt!) može biti promenjen na https://www.drupal.org/node/2567801.

Debugovanje

Drupal 8 uključuje prilagođenu optimizovanu CKEditor build verziju. Pogledajte core/assets/vendor/ckeditor/build-config.js. Dokumentacija u ovom fajlu takođe objašnjava kako zameniti ugrađenu CKEditor build verziju u Drupal 8 (optimizovanu za produkciju) build verzijom optimizovanom za razvoj (tj. ne minifikovanom).

Pogledajte još

• CKEditor modul: duboka integracija tekst editora
• Text Editor modul: povezivanje pomoćnih editora sa tekst formatima
• Filter modul: tekst formati koji filtriraju korisnički unos
• API tekst editora
• Drupal 8: bolji doživljaj kreiranja strukturiranog sadržaja?
• CKEditor u Drupalu 8: pitanja i odgovori za sajt developere i developere
• Tutorijal: kreiranje proširene funkcionalnosti za osnovni CKEditor u Drupalu 8
• Tutorijal: Kako napraviti da CKEditor odgovara vašoj temi („WYSIWYG je laž“)
• Razvoj CKEditor widget pluginova: Uvod u vidžete
• Lista CKEditor dodataka za Drupal 8