5

9 rows is just way too small by default. Is this a text-editor for ants?

3
  • Under CKEditor Profile settings > Advanced options > custom javascript configuration > you can specify the custom js rule: config.height = 500 + 'px'; Oct 14 '16 at 15:19
  • There is no "Advanced options" for Drupal 8.
    – Naidim
    Oct 14 '16 at 16:13
  • My solution works only for CKEditor module in Drupal 7 Oct 15 '16 at 6:47
6

Like the comments to the previous answer mention, changing the amount of text area rows displayed in the form display doesn't change the height of the CKEditor attached to those fields. I haven't found any place yet to change the height settings through the UI so we have to do it in code.

To do this, create a simple new custom module ckeditor_change_height with these two files (or add the code under ckeditor_change_height.module to an existing one):

ckeditor_change_height.module

/**
 * Change the ckeditor's settings.
 * 
 * Implements hook_editor_js_settings_alter().
 */
function ckeditor_change_height_editor_js_settings_alter(array &$settings) {
  foreach (array_keys($settings['editor']['formats']) as $text_format_id) {
    if ($settings['editor']['formats'][$text_format_id]['editor'] === 'ckeditor') {
      $settings['editor']['formats'][$text_format_id]['editorSettings']['height'] = '350px';
    }
  }
}

ckeditor_change_height.info.yml

name: CKEditor - Change height
type: module
description: Change CKEditor height
package: CKEditor
core: '8.x'
version: '8.x-1.0'

Just set that 350px to be any height you want, enable the module & flush your cache.

4
  • I tried adding that hook to my .theme file (replaced THEMEID with my theme name), cleared Drupal cache, browser cache, and it had no effect. How can I best test the hook? I know the .theme file is being called as I use it to clear the Generator tag.
    – Naidim
    Jun 21 '16 at 23:05
  • Ah yes, sorry forgot to mention that in my site I use one theme for both viewing & editing content. You need to add that snippet of code to your admin panel theme. Or the better way would be to create a custom module for it. That way it will work in your main theme & admin theme, wherever you use CKEditor really.
    – Juhani
    Jun 21 '16 at 23:08
  • I use the single theme for both viewing & editing. <?php function sunvan_page_attachments_alter(array &$attachments) { // Hide Drupal generator meta tag. unset($attachments['#attached']['html_head'][1]); } // change the ckeditor's settings function sunvan_editor_js_settings_alter(array &$settings) { foreach (array_keys($settings['editor']['formats']) as $text_format_id) { if ($settings['editor']['formats'][$text_format_id]['editor'] === 'ckeditor') { $settings['editor']['formats'][$text_format_id]['editorSettings']['height'] = '500px'; } } }
    – Naidim
    Jun 21 '16 at 23:12
  • 1
    I was sure I had it working in my .theme file but it turns out it didn't! I also have a custom module to change my ckeditor settings & skin so it was actually pulling the updated height from there... So yeah, sorry about the confusion. You need to add the snippet of code to a custom module instead and enable that instead of using the .theme file. See the updated answer!
    – Juhani
    Jun 21 '16 at 23:27
9

I rolled a module for that now: https://www.drupal.org/project/ckeditorheight

This module changes all ckeditor text fields to respect the "rows" setting of the field. How rows translate into pixels is a global setting, configured via a pixel factor and offset.

1
  • Thank you! Awesome module!
    – milkovsky
    May 19 '20 at 7:48
5

Anyone using Drupal 8-- this has changed now that Autogrow is built into core, but is still useful if you want to set the default minHeight and maxHeight. See my code below to replace code found in ckeditor_change_height.module:

    function ckeditor_change_height_editor_js_settings_alter(array &$settings) {
      foreach (array_keys($settings['editor']['formats']) as $text_format_id) {
        if ($settings['editor']['formats'][$text_format_id]['editor'] === 'ckeditor') {
          $settings['editor']['formats'][$text_format_id]['editorSettings']['autoGrow_minHeight'] = '100';
        }
      }
    }
1
  • 1
    This need to be better documented somewhere. Took me far to long to find this solution. Thanks!
    – Felix Eve
    Sep 28 '17 at 5:34
3

Check out the Autogrow module/plugin. Works pretty slick. I do recommend changing the default of 600 down to maybe 400.

Update:

It appears autogrow will be included by default starting in 8.3.x

https://www.drupal.org/node/2239419

Not the answer you're looking for? Browse other questions tagged or ask your own question.