Per actualitzar a Drupal 10 un dels canvis més importants és l'actualització del mòdul CKEditor a CKEditor5.
Aquest canvi afecta tots els editors de text del lloc web modificant la manera com apareixen.
El canvi més important és el referent als paràmetres i 'plugins' creats fins ara, aquests deixen de funcionar i s'hauran d'adaptar al nou format que requereix aquesta nova versió.
Per canviar de CKEditor 4 a CKEditor 5 a Drupal 10, seguiu aquests passos:
Si ja estàs utilitzant la versió de Drupal 9.4 o 9.5 trobaràs el mòdul CKEditor5 a la secció corresponent als mòduls al teu lloc web.
Inicia sessió com a administrador al teu lloc de Drupal i ves a la pàgina d'administració de mòduls . Si utilitzeu una versió inferior de Drupal no apareixerà, cal actualitzar a 9.4 o 9.5.
Habilita el mòdul CKEditor 5, busca 'CKEditor 5' a la llista de mòduls i marca la casella de selecció al costat. Després, feu clic al botó "Guardar configuració" per habilitar el mòdul.
Es recomana llegir la documentació i ajuda que proporciona el mateix mòdul.
Ves a la pàgina on es troben els formats de text incorporats al teu lloc web /admin/config/content/formats.
Veuràs que a la columna 'Editor de text' apareix l'editor de text emprat per a cadascun, editarem els que en aquesta columna apareix CKEditor.
Un cop dins de cada format de text, hem de buscar un 'select ' títol 'Editor de text' el qual estarà amb el valor CKeditor, caldrà canviar el valor a CKEditor5.
Automàticament el CKEditor5 reajusta el format de text per mantenir les mateixes configuracions que existien prèviament. Apareixerà una notificació segons si es correcte.
És obligatori per a qualsevol format de text a CKEditor5 que existeixin els 'tags' i com a mínim, no podrem mantenir un format de text sense aquests 'tags'.
Si el plugin de' Style' apareix com a activat però buit, en aquest cas caldrà treure el botó de 'Style' de la barra d'eines activa, només cal arrossegar el botó fora.
Comprovar que els filtres habilitats, l'ordre de processament de filtres, els rols, els 'tags' permesos, els 'plugins i les seves configuracions (sense comptar el Source editing, explicat al pas següent) són els mateixos que amb l'antic format de text a CKEditor4.
El Source editing apareixerà modificat perquè el tractament d'aquest plugin a CKEditor5 és diferent de la versió anterior i el mateix CKEditor el modifica perquè aparegui correctament, tot i això el mateix Plugin incorpora un missatge d'ajuda a la part inferior del 'textarea' on introduir les dades.
Hi ha diverses funcionalitats per defecte a CKEditor 5 que potser et desesperen, ja que a la versió 4 no havies de preocupar-te per elles i ara si.
El canvi pot ser que et descol·loqui una mica, però sempre pots modificar o afegir funcionalitats utilitzant Javascript.
Exemple: Per eliminar l'atribut 'lang' al copiar i enganxar a un editor de CKEditor5
if (typeof CKEditor5 !== 'undefined') {
var ckeditor;
var editor;
var domEditableElements = document.querySelectorAll('.ck-editor__editable');
for (let domEditableElement of domEditableElements) {
ckeditor = $(domEditableElement).closest('.ck-editor');
editor = domEditableElement.ckeditorInstance;
editor.editing.view.document.on('clipboardInput', (evt, data) => {
if (data.dataTransfer.getData('text/html') != '') {
const dataTransfer = data.dataTransfer;
const content = dataTransfer.getData('text/html').replaceAll('lang=', '');
data.content = editor.data.htmlProcessor.toView(content);
}
});
}
}
Toni Caballero
Toni Caballero
Quim Parnau