Texto a color en editor Wysiwyg fácilmente

Muchas veces los editores de contenido quieren tener más control a la hora de crear contenidos, buscan poder así manejar formatos de texto y más. En Drupal usamos el editor de texto CKEditor sin embargo para conseguir usar colores en los textos necesitamos hacer algo más y lo vamos a ver a continuación.

Tenemos que crear un archivo css dedicado al ckeditor, esto con el fin de no cargar otro archivo existente que sea mucho más grande.

Debemos decirle a Drupal que el archivo CSS debe cargarse específicamente cuando el editor esté activo. Haremos una modificación en el archivo mi_tema.info.yml añadiendo la propiedad ckeditor5-stylesheets.

name: Mi Tema Personalizado
type: theme
core_version_requirement: ^10 || ^11
# ...
ckeditor5-stylesheets:
 - assets/css/ckeditor-styles.css

Es importante recordar que cuando se modifica el archivo .info.yml se debe limpiar la caché para reflejar el cambio.

Hasta este punto lo que corresponde es configurar el formato de texto

• Nos dirigimos a  Configuración > Contenido > Formatos de texto y editores.
• Editaremos el formato que vamos a usar (ej. HTML Full o HTML Basic).
• Nos debemos asegurar de que el botón Style (Estilo) esté en la barra de herramientas activa del editor de texto. 

• En la parte inferior, busca la pestaña Configuración del estilo y añade tus reglas:
  Ejemplo:

  span.black|Negro
  span.white|Blanco
  span.yellow|Amarillo

• Y esas clases con elementos deben estar relacionados al archivo CSS

span.white {
 color: #FFF;
}
span.black {
 color: #000;
}
span.yellow {
 color: #FDC400;
}