logo

Extra Block Types (EBT) - Nuova esperienza con Layout Builder❗

Extra Block Types (EBT) - tipi di blocchi stilizzati e personalizzabili: Slideshows, Tabs, Cards, Accordion e molti altri. Impostazioni integrate per sfondo, DOM Box, plugin javascript. Vivi oggi il futuro della costruzione dei layout.

Demo moduli EBT Scarica moduli EBT

❗Extra Paragraph Types (EPT) - Nuova esperienza con Paragraphs

Extra Paragraph Types (EPT) - insieme di moduli basati su paragrafi in modo analogo.

Demo moduli EPT Scarica moduli EPT

Scorri
  1. Home
  2. Documentazione di Drupal
  3. API di Drupal 8

API di CKEditor

03/10/2025, by Ivan

Menu

L’API di CKEditor è nuova in Drupal 8.

Nota che questo si applica solo all’API del modulo CKEditor di Drupal 8, non all’API della libreria JavaScript CKEditor – per quella vedi http://docs.ckeditor.com/.

Per ulteriori dettagli su cosa fa questo modulo, vedi la documentazione del modulo Editor di testo.

Funzionalità dell’API

Organizzate dalla meno utilizzata:

Skins di CKEditor

CKEditor in Drupal 8 utilizza di default la skin Moono. Va bene per la maggior parte dei siti, poiché è piuttosto neutrale. Tuttavia, alcuni siti desiderano un’integrazione perfetta e in quel caso si può installare un’altra skin, magari anche una creata su misura.
Per farlo, implementa 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'] = 'SKIN_NAME,ABSOLUTE_URL_TO_SKIN';
    }
  }
}

CSS dell’iframe di CKEditor

I CSS caricati nell’istanza iframe di CKEditor (ad esempio in /node/add/article, cioè un’istanza non inline) potrebbero dover essere personalizzati affinché corrispondano allo stile del front-end (per chi preferisce WYSIWYG) o mostrino una struttura pulita (per chi preferisce un editor di testo di supporto).
    - CSS del tema front-end
Praticamente ogni tema front-end ha CSS per stilizzare paragrafi, citazioni, didascalie, ecc. Pertanto, tutti i temi front-end dovrebbero istruire le istanze iframe di CKEditor a caricare i CSS per qualsiasi contenuto (testo/markup) che i creatori di contenuto possono generare. Questo si fa indicando la chiave ckeditor_stylesheets nel file *.info.yml del tema. Le risorse CSS elencate verranno caricate nell’iframe. Esempio in Bartik. Vedi anche la guida Come far corrispondere CKEditor al tuo tema front-end.
    - CSS del modulo
I moduli che caricano CSS sul front-end possono usare hook_ckeditor_css_alter() per caricare questi CSS anche nelle istanze iframe di CKEditor.

Plugin di CKEditor

Aggiungi più funzionalità a CKEditor!

\Drupal\ckeditor\CKEditorPluginInterface: plugin Drupal che corrispondono 1:1 ai plugin di CKEditor, così Drupal conosce i plugin disponibili. Da qui il nome apparentemente ridondante: plugin di CKEditor Plugin.

  • Ci sono quattro interfacce aggiuntive che si possono implementare:
  1. \Drupal\ckeditor\CKEditorPluginButtonsInterface: permette al plugin di dichiarare i pulsanti disponibili per la personalizzazione della toolbar tramite l’interfaccia drag-and-drop.
    Esempio: \Drupal\ckeditor\Plugin\CKEditorPlugin\StylesCombo fornisce un pulsante (e menu a tendina).
  2. \Drupal\ckeditor\CKEditorPluginContextualInterface: permette al plugin di abilitarsi automaticamente in base al contesto.
    Esempio: \Drupal\ckeditor\Plugin\CKEditorPlugin\DrupalImageCaption si abilita se è presente il pulsante Immagine e un filtro di didascalia/posizionamento.
  3. \Drupal\ckeditor\CKEditorPluginConfigurableInterface: permette al plugin di fornire un form di configurazione dei propri parametri.
    Esempio: \Drupal\ckeditor\Plugin\CKEditorPlugin\StylesCombo permette di configurare gli stili disponibili.
  4. \Drupal\ckeditor\CKEditorPluginCssInterface (da 8.1.0): permette al plugin di definire CSS extra per l’iframe.
    Esempio: \Drupal\ckeditor\Plugin\CKEditorPlugin\DrupalImageCaption carica CSS aggiuntivo.
  • I plugin devono essere annotati con @CKEditorPlugin, in modo da poter essere rilevati.

L’ID del plugin ckeditor definito nell’annotazione deve corrispondere al nome del plugin definito nel file JS:

// L’annotazione PHP deve corrispondere a quanto definito qui.
CKEDITOR.plugins.add('pluginId', { ... });
  • I metadati dei plugin rilevati possono essere modificati tramite hook_ckeditor_plugin_info_alter().
  • \Drupal\ckeditor\CKEditorPluginBase fornisce un’implementazione di base utile ai plugin che forniscono pulsanti.

Infine, implementando un nuovo plugin dell’editor di testo, assicurati che l’UX di configurazione sia ottimale. Vedi ckeditor.drupalimage.admin.js e ckeditor.stylescombo.admin.js come esempi. Nota che solo questo aspetto può essere cambiato in questo issue.

Debug

Drupal 8 include una build personalizzata di CKEditor. Vedi core/assets/vendor/ckeditor/build-config.js. La documentazione in quel file spiega anche come sostituire la build integrata (ottimizzata per produzione) con una build di sviluppo.

Vedi anche