How do I get a textarea form field to use a full HTML WYSIWYG editor?

Question

I have configuration form for a custom module.

namespace Drupal\amu_http_status_code_display\Form;

use Drupal\Core\Form\ConfigFormBase;
use Drupal\Core\Form\FormStateInterface;

class AmuHttpStatusCodeDisplayConfigForm extends ConfigFormBase {

  public function getFormId() {
    return 'AmuHttpStatusCodeDisplayConfigForm';
  }


  public function buildForm(array $form, FormStateInterface $form_state) {

    $config = $this->config('amustatuscode.settings');  
    $form = parent::buildForm($form, $form_state);

    $form['404_message'] = array(
      '#type' => 'textarea',
      '#title' => t('404 error message'),
      '#description' => t('error 404 message.'),
      '#default_value' => '404 error',
    );

    $form['403_message'] = array(
      '#type' => 'textarea',
      '#title' => t('403 error message'),
      '#description' => t('error 403 message.'),
      '#default_value' => '403 error',
    );

    return $form;
  }

  public function submitForm(array &$form, FormStateInterface $form_state) {
    $config = $this->config('amustatuscode.settings');
    $config->set('404_message', $form_state->getValue('404_message'));
    $config->set('403_message', $form_state->getValue('403_message'));
    $config->save();

    return parent::submitForm($form, $form_state);
  }

  public function getEditableConfigNames() {
    return ['amustatuscode.settings'];
  }

}

How can I make the form field I add use a WYSIWYG editor?

Answer 1

You want to use the TextFormat form element: https://api.drupal.org/api/drupal/core%21modules%21filter%21src%21Element%21TextFormat.php/class/TextFormat/8.4.x

Note that this will give you a value and a format in a nested form structure, you need to store both (or lock to a specific format) and then render the content with that format to avoid security issues.

Answer 2

Like so:

    $config = $this->config('amustatuscode.settings');
    $form = parent::buildForm($form, $form_state);

    $form['404_message'] = array(
      '#type' => 'text_format',
      '#title' => t('404 error message'),
      '#description' => t('error 404 message.'),
      '#default_value' => $config->get('404_message'),
      '#format' => $config->get('404_message_format'),
    );

    $form['403_message'] = array(
      '#type' => 'text_format',
      '#title' => t('403 error message'),
      '#description' => t('error 403 message.'),
      '#default_value' => $config->get('403_message'),
      '#format' => $config->get('403_message_format'),
    );

    return $form;

  }

  public function submitForm(array &$form, FormStateInterface $form_state) {
    $config = $this->config('amustatuscode.settings');
    $values = $form_state->getValues();
    $config->set('404_message', $values['404_message']['value']);
    $config->set('404_message_format', $values['404_message']['format']);
    $config->set('403_message', $values['403_message']['value']);
    $config->set('403_message_format', $values['403_message']['format']);
    $config->save();

    return parent::submitForm($form, $form_state);
  }

  public function getEditableConfigNames() {
    return ['amustatuscode.settings'];
  }

Please note this requires a change to your amustatuscode.settings schema definition to include the additional format string