Drupal 8 UX: Fix CKEditor form height

Christian Ziegler
acolono
Published in
2 min readOct 24, 2016

Working on some Drupal 8 projects lately we stumbled over this issue that makes it hard for some editors to work on content:

In Drupal 8.2.x and earlier the default height for form fields using a text editor like CKEditor is a fixed height and doesn’t respect the “textarea rows” setting in the field form display.

Default height for a field using CKEditor (Source: https://www.drupal.org/node/2239419)

Especially for mobile users this is an issue, because there is no way to adjust the text editor height in touch. So editors on mobile devices are forced to edit the content inside a very small form field.

There are already some bug reports and people working on making the issue transparent for sitebuilders:
https://www.drupal.org/node/2717599

But it seems as there is no progress in allowing individual height per field when using a text editor format.

CKEditor’s AutoGrow plug-in is addressing the problem in some way. But we have to wait at least for Drupal 8.3 to get this functionality in core.
UPPATE: The AutoGrow plug-in is now in.

Default height for a form field using CKEditor’s AutoGrow (Source: https://www.drupal.org/node/2239419)

Until then you can use one of the following code snippets to increase the default height:

/** 
* Implementation of hook_editor_js_settings_alter().
* @param array $settings
*/
function YOURMODULE_editor_js_settings_alter(array &$settings) {
// Change height of the ckeditor wysiwyg editor.
if (isset($settings['editor']['formats']['basic_html'])) {
$settings['editor']['formats']['basic_html']['editorSettings']['height'] = '400';
}
}

Or using JavaScript:

var height = document.body.querySelector('[data-editor-active-text-format]').getAttribute("rows");
height = (height * 1.5 + 1);
CKEDITOR.config.height = height + 'rem';

Please note, that both snippets affect all textarea form fields using a CKEditor activated text format.

Links:
https://api.drupal.org/api/drupal/core%21modules%21editor%21editor.api.php/function/hook_editor_js_settings_alter/8.2.x
http://docs.ckeditor.com/#!/guide/dev_size
https://www.drupal.org/node/2717599 Issue about the hardcoded editor height for some text editors.
https://www.drupal.org/node/2239419 Issue about including CKEditor’s AutoGrow Plugin. This will be part of the Drupal Core 8.3.0 release.

--

--

Christian Ziegler
acolono

@acolono CEO | @drupalat chairman | Loves riding bikes. Uses Open Source.