Introduction
CKEditor 5 est l’éditeur par défaut dans Drupal 10, ayant été initialement introduit dans Drupal 9.3. CKEditor 5 a été entièrement écrit à partir de zéro et est basé sur ES6. Ckeditor-5 offre également la flexibilité de créer des plugins personnalisés dans l’éditeur, tout comme ckeditor-4. Désormais, CKEditor 5 dispose de nombreuses fonctionnalités améliorées dans Drupal.
Fonctionnalités Premium de CKEditor 5
Le module CKEditor 5 Premium Features étend les fonctionnalités par défaut proposées dans le noyau. Il comprend des fonctionnalités telles que la collaboration en temps réel dans la zone de l’éditeur, l’exportation vers des fichiers PDF et Word, l’importation à partir de fichiers Word (.docx et .dotx) et le mode plein écran.
Quelques fonctionnalités premium mises en évidence de CKEditor 5
- Suivre les modifications (pour apporter des suggestions de modifications)
- Commentaires (pour discuter du contenu)
- Historique des révisions (pour voir quelles modifications ont été apportées et comparer et restaurer les versions précédentes du contenu)
- Collaboration en temps réel
- Notification, exportation vers PDF et Word, importation depuis Word, mode plein écran, etc.
Pour activer la fonctionnalité Premium dans Drupal 10, nous devons acheter la licence et activer/configurer ce module. Tu peux lire ici sur les fonctionnalités premium de ckeditor5. CKE 5 Fournit un ensemble d’outils de débogage riches pour les éléments internes de l’éditeur tels que le modèle, la vue et les commandes.
Inspecteur CKEditor 5 : Drupal fournit un module de débogage appelé inspecteur CKEditor 5. il fournit la console de débogage, qui est utile pour déboguer et créer le plugin.
Nous pouvons télécharger et activer dans Drupal
Référence: https://www.drupal.org/project/ckeditor5_dev
Il fournit également un modèle de démarrage dans /ckeditor5_plugin_starter_template pour les modules fournissant des plugins CKEditor 5 personnalisés.
Étape 1 Copiez le ckeditor5_plugin_starter_template & collez-le dans le dossier du module et renommez-le (comme /module/custom/test). Remplacez MODULE_NAME par le nom de votre module dans tous les fichiers.
Étape : 2 Télécharger la dépendance : Depuis le répertoire racine du module, exécutez la commande installation npm (il téléchargera toutes les dépendances dans le dossier node_module, mentionné dans package.json)
Étape : 3 Réalisez une build : Dans le répertoire racine du module, nous devons exécuter npm exécuter la construction Il fera la construction et créera un fichier dans le /js/build/{nom_plugin.js} automatiquement.
Ça y est, le plugin Drupal est créé ; nous pouvons l’activer dans l’éditeur, le nom du plugin par défaut est simple_box_demo
Comprenons certaines utilisations de fichiers et le flux de travail
Il existe deux façons d’activer les plugins de classe Yml ou PHP
Utiliser Yml
MODULE_NAME.ckeditor5.yml
test_demo_simplebox:
ckeditor5:
plugins:
- demoPlugin.SimpleBox
drupal:
label: Simple box demo
library: test/demobox
admin_library: test/admin.demobox
toolbar_items:
simpleBox:
label: Simple box demo
elements:
- <h2>
- <h2 class="simple-box-title">
- <div>
- <div class="simple-box-description">
- <section>
- <section class="simple-box">
Il stocke les informations sur le plugin Drupal et le plugin ckeditor5.
Utiliser la classe PHP: La classe PHP n’est nécessaire que lors de l’utilisation de données dynamiques, c’est-à-dire si nous avons une configuration dans l’éditeur. Nous devons déclarer la classe dans le fichier .ckeditor5.yml.
ckeditor5_custom_paste_pasteFilter:
ckeditor5:
plugins:
- pasteFilter.PasteFilter
drupal:
label: Ckeditor 5 Custom Paste
class: \Drupal\ckeditor5_custom_paste\Plugin\CKEditor5Plugin\PasteFilter
library: ckeditor5_custom_paste/custom_paste_filter
elements: false
Pour créer une configuration Drupal, nous devons créer un plugin Drupal CKEditor avec/src/Plugin/CKEditor5Plugin/PLUGIN_NAME.php
class PasteFilter extends CKEditor5PluginDefault{
// code goes here
}package.json : Dans ce fichier, nous devons déclarer la dépendance CKEditor et la configuration du pack Web, ce qui aidera à télécharger la dépendance CKE et à créer une build avec npm/yarn.
webpack.config.js : Dans ce fichier, nous devons déclarer le chemin et la configuration de la build. Drupal utilise le concept de build DLL, en fonction de la configuration/du chemin sur lequel il créera la build.
Créer un plugin basé sur CKEditor ES6
/js/ckeditor5_plugin/PLUGIN_NAME/src/
- index.js : exporter le plugin ; le but est de rendre un ou plusieurs plugins détectables.
- PLUGIN_NAME.js
Conclusion
Nous comprenons les bases du nouveau CKEditor-5 et quelques points clés de l’éditeur. Nous avons également souligné la fonctionnalité premium de CKEditor-5. Il existe un processus étape par étape pour créer un plugin personnalisé dans Drupal 10. Il créera le plugin factice pour vous ; en fonction de nos besoins et exigences, nous pouvons améliorer ce plugin.
Il existe une référence de l’API du plugin CKEditor-5 pour mieux comprendre.
Référence :
https://ckeditor.com/docs/ckeditor5/latest/framework/architecture/core-editor-architecture.html#plugins
février 27, 2024
Comment créer un plugin personnalisé dans Drupal Ckeditor 5
Introduction
CKEditor 5 est l’éditeur par défaut dans Drupal 10, ayant été initialement introduit dans Drupal 9.3. CKEditor 5 a été entièrement écrit à partir de zéro et est basé sur ES6. Ckeditor-5 offre également la flexibilité de créer des plugins personnalisés dans l’éditeur, tout comme ckeditor-4. Désormais, CKEditor 5 dispose de nombreuses fonctionnalités améliorées dans Drupal.
Fonctionnalités Premium de CKEditor 5
Le module CKEditor 5 Premium Features étend les fonctionnalités par défaut proposées dans le noyau. Il comprend des fonctionnalités telles que la collaboration en temps réel dans la zone de l’éditeur, l’exportation vers des fichiers PDF et Word, l’importation à partir de fichiers Word (.docx et .dotx) et le mode plein écran.
Quelques fonctionnalités premium mises en évidence de CKEditor 5
Pour activer la fonctionnalité Premium dans Drupal 10, nous devons acheter la licence et activer/configurer ce module. Tu peux lire ici sur les fonctionnalités premium de ckeditor5. CKE 5 Fournit un ensemble d’outils de débogage riches pour les éléments internes de l’éditeur tels que le modèle, la vue et les commandes.
Inspecteur CKEditor 5 : Drupal fournit un module de débogage appelé inspecteur CKEditor 5. il fournit la console de débogage, qui est utile pour déboguer et créer le plugin.
Nous pouvons télécharger et activer dans Drupal
Référence: https://www.drupal.org/project/ckeditor5_dev
Il fournit également un modèle de démarrage dans /ckeditor5_plugin_starter_template pour les modules fournissant des plugins CKEditor 5 personnalisés.
Étape 1 Copiez le ckeditor5_plugin_starter_template & collez-le dans le dossier du module et renommez-le (comme /module/custom/test). Remplacez MODULE_NAME par le nom de votre module dans tous les fichiers.
Étape : 2 Télécharger la dépendance : Depuis le répertoire racine du module, exécutez la commande installation npm (il téléchargera toutes les dépendances dans le dossier node_module, mentionné dans package.json)
Étape : 3 Réalisez une build : Dans le répertoire racine du module, nous devons exécuter npm exécuter la construction Il fera la construction et créera un fichier dans le /js/build/{nom_plugin.js} automatiquement.
Ça y est, le plugin Drupal est créé ; nous pouvons l’activer dans l’éditeur, le nom du plugin par défaut est simple_box_demo
Comprenons certaines utilisations de fichiers et le flux de travail
Il existe deux façons d’activer les plugins de classe Yml ou PHP
Utiliser Yml
MODULE_NAME.ckeditor5.yml
Il stocke les informations sur le plugin Drupal et le plugin ckeditor5.
Utiliser la classe PHP: La classe PHP n’est nécessaire que lors de l’utilisation de données dynamiques, c’est-à-dire si nous avons une configuration dans l’éditeur. Nous devons déclarer la classe dans le fichier .ckeditor5.yml.
Pour créer une configuration Drupal, nous devons créer un plugin Drupal CKEditor avec/src/Plugin/CKEditor5Plugin/PLUGIN_NAME.php
class PasteFilter extends CKEditor5PluginDefault{ // code goes here }package.json : Dans ce fichier, nous devons déclarer la dépendance CKEditor et la configuration du pack Web, ce qui aidera à télécharger la dépendance CKE et à créer une build avec npm/yarn.
webpack.config.js : Dans ce fichier, nous devons déclarer le chemin et la configuration de la build. Drupal utilise le concept de build DLL, en fonction de la configuration/du chemin sur lequel il créera la build.
Créer un plugin basé sur CKEditor ES6
/js/ckeditor5_plugin/PLUGIN_NAME/src/
Conclusion
Nous comprenons les bases du nouveau CKEditor-5 et quelques points clés de l’éditeur. Nous avons également souligné la fonctionnalité premium de CKEditor-5. Il existe un processus étape par étape pour créer un plugin personnalisé dans Drupal 10. Il créera le plugin factice pour vous ; en fonction de nos besoins et exigences, nous pouvons améliorer ce plugin.
Il existe une référence de l’API du plugin CKEditor-5 pour mieux comprendre.
Référence :
https://ckeditor.com/docs/ckeditor5/latest/framework/architecture/core-editor-architecture.html#plugins
VOUS TROUVEZ CECI UTILE ? PARTAGEZ-LE
Source link
Partager :
Articles similaires