Adding a WYSIWYG to text fields in Drupal 8 and 9

A common frustration for Drupal 8 (and 9) site builders is the inability to change text fields from plain text to filtered text through the administrative interface. This was something that was easy to do in Drupal 7 by editing the field’s settings and changing the value for Text processing.

Sometimes requirements for a field change, both during the build phase and long after a site has been in production, and it would be convenient to toggle on a rich text editor and text filtering with minimal effort.

In Drupal 8, there are five types of text fields in core:

• Text (plain)
• Text (plain, long)
• Text (formatted)
• Text (formatted, long)
• Text (formatted, long, with summary)

The first two are actually string fields and don’t allow any formatting. If a user enters HTML tags, they are ignored and displayed as plain text.

The last three will allow HTML tags, depending on the settings for the Text Format that the user chooses when entering content. However, only the last two will show the WYSIWYG editor (if it’s associated with the selected text format).

But what happens if midway through your build process, or months after your site has launched, the requirements for that text field change? Your client or designer decides they now want to allow some formatting in a field that was originally Text (plain) or Text (plain, long). And they want their editors to be able to use a WYSIWYG, so they don’t have to deal with HTML code. What do you do?

The long way: Create new field, migrate data, reconfigure

One solution is to write an update hook that will create a new field, migrate existing data to it, and delete the old field. If the field is renamed, you also have to consider reconfiguring any views, entity references, display modes, etc. that referred to the old field. Changing a field type this way is entirely possible, but more time consuming and error prone.

Wouldn’t it be nice if you could simply enable a WYSIWYG on that plain text field and be done with it? Especially if your client is on a tight budget. It’s actually possible to do this in a custom module, with a few lines of code.

The short way part 1: Add a form alter

First you’ll need to add a form_alter function in your custom module, most likely in the .module file. There are many ways to add a form_alter in Drupal 8, and those are documented elsewhere. See the entry about hook_form_alter in the Drupal API.

You may also need to add some conditions so that the field is only changed on certain forms or for certain content types–this is also beyond the scope of this article.

In this example, I’m adding a general hook_form_alter() that will apply to all forms regardless of entity type. If you have a Text (formatted) field, you may want to enable a WYSIWYG on it to make it easier for editors to create the content. Because it’s already a formatted text field, the form alter is very simple.

use Drupal\Core\Form\FormStateInterface;

function mymodule_form_alter(&$form, FormStateInterface $form_state, $form_id) {
  if(isset($form['field_myformattedtextfield'])) {
    $form['field_myformattedtextfield']['widget']['0']['#base_type'] = 'textarea';
  }
}

We are only changing one value associated with the widget: we change the base_type to textarea. The editors will see a WYSIWYG, and the data will be saved and displayed as formatted text.

If you want to add a WYSIWYG widget on a Text (plain) or Text (plain, long) field, it’s a little trickier. There are a few more widget attributes to alter.

use Drupal\Core\Form\FormStateInterface;

function mymodule_form_alter(&$form, FormStateInterface $form_state, $form_id) {
  if(isset($form['field_myplaintextfield'])) {
    // Fetch the entity object.
    $entity = $form_state->getFormObject()->getEntity();
    // Get the current value stored for the field.
    $value = $entity->field_myplaintextfield->getString();
    // Change the base type for this field to a textarea.
    $form['field_myplaintextfield']['widget']['0']['#base_type'] = 'textarea';
    // Change the type of field to formatted text.
    $form['field_myplaintextfield']['widget']['0']['#type'] = 'text_format';
    // Recommended: set a default text format. When rendering 
    // you’ll have to manually set this to make the field use 
    // formatting (see next section).
    $form['field_myplaintextfield']['widget']['0']['#format'] = 'full_html';
    // Set the default value to the currently stored value.
    $form['field_myplaintextfield']['widget']['0']['#default_value'] = $value;
  }
}

This will give us the WYSIWYG where we want it, but the value is still stored and displayed as plain text. We need to add another function to transform it for output.

The short way part 2: Let the fields render as formatted text

For Text (plain) or Text (plain, long) fields, we have to tell Drupal to run the stored value through one of the Text Format filters and render it as formatted text. This involves two functions and a configuration setting.

In your custom module, add a hook_field_formatter_info_alter to allow the plain text field types to use the default text formatter:

function mymodule_field_formatter_info_alter(array &$info) {
  // Let the string field types use the text formatter.
  $info['text_default']['field_types'][] = 'string';
  $info['text_default']['field_types'][] = 'string_long';
}

Then, add a template_preprocess_field function to tell Drupal which text format to use when that field is displayed as filtered text. Since this isn’t a regular formatted text field, Drupal doesn’t store that information the way it does for the standard formatted text field types. Be sure to use the same text format that you used in the hook_form_alter().

function mymodule_preprocess_field(&$variables, $hook) {
  if ($variables['field_name'] == 'field_myplaintextfield') {
    $variables['items']['0']['content']['#format'] = 'full_html';
  }
}

Lastly, we go to the “Manage display” configuration for the field in question, and tell Drupal to use the “Default” format for that field. If you are using Configuration Synchronization, you’ll notice this affects the “type” in the “Entity view display” configuration for this field.

...
  field_myplaintextfield:
    weight: 100
    label: above
    settings: {  }
    third_party_settings: {  }
    type: text_default
    region: content
...

Voila! That should be it. View your content and check that the plain text field is now being rendered with HTML formatting.

Conclusion

With just a few lines of code, we added a WYSIWYG editor to a plain text field and enabled Drupal to display its contents as formatted text. This technique will work for both Drupal 8 and Drupal 9. You can refine this approach depending on your needs to display formatted text only for certain view modes, entity types, field instances, etc.

Want to add this functionality to your site? Contact us if you’d like to hear more about our services.