Aprende a ocultar botones y personalizar la barra del editor

Entre las novedades que llegaron con el lanzamiento WoltLab Suite 6 puede destacarse la integración de un nuevo editor de texto. Así, con la nueva versión de la Suite, WoltLab dejó atrás a Redactor II e integró el nuevo CKEditor 5. CKEditor es un editor de texto HTML/WYSIWYG. “What You See Is What You Get” o, dicho en español, "Lo que ves es lo que hay". Es decir, nos encontramos ante un editor visual que intenta mostrar una representación lo más fidedigna posible del texto mientras escribimos.

Con esta integración, WoltLab también incluyó otras novedades, entre ellas, la posibilidad de desactivar el tipo, color y tamaño de fuente. El equipo alemán argumenta que muchas veces los usuarios hacen usos indebidos del formato de texto, ya sea por desconocimiento o por gustos personales concretos. Esto hace que muchas veces se mezclen colores, tipografías y tamaños de letras que, lejos de mejorar la lectura de los mensajes, dificulta la lectura tanto para las personas humanas como para los motores de búsqueda.

Por otra parte, algunos foros pueden no requerir el uso de todas las opciones que incluye CKEditor en WoltLab Suite, o algunos administradores pueden desear limitar aun más las opciones que incluye el editor para sus usuarios. Con este pretexto @bundesliganews propuso en el foro oficial de WoltLab que la barra del editor pueda ser configurable por los administradores en el panel de administración. De momento el equipo de WoltLab no se ha pronunciado sobre esta sugerencia, sin embargo, los usuarios @norse y @DEG 1935 nos ofrecen una solución basada en código CSS para ocultar los botones del editor.

Comprueba el título del botón

Antes que nada deberás comprobar el título o nombre del botón que deseas ocultar. Para ello, pasa el cursor por encima del botón que deseas ocultar y comprueba el título del botón. En el caso de este ejemplo ocultaremos el botón Insertar tabla. Si tenemos más de un idioma instalado en nuestra comunidad deberemos comprobar el nombre en todos los idiomas, por ejemplo, este mismo botón en inglés se llama Insert table y en alemán Tabelle einfügen.

Adapta el código CSS

Como podrás ver en el código mostrado a continuación, hemos puesto el título del botón elegido en los tres idiomas. En tu caso deberás adaptar este código poniendo el título del botón que elijas y los idiomas que tengas instalados en tu comunidad online.

/*OCULTAR BOTÓN DEL EDITOR
Gracias a @norse y DEG 1935*/

.ck.ck-button[data-cke-tooltip-text="Insertar tabla"], .ck.ck-button[data-cke-tooltip-text="Insert table"], .ck.ck-button[data-cke-tooltip-text="Tabelle einfügen"]  {
	display: none !important;
}

Copia el código en los ajustes globales

Copia el código anterior en el Panel de Control de Administración en la ruta "Personalización → CSS y SCSS globales". Te recomendamos siempre que comentes el código CSS, igual que hacemos nosotros al principio de este ejemplo utilizando /*Comentario*/, así te será más fácil en el futuro encontrar los diferentes ajustes en tu hoja de estilo y entender los cambios que has ido realizando.

En WoltLab Community | Personalizar la barra de formato del editor (en alemán)