Personaliza tu editor de texto web en Drupal con CKeditor 5

Enviado por christian el

Cuando creas un nuevo sitio web y usas un CMS para ello (que es lo más recomendable porque ahorras millones de horas jaja) seguramente tendrá integrado un editor de texto más completo que una simple caja donde meter tu contenido.

En Wordpress tienes por ejemplo Elementor. Esto diría que se les ha ido un poco las manos porque es como si hicieras tu web dentro de otra web. Es un ecosistema de edición tan grande que puedes hacer casi de todo. Desde arrastrar diseños da pre-definidos hasta editar tu css js directamente. Personalmente no me gusta desde el punto de vista técnico porque tienes 400 css y 1200 js para un sitio sencillo debido a la gran cantidad de capas que te inyecta.

Por otro lado en Drupal tienes el ckeditor en su versión 5. No se acerca ni de lejos a lo que te permite hacer el Elementor pero únicamente hace lo que tú le pidas (y esto creo ques es mucho más importante). Tienes el control de todo lo que insertas. Si inserto texto, sólo tengo texto; si inserto una imagen, sólo tengo esa imagen y no tengo nada de estilizados ni nada.

En Drupal 10 ya viene integrado en el core con una configuración por defecto bastante completa. La puedes ver en la zona de "Formatos de Texto"

Formatos de texto Drupal

Como  ves en la imagen ya tiene pre-configurado algunos tipos de textos. Según tu rol o puedes escoger o usar un editor único. Esto es bastante interesante cuando tienes diferentes tipos de usuario y no quieres, por ejemplo, que un editor de manuales pueda insertar imágenes mientras que un editor visual quieres que pueda (son combinaciones que rara vez ocurren, pero ocurren!)

En mi caso voy a configurar el HTML completo para tener yo el control de todo lo que quiera escribir. Un dato importante es que, a día de hoy (Febrero del 2024), si tienes activada la opción de editar html directamente en el editor, su configuración de hace más engorrosa porque no es capaz de procesar bien los estilos. Pero bueno, seguramente estará arreglado en poco tiempo!!!

Configuración opciones ckeditor

Como ves en la imagen es muy muy sencillo. Para configurarlo solo tienes que arrastrar los elementos que quieres habilitar o des-habilitar. Según a tú gusto. Dependiendo de las opciones que tengas, en la parte inferior tendrás una configuración específica. Por ejemplo en la imagen ves que tengo activada la opción de "Encabezados" que me permite escoger el tipo de etiqueta de cada texto (H2,H3, etc...) por lo que puedo seleccionar que tipos de H puedo usar

 

Justo debajo de estas opciones, tenemos una serie de filtros que también podemos activar o no. Esto nos permite asignar comportamientos por defecto al contenido que subimos. Por ejemplo en la imagen de abajo ves que tengo activada la opción "Lazy Load Images". Esto hará que toda las imágenes que suba mediante el editor de texto, se cargarán con el atributo "lazy" que hace que primero carge el texto de la página y después las imágenes

Configuración filtros ckeditor
Dinahosting: dominios y alojamiento web
My investor

Regístrate en MyInvestory tendrás un extra de 20€ ! :D

Usa el código U048395 y te llevas un regalo en tu primera inversión :)

Usa el código 22c80f y te llevas un regalo en tu primera inversión :)