Conociendo el WYSIWYG estándar de Drupal

30 September 2019
0 Comentarios
Conociendo el WYSIWYG estándar de Drupal

WYSIWYG es un acrónimo en inglés que traducido significa "Lo que ves es lo que obtienes" utilizada para los sistemas de creación de documentos Web. Básicamente son editores que le ofrecen la ventaja a los usuarios de crear o adaptar contenidos visualmente sin tener ningún conocimiento de programación. 

Drupal 8 usa CKeditor como su WYSIWYG por defecto, este trae muchas funciones muy útiles para los editores, algunas no activadas por defecto y otras muchas más que se pueden extender con módulos contribuidos. En este artículo nos vamos a concentrar en las funcionalidades que ya vienen por defecto con una instalación estándar de Drupal, en otros artículos cubriremos cómo podemos aumentar esas funcionalidades con otros módulos.

 

1. Conociendo sus modos de formato de texto

  • Podemos cambiar los formatos de texto seleccionando sobre las opciones indicadas
Cuerpo de texto

                                             

  • El html básico posee tiene funciones básicas para texto e imagen
img ayuda
  • El html imágenes posee funciones para alinear texto pero carece de botones de estilo de texto              

 

Cuerpo de texto

 

  • El html completo posee casi todas las opciones para visualizar contenido
cuerpo de texto
  • En el html restringido se requiere introducir código html y solo permitiría algunas etiquetas 

                   

Html

 

2.Configurar los editores de texto

Es posible configurar o añadir funciones a los editores dependiendo de nuestras necesidades o también teniendo en cuenta para qué roles se pueden requerir ciertas configuraciones

Img centrada

 

  • En nuestro caso utilizaremos HTML completo, y podemos configurar para que roles se pueden establecer
HTML Completo
  • Más abajo encontramos la franja para personalizar la barra de herramientas para el formato HTML completo
img

 

  • Los botones disponibles son los que están habilitados para añadir a dicha barra de herramientas, en la siguiente imagen se indica que podemos arrastrar un botón a un grupo de la barra de herramientas activa, o si se desea se puede añadir un grupo y poner los botones elegidos 
barra

Al añadir el grupo ponemos el nombre                                      

Nombres del grupo botones

Este sería el resultado    

Estilos

                                                     

Se proporciona también la posibilidad de cambiar las configuraciones para las imágenes que se insertan en el editor, según el directorio de se guardaran, el tamaño máximo permitido en las imágenes y su dimensiones con los que serán mostrados   

   

Image

 

Los filtros activos se aplicarán al utilizar el formato de texto, esto cambios serán reflejados     

   

Filtros activos

              

 

3.Funcionamiento de cada una de los botones

  • Se selecciona el texto con el mouse damos en el botón b  para aplicar la negrilla          
Cuerpo de texto

 

  • Para aplicar el texto en itálica damos en el botón I  y veremos el resultado
cuerpo

 

  • Para aplicar tachado de texto damos en el botón s y veremos el resultado   
Cuerpo de texto

  

  • Si necesitamos aplicar expresiones matemáticas como los exponentes damos en los botones x y veremos el resultado                                                                   

 

ejemplo
  • En algunas ocasiones es necesario borrar formato para un texto a pegar, para que quede con la misma fuente del editor se presiona tx   para aplicar el cambio

 

  • Para añadir enlaces seleccionamos texto y se da en el botón Infinito  y luego se añade algún enlace para aplicar cambio                     

         

Añadir enlace

                                 

 

Este es el resultado

Resultado

Si requerimos quitar el enlace oprimimos el botón Infinitox teniendo seleccionado el mismo texto que hemos seleccionado

Texto

 

Podemos añadir viñetas con estos botones Dos opciones y obtenemos el resultado en la siguiente captura     

         

ejemplo

                                     

 

  • Podemos citar un texto oprimiendo el botón Comillas

El presupuesto

  • Si necesitamos agregar imágenes, clic a este botón imagen seleccionamos una imagen que tengamos en local y el texto alternativo, la alineaciòn de la imagen es opcional                         
Añadir imagen

           

Este sería el resultado 

Imagen y cuerpo                                      

  • Para insertar una tabla hacemos clic a este botón Tablaluego insertamos las características                                                                
Propiedades de la tabla

Aceptamos las propiedades y este sería el resultado

Resultado de tabla

                                                           

  • Si queremos añadir una línea separadora lo podemos hacer con este botón Linea textoy este sería resultado         
Texto

                     

  • Para el tamaño de los títulos desplegamos esta lista desplegable Normaly podemos elegir entre 4 opciones en nuestro caso elegiremos en encabezado más grande                                   
Ejempl

  

Este sería el resultado

    Hola mundo               

Muestra las regiones en las que está dividido el contenido añadido, en función de los elementos HTML que se han ido creando por debajo.

  • Si queremos ver las regiones en las que está dividido el contenido añadido, en función de los elementos HTML que se han ido creando por debajo damos en este botón Recorte así visualizamos el editor   
prueba

                                          

  • Si tenemos ciertos conocimientos de html y necesitas realizar un ajuste por código puedes ingresar a ese modo con este botón  Fuente HTMLy ya se podrá visualizar el código       

           

prueba

                                   

  • Si tenemos dudas respecto a las etiquetas permitidas en el formato de texto puedes ir a este botón formato de textoubicado abajo a la derecha del editor  para abrir la página de consejos de redacción

4. Los botones disponibles

Estos botones no suelen estar habilitados en las barras de herramientas en una instalación estándar pero se pueden habilitar siguiendo las indicaciones escritas en la configuración

Estilos

En nuestro caso añadimos un grupo para habilitar todos lo botones disponibles y guardamos configuración con el botón de la parte inferior de la configuración                                                       

Pruebas

El editor se verá más o menos así con los botones añadidos

ejemplo
  • Para subrayar texto basta con oprimir este botón u y este sería el resultado      
si

 

  • Para alinear texto hacia la izquierda oprimimos Lineas aunque suele ya estar por defecto 
  • Para alinear texto hacia el centro oprimimos Centray este sería el resultado                                                 
texto
  • Para alinear texto hacia la derecha oprimimos Línea a la izquierda  y este sería el resultado                                                     
cuerpo de texto
  • Para alinear texto a justificado oprimimos lineas y este sería el resultado                                    
cuerpo de texto
  • Para deshacer y rehacer los cambios en editor es con estos botones flechas
  • Podemos usar estos botones para cortarpara cortar, copiar y pegar contenido
  • Para pegar texto plano podemos utilizar este botón listasaunque no en todos los navegadores en general funcionaria, igualmente al dar clic muestra un aviso de como hacerlo con una combinación de teclas
Aviso

                                                                      

  • Para pegar un texto desde word lo hacemos con el botón ayuda
  • El botón icononos permite insertar caracteres especiales en el texto como los que se muestran en la siguiente imagen       
sopa de letras

                                                                 

  • Este botón icono nos permite fijar el lenguaje del texto, por ejemplo si elegimos inglés, en el editor se fijará de la siguiente manera
Mas de 100
  • Si queremos trabajar en el editor en pantalla completa damos en este botón flechas
  • La lista desplegable Estilosestaría bloqueada hasta que se le añada las opciones de estilos, dependiendo de cómo se configure en el formato de texto actual desde administración. Sin embargo se requieren conocimientos de estilos css para configurar este apartado de extensiones de CKEditor y poner en funcionamiento este componente de selección, y cuyo objetivo es seleccionar un estilo que ya esté establecido desde css
imagen

 

De esta forma hemos hecho el recorrido de las diferentes opciones que nos ofrece el editor, espero les haya sido de utilidad.

 

 

 

 

 

Alejandro Patiño
Alejandro Patiño Cardona