Haga que su Drupal 9 CKEditor destaque: 7 módulos útiles que no sabía que existían

El editor de contenido es básicamente la función más crucial de un CMS. Y con una potencia como CKEditor como su herramienta de edición de texto enriquecido predeterminada, Drupal ha mejorado considerablemente su juego de administración de contenido con varias características nuevas para Drupal 8/9 como el sistema de widgets CKEditor y el Filtro de contenido avanzado (ACF). Entonces, sí, es bastante poderoso incluso con las características predeterminadas ... Pero realmente puedes mejorar tu juego de CKEditor con la ayuda de algunos módulos y complementos contribuidos. Siga leyendo para obtener nuestra opinión sobre los mejores y más interesantes complementos para ampliar las funciones y la usabilidad de CKEditor.

El CKEditor de Drupal 9

Primero, para aquellos que son nuevos en Drupal, CKEditor 4.5 es el editor enriquecido WYSIWYG (Lo que ves es lo que obtienes) predeterminado en Drupal 8/9. Es un editor de texto que ayuda a los administradores de sitios web a escribir y editar contenido directamente en las páginas web. Al igual que Drupal, CKEditor es un proyecto de código abierto y recientemente se ha actualizado con muchas funciones nuevas y potentes que seguirán mejorando. Como parte de la iniciativa de preparación de Drupal 10, los colaboradores de Drupal están trabajando para implementar la última y más moderna versión, CKEditor 5, en Drupal 10.

Ahora que tenemos lo básico fuera del camino, ¡entremos en las actualizaciones!

Ampliando CKEditor con estos fantásticos módulos de Drupal 9

1. CKEditor Leer más

¿Conoce esos momentos en los que quiere darle al lector la opción de ver el resto de una gran cantidad de texto? Esa es su señal para usar la función Leer más de CKEditor, que invita a sus usuarios a "seguir leyendo" sin dejar de darle a su página un diseño compacto. Para agregarlo, Drupal 9 proporciona una manera simple y fácil de habilitar la funcionalidad Leer más / Mostrar menos una vez que instale el módulo de colaborador.

Implementando el módulo:

Una vez que instale este módulo, deberá configurar algunos ajustes:

1. Edite el formato de texto preferido y habilite "Limitar etiquetas HTML permitidas".
2. Agregue <div data-readmore-less-text data-readmore-more-text data-readmore-type class = "ckeditor-readmore"> en “Etiquetas HTML permitidas”. Desactive el "Límite de etiquetas HTML permitidas" y presione guardar.
3. Ahora arrastre y suelte el icono "Leer más" de los botones disponibles a la barra de herramientas activa (como se muestra en la imagen de arriba) y presione guardar.
4. Después de borrar la caché, encontrará el icono " Leer más " en el editor de texto cuando elija el "Formato de texto preferido".

Cómo usarlo:

Dentro del área de contenido, haga clic en el icono " Formato de texto ". Ahora obtendrás una caja rectangular. Agregue el resto del contenido que desea mostrar después de que su usuario haga clic en Leer más.

Preguntas frecuentes: ¿Puedo modificar el texto Leer más?

¡Absolutamente! Simplemente haga clic en la pestaña "Botón Leer más" en "Configuración del complemento CKEditor" y cambie el texto.

2. Botón de color de CKEditor

De forma predeterminada, CKEditor no le ofrece la opción de cambiar el color del texto desde el editor. Pero si desea cambiar el color de un texto específico o incluso resaltar el texto con diferentes colores, el módulo Drupal 9 CKEditor Color Button debería estar en su lista. Tenga en cuenta que este módulo también requiere la instalación del módulo de botones del panel y ambos módulos requieren que se instalen las bibliotecas, la biblioteca de botones de color y la biblioteca de botones del panel. Después de instalar los módulos y agregar bibliotecas en la carpeta de bibliotecas del tema, podemos mover el botón de colores de Botones disponibles a la barra de herramientas Activa en el formato de texto preferido.

Preguntas frecuentes: ¿Puedo agregar un color personalizado?

¡Sí! Si no desea utilizar ninguno de los colores predeterminados que ya están disponibles, también puede configurar un color personalizado. Puede hacer esto en la sección "Formato de los editores de texto" donde activó las opciones de color. Busque el "botón Color de CKEditor" en la sección "Configuración de complementos de CKEditor" de "Formato de editores de texto" y agregue color en el área de texto "Colores de texto" separados por comas y sin el signo #.

3. CKEditor Youtube

El módulo de Youtube de Drupal 9 CKEditor le ayuda a agregar videos de Youtube a su contenido sin un código de inserción largo. Después de instalar y mover el formulario de íconos de Youtube de Botones disponibles a la barra de herramientas Activa, puede encontrar íconos de Youtube en el editor de texto en el formato de texto preferido. Este módulo depende de la biblioteca.

Una de las mejores cosas de este módulo es la flexibilidad. Como se muestra en la captura de pantalla anterior, puede "Pegar código de inserción" o pegar una URL de Youtube mientras especifica el ancho y alto. También tiene opciones útiles como "Reproducción automática", "Comenzar a las (hora específica)" y "Mostrar controles del reproductor".

4. Interfaz de usuario de plantillas CKEditor y plantillas CKEditor

¿Tiene la misma estructura de contenido para las páginas o publicaciones de su sitio web? Los módulos CKEditor Templates y CKEditor Templates User Interface son su boleto para una fácil duplicación. Ambos módulos dependen de bibliotecas que se pueden descargar e instalar como se indica en las páginas del módulo. Después de instalar estas bibliotecas, puede mover el icono de plantilla de los botones disponibles a la barra de herramientas activa como se muestra en la imagen de abajo.

El módulo CKEditor Templates proporciona un cuadro de diálogo emergente con plantillas predefinidas. Cuando haga clic en el icono de la plantilla (como se muestra en la captura de pantalla anterior) verá una ventana emergente abierta, elegirá cualquiera de sus plantillas predefinidas. A continuación, la plantilla se insertará con los "estilos y formato de texto" que se incluyen.

El módulo de interfaz de usuario de plantillas de CKEditor es lo que utiliza para crear las plantillas que elige en el módulo de plantillas de CKEditor . Después de habilitar el módulo, encontrará una opción en la sección Configuración> Creación de contenido> Plantillas de CKEditor .

Cuando haga clic en Plantillas de CKEditor desde la configuración, será redirigido a la página de plantillas de configuración de CKEditor . Ahora puede agregar o editar plantillas.

5. CKEditor CodeSnippet

Usando el módulo CKEditor CodeSnippet, puede agregar su "contenido de código" dentro del contenido para que esté resaltado y bien formateado. Este módulo usa la biblioteca highlight-js y todos los estilos disponibles para ella. La instalación de este módulo con Composer instalará la biblioteca automáticamente. Después de instalar este módulo, puede mover el icono de "fragmento de código" del botón Disponible a la barra de herramientas Activa.

Ahora encontrará la pestaña Fragmento de código en la configuración de formato de texto del complemento CKEditor . Aquí puede marcar / desmarcar los lenguajes de programación compatibles.

FAQ: ¿Cómo se usa?

Una vez que instale el módulo, puede insertar la función CodeSnippet en su contenido de CKEditor. Cuando haga clic en el icono del fragmento de código, aparecerá una ventana emergente. Aquí, puede pegar su código y seleccionar el idioma del código.

6. CKEditor Wordcount

Así que está trabajando con un límite de palabras / caracteres ... Esta es una situación común en sitios muy estilizados con diseños dinámicos. Y esos pueden ser especialmente complicados si varias manos trabajan en el mismo contenido. En estos casos, es útil ver la cantidad de caracteres y palabras directamente en su CKEditor en el pie de página del propio editor (como lo haría en MS Word). Ahí es cuando instalaría el módulo CKEditor Wordcount. Después de instalar el módulo y la biblioteca, puede encontrar "recuento de palabras y de caracteres" en la configuración del formato de texto del complemento CKEditor . Aquí, puede marcar / desmarcar funciones según sus necesidades. También encontrará un contador en CKEditor en la parte inferior derecha.

7. Texto tweetable de CKEditor

¿Estás intentando ganar puntos de Internet? Con el módulo de texto tweetable de CKEditor, puede dar la opción a sus usuarios de twittear un fragmento de texto en particular haciendo clic en una palabra o sintaxis. Simplemente instale el módulo y la biblioteca como se indica en la página del módulo y mueva el ícono de texto tweetable desde el botón Disponible a la barra de herramientas Activa. A continuación, encontrará un icono de tweet en el editor de texto. Al hacer clic en este icono, se abrirá una ventana emergente. Aquí, puede agregar un Texto de visualización (para qué palabra (s) desea agregar el ícono de tweet) y Texto de tweetable (el texto que aparecerá en el Tweet). Cuando un usuario hace clic en Mostrar texto , se redirigirá a Twitter y se mostrará el texto tweetable .