Como añadir CKeditor a formularios en Drupal

Cuando desarrollamos formularios en Drupal, siempre añadimos campos, tenemos una lista grande de campo, el problema puede ser cuando necesitamos que el usuario pueda darle formato al texto para que tenga un aspecto muy concreto.

En esos casos tenemos la solución de utilizar el tipo de campo llamado "text_format", este tipo de campo nos permite utilizar un editor de texto para que el usuario pueda darle el formato que necesite, y aunque es muy sencillo de utilizar vamos a ver paso por paso lo que necesitamos incluyendo el renderizado, que tampoco es complejo, pero puede ser un poco lioso y si no se hace correctamente puede generar problemas o que no se visualice correctamente.

Añadiendo el campo

Lo primero que tenemos que hacer es añadir el campo al formulario, podemos hacerlo con el siguiente código:

// Obtenerlo de donde se haya almacenado, en este ejemplo de la configuración.
$text_with_format = $this->config(static::SETTINGS)->get('text_with_format');
$form['text_with_format'] = [
  '#type' => 'text_format',
  '#title' => $this->t('Body'),
  '#format' => $text_with_format['format'],
  '#default_value' => $text_with_format['value'],
];

Vamos a ver ahora que es cada parte:

Primero tenemos el valor "text_with_format" el cual es la clave de un array, podemos poner cualquier valor. después tenemos el tipo que es "text_format", el título del campo; y por último llegan 2 valores y ambos son necesarios, el formato y el valor por defecto. Aunque el formato podemos indicarlo manualmente, es mejor que también lo obtengamos de la configuración ya que el usuario puede cambiar entre los distintos editores, haciéndolo de esta manera será dinámico y el usuario podrá cambiarlo sin que nuestro código falle, y por último en "default_value" tenemos el valor de lo que el usuario haya escrito.

Guardando la información en el submit

Almacenar la información de lo que el usuario haya hecho es muy sencillo y se realiza de la misma manera que cualquier otro campo, eso sí, debéis almacenar tanto el formato como el valor; al obtener el valor del campo del form_state ya nos proporciona un array con ambos valores, de modo que si lo almacenamos tal cual no tendremos problemas.

public function submitForm(array &$form, FormStateInterface $form_state) {
  $config = $this->config(static::SETTINGS);
  $config->set('text_with_format', $form_state->getValue('text_with_format'))
    ->save();
}

De esa manera ya tendremos el valor almacenado en la configuración, en este caso a modo de ejemplo se ha utilizado el static::SETTINGS, pero vosotros usad el que necesitéis.

Rendereizando el texto con el formato adecuado

Ahora llega una parte que también es muy sencilla, pero puedes ser un poquito complicada si no estamos acostumbrados a ello.

$text_with_format = $this->config('nuestra_configuracion')->get('text_with_format');
$build = [
  '#type' => 'processed_text',
  '#text' => $text_with_format['value'],
  '#format' => $text_with_format['format'],
];

Primero estamos obteniendo el valor de la configuración, y después creamos un array renderizable del tipo "processed_text", de esta manera podremos añadir ahora un par de atributos para mostrar correctamente.

Teniendo ya lo básico, ahora podemos añadir el texto y el formato directamente en los valores "text" y "format", si lo hacemos como en el ejemplo, aunque el usuario cambie el formato Drupal sabrá como tiene que mostrarlo ya que se lo estamos indicando, si nosotros forzamos un formato concreto podremos tener problemas a la hora de mostrarlo.