Bloc
Joan Galtés i Moreno

Explorant les novetats de CKEditor 5 en la creació de continguts a Drupal 10

Novetats de CKEditor 5 a Drupal
En aquest article explorarem les impressionants capacitats de CKEditor 5, incloent el seu disseny renovat, la gestió de vincles, la manipulació d'imatges, l'edició de taules, la personalització de fonts, l'incrustació d'HTML i les emocionants funcions premium que aporta.

CKEditor és un editor de text en línia potent i versàtil que es fa servir sovint en sistemes de gestió de continguts com Drupal. Capacita els creadors i editors de continguts amb una interfície amigable per crear i formatar text, incorporar elements multimèdia i gestionar diversos tipus de continguts.

La versió més recent, CKEditor 5, introdueix importants millores i noves funcionalitats, des d'un disseny modern fins a característiques avançades que agilitzen la creació de continguts. Aquesta versió ve inclosa de sèrie amb Drupal 10, oferint així un gran avantatge quan actualitzes el teu lloc web Drupal actual.

Endinsem-nos en les possibilitats creatives que CKEditor 5 ofereix per millorar els teus continguts digitals.

↑ Tornar a dalt

Què hi ha de nou a Drupal 10

Arrossega i deixa 

La funció d'arrossegar i deixar de CKEditor 5 transforma l'experiència d'edició de continguts, proporcionant una comoditat excepcional per als editors. Això permet als editors reorganitzar fàcilment text, paràgrafs, taules i llistes dins de l'editor, millorant la fluïdesa de la composició de continguts. La capacitat de moure blocs sencers o diversos elements amb una senzilla acció d'arrossegar i deixar ofereix una avantatge significativa en temps, agilitzant el procés d'edició. A més, els editors poden importar de manera fluida continguts HTML o de text pla des de fonts externes, simplificant la integració d'imatges en el seu treball. Aquesta funció no només millora l'eficiència sinó que també atorga als editors un major control i flexibilitat per crear continguts visualment atractius i ben organitzats.

Enllaços 

Una àrea que ha experimentat millores rellevants és la gestió de vincles. Afegir vincles a CKEditor 5 és ara més intuïtiu i fàcil d'usar, ja que apareix una pràctica finestra emergent dins de la finestra WYSIWYG. Això fa que el procés sigui més suau i ràpid. Aquestes opcions de vinculació es poden combinar amb el mòdul 'Editor Advanced Link' de Drupal, que atorga als creadors de continguts la capacitat d'ajustar els seus vincles. Amb aquest mòdul, els editors poden definir atributs com títol, classes CSS, IDs, objectius de vincle, atributs 'rel' i etiquetes ARIA, que són essencials per proporcionar als usuaris que utilitzen tecnologies d'assistència, com lectors de pantalla, informació significativa sobre el propòsit o el contingut del vincle.

Creació d'enllaços a CKEditor 5 amb Drupal 10

Aquestes millores ofereixen una gran quantitat d'opcions de personalització per als vincles, ja sigui per accessibilitat, marca o estil precís. CKEditor 5 i el mòdul 'Editor Advanced Link' junts proporcionen una experiència lògica de gestió de vincles a Drupal, fent que el procés sigui més eficient i versàtil.

Manipulació d'imatges 

Afegir imatges al teu contingut amb CKEditor 5 ha millorat gràcies a la nova funcionalitat d'arrossegar i deixar. Els usuaris poden seleccionar simplement una imatge, ja sigui des del seu dispositiu o una pàgina web, i arrossegar-la i deixar-la a la finestra WYSIWYG. Una vegada incorporada la imatge, tens l'opció de designar-la com a decorativa (és a dir, que no afegix informació a la pàgina i, per tant, no requereix text alternatiu) o proporcionar el text alternatiu.

A més, pots ajustar la presentació de la imatge mitjançant l'aliniaments i les opcions d'embolcall de text, tot això des de la barra d'eines de la imatge. Si desitges enriquir la teva imatge amb un vincle o una llegenda, pots fer-ho fàcilment sense sortir de la barra d'eines de la imatge.

Introducció de texts alternatius a imatges  amb CKEditor 5 a Drupal 10

Quan estiguis llest per ajustar la mida de la imatge, CKEditor 5 simplifica el procés permetent-te redimensionar la imatge directament dins de la finestra WYSIWYG. Una senzilla selecció de la cantonada i un arrossegament et permeten personalitzar la imatge a les dimensions desitjades.

Alineament d'imatges amb CKEditor 5 a Drupal 10

A més, CKEditor 5 es integra amb els mitjans de Drupal. Un cop activats els mòduls necessaris, descobriràs un nou botó en la configuració de la barra d'eines de l'editor de text. Afegeix aquest botó a la teva barra d'eines activa, especifica els tipus de mitjans i els modes de visualització que vols fer disponibles i guarda les teves preferències. Aleshores podràs afegir de manera convenient nous fitxers multimèdia o seleccionar-los de la teva biblioteca multimèdia, seguint el flux de treball estàndard al qual estàs acostumat (estàs limitat a redimensionar la imatge quan utilitzes la biblioteca). CKEditor 5, juntament amb la seva compatibilitat amb els mitjans de Drupal, millora l'experiència de gestió d'imatges, convertint-la en un procés amigable i eficient.

Gestió de taules 

Les millores en la gestió de taules de CKEditor 5 ofereixen una millor experiència d'edició. Tot i que actualment requereix un ajust a Composer, l'esforç val la pena per a aquells que utilitzen sovint taules en els seus continguts.

Pots especificar el nombre de columnes i files i incloure un títol opcional per a la taula. Una vegada configurada la taula, es posen a disposició una àmplia gamma d'opcions d'edició, oferint una major flexibilitat i control sobre les propietats de la taula i les cel·les. Aquestes edicions inclouen funcionalitats essencials, com afegir o eliminar columnes i files, fusionar i dividir cel·les, i personalitzar estils tant per a tota la taula com per a cel·les individuals. Pots ajustar l'aliniaments de text i fins i tot introduir colors de fons per millorar l'atractiu visual de les teves taules.

CKEditor 5 també ofereix la capacitat de nestificar taules dins de les cel·les d'altres taules, proporcionant una eina versàtil per crear gràfics o dissenys intrincats basats en estructures de taules. Aquesta funció permet als creadors de continguts formatejar la taula nestificada amb la mateixa facilitat i flexibilitat que una taula independent, ampliant les possibilitats per dissenyar dissenys de continguts complexos i ben organitzats.

Aquestes millores en CKEditor 5 fan que treballar amb taules sigui més eficient i fàcil d'usar, donant als creadors de continguts la possibilitat de presentar les seves dades i continguts d'una manera estructurada i visualment atractiva.

Tipografies

Modifica les fonts en el teu contingut amb CKEditor 5. Mitjançant la instal·lació del mòdul 'CKEditor Font Size and Family', pots desbloquejar una àmplia gamma d'opcions d'edició de text i fonts directament a la pantalla WYSIWYG. Amb només algunes configuracions senzilles dins de l'editor de text, els editors poden ajustar no només les mides i les famílies de les fonts, sinó també aplicar colors de text i colors de fons de text, millorant l'atractiu visual del text i les possibilitats de personalització.

↑ Tornar a dalt

Altres extensions per CKEditor 5

Auto Save 

La funció de guardat automàtic és una millora significativa. Guarda automàticament les teves dades i les envia al servidor quan és necessari, assegurant que el teu contingut estigui segur, fins i tot si t'oblides de prémer 'Guardar'. Tot i que requereix la instal·lació i una mica de codi, la tranquil·litat que ofereix val la pena el temps de configuració.

Markdown 

Amb el connector Markdown, pots canviar de la sortida HTML per defecte a Markdown. Això és fantàstic per a aquells que prefereixen una sintaxi de format lleugera i amigable per als desenvolupadors. La millor part? Està disponible directament fora de la caixa, fent que la creació de continguts sigui més flexible i eficient.

Llistes de tasques 

La funció de llistes de tasques de CKEditor 5 és una addició pràctica al teu conjunt d'eines de creació de continguts. Et permet crear caselles de selecció interactives amb etiquetes, que suporten totes les funcions de llistes amb punts i numerades. Incluso pots anidar llistes de tasques amb altres tipus de llistes per obtenir una experiència de gestió de tasques versàtil. Tot i que requereix la instal·lació, els beneficis organitzatius que porta valen la petita feina de configuració.

↑ Tornar a dalt

Funcionalitats Premium 

Aprofita les funcions premium de CKEditor 5 amb facilitat. Instal·la i activa el mòdul 'CKEditor 5 Premium Features', configura'l afegint la teva clau de llicència i ajusta la barra d'eines del teu editor de text. Llavors, estaràs preparat per explorar les característiques excepcionals, com ara seguiment de canvis, comentaris, històric de revisions i col·laboració en temps real, que milloren l'edició col·laborativa, les discussions, el control de versions i el treball en equip harmoniós, agilitzant la creació i revisió de continguts per millorar l'eficiència i la precisió.

Seguiment de canvis 

La funció de seguiment de canvis aporta una experiència dinàmica a l'edició de documents. Marca i suggereix automàticament els canvis que fas. Els usuaris poden canviar ràpidament al mode de seguiment de canvis, on totes les edicions generen suggeriments que es poden revisar, acceptar, descartar o comentar, millorant el procés d'edició col·laborativa.

Històric de revisions 

La funció d'històric de revisions pot ser el teu acompanyant de confiança per a la versió de documents. T'habilita per gestionar el desenvolupament del contingut amb facilitat. A diferència de la funció de registre de revisions per defecte de Drupal, el mode de visualització prèvia ofereix una visió completa dels canvis de contingut i els col·laboradors que hi ha darrere, tot dins de l'editor. Els usuaris poden comparar i restaurar versions anteriors de documents.

Comentaris 

Amb la funció de comentaris, els usuaris poden anotar seccions específiques del contingut, ja sigui text o elements de bloc com ara imatges. Facilita les discussions amb fils i ofereix la flexibilitat de suprimir comentaris una vegada que les discussions han conclòs, fomentant la col·laboració i els comentaris efectius.

Col·laboració en Temps Real 

La col·laboració en temps real permet que diversos autors treballin simultàniament en el mateix document de text ric. A més, proporciona una llista de presència d'usuaris, oferint una vista en viu dels participants actius al document. Mentre altres funcionalitats de col·laboració poden ser utilitzades de manera asíncrona, la col·laboració en temps real permet un treball instantani en equip.

Importació Word/Exportació Word i PDF

Quan està instal·lat, el mòdul Importació Word/Exportació Word i PDF facilita la importació i exportació senzilla dels formats esmentats. Tot i que la funcionalitat d'exportació és plenament estable en CKEditor, els convertidors es consideren experimentals per a Drupal en aquest moment. La importació de fitxers .docx i .dotx conservarà el format, els comentaris i fins i tot els canvis realitzats.

Sistema de Notificacions 

A més d'aquestes funcionalitats de col·laboració, CKEditor introduirà un nou sistema de notificacions per mantenir els editors i escriptors ben informats sobre l'estat del contingut. Estigueu al dia amb notificacions en temps real, assegurant un flux editorial més suau.

Paquet de Productivitat 

El Paquet de Productivitat és un conjunt de funcionalitats Premium que faciliten l'edició de documents de manera més ràpida, fàcil i eficient.

Les característiques del Paquet de Productivitat inclouen:

  • Plantilles, que us permeten crear i inserir estructures de contingut prèdefinides a l'editor, estalviant temps i assegurant coherència en la visualització del contingut.
  • Comandes Slash, que us permeten executar accions utilitzant la tecla / i crear les vostres pròpies accions personalitzades. Això pot ajudar a simplificar la creació de contingut, reduint la navegació a través de les opcions de l'editor i estalviant temps.
  • Document outline, que afegeix un esquema automàtic dels títols del document en una barra lateral per ajudar en la navegació del document.
  • Taula de continguts, que insereix una taula de continguts enllaçada al document, que s'actualitza automàticament a mesura que s'afegeixen títols i es manté en les dades de sortida de l'editor.
  • Format painter, que copia el format i els estils del text i els aplica a una altra part del contingut. Això ajuda a garantir una formatació consistent arreu del contingut, estalviant temps de l'editor i contribuint a una aparença més professional.
  • Paste from Office, que permet copiar i enganxar sense errors des de MS Word i Excel. Es conserva el text formatat, taules complexes, mitjans i dissenys, convertint el contingut d'Office en HTML net. També proporciona un complement de pantalla completa que maximitza la zona d'edició, cosa que és molt útil quan s'utilitzen funcions premium com comentaris i l'esquema de document, ja que ocupen espai addicional al voltant de l'editor.

    Es poden trobar demos d'aquestes característiques de CKEditor 5 a través d'enllaços a la pàgina del projecte del mòdul. Hi ha moltes altres característiques, tant no Premium com Premium, que es poden instal·lar fora del mòdul de Drupal amb certa implicació del desenvolupador, les quals es poden trobar aquí.

↑ Tornar a dalt

Conclusió 

En aquest article, hem explorat les millores significatives de CKEditor 5 per als creadors i editors de continguts a Drupal 10. CKEditor 5 ofereix una millora en la gestió d'enllaços, una manipulació d'imatges sense esforç, una edició de taules simplificada, una personalització de fonts versàtil i una incrustació HTML simplificada. També hem destacat extensions emocionants que milloren el procés de creació de continguts.

A més, les característiques Premium de CKEditor 5, com ara Seguiment de Canvis, Històric de Revisions, Comentaris, Col·laboració en Temps Real, Importació/Exportació per a Word i PDF, Sistema de Notificacions i el Paquet de Productivitat, aporten capacitats avançades per a l'edició col·laborativa i una creació de continguts eficient.

A mesura que t'endinsis en les característiques de CKEditor 5, et convidem a explorar més a fons i experimentar els avantatges de primera mà. És un canvi de joc per a l'edició de continguts i la col·laboració a Drupal 10. Desencadena la teva creativitat i descobreix una experiència d'edició de continguts més eficient i professional amb CKEditor 5.

↑ Tornar a dalt

Sobre l'autor/a

Joan Galtés i Moreno

Desenvolupador full-stack, especialitzat en Drupal des de 2008. M'agrada concebre i desenvolupar tant el back-end com el front-end en tots els meus projectes. Entusiasta de les noves tecnologies, amb un bon domini de PHP, MySQL, Git, Javascript, HTML 5, SASS i CSS 3, posant molt d'èmfasi en la usabilitat i l'accessibilitat de tot allò que desenvolupo.

Comparteix

Deixa el teu comentari