Drupal - How to use wysiwyg text editor (text_format) in a system configuration form
$form['distance_selling_terms'] = [
'#type' => 'text_format',
'#title' => $this->t('Distance Selling Terms'),
'#description' => $this->t('Enter Distance Selling terms'),
'#default_value' => config->get('distance_selling_terms.value'),
'#format' => $config->get('distance_selling_terms.format'),
];
And if you want to limit the wysiwyg editor to only the one format, add #allowed_formats as in:
$form['distance_selling_terms'] = [
'#type' => 'text_format',
'#title' => $this->t('Distance Selling Terms'),
'#description' => $this->t('Enter Distance Selling terms'),
'#default_value' => config->get('distance_selling_terms.value'),
'#format' => $config->get('distance_selling_terms.format'),
'#allowed_formats' => [
$config->get('distance_selling_terms.format') => 'Description of format'
],
];
In order to make your configuration translatable when it uses a text_format you need to have the following mapping:
your_custom_form_field:
type: mapping
label: 'Free text with text format support'
translatable: true
mapping:
value:
type: text
label: 'Custom Text'
format:
type: string
label: 'Text format'
Have a look at this core patch and thread:
https://www.drupal.org/files/issues/2144413-185-config-translation-text-format.patch
https://www.drupal.org/node/2144413
for a more detailed example and discussion.