Please Disable Your Browser Adblock Extension for our site and Refresh This Page!

our ads are user friendly, we do not serve popup ads. We serve responsible ads!

Refresh Page
Skip to main content
On . By CodimTh
Category:

CKEditor is not following the changes made in the body rows setting for Drupal 8. The editor area height is fixed, no matter what value you choose for the field's 'rows' setting.

Solution

in your module add these files.

create ckeditorheight.module file:

<?php

/**
 * @param $libraries
 * @param $extension
 */
function ckeditorheight_library_info_alter(&$libraries, $extension) {
  if ($extension === 'ckeditor' && isset($libraries['drupal.ckeditor'])) {
    $module_path = drupal_get_path('module', 'ckeditorheight');
    assert((bool) $module_path);
    $js_path = "/$module_path/js/ckeditorheight.js";
    $libraries['drupal.ckeditor']['js'][$js_path] = [];
  }
}

create js/ckeditorheight.js file:

Drupal.editors.ckeditor.attach = function(method, drupalSettings, CKEDITOR, $) {
  return function (element, format)
  {
    var toPx = function(value) {
      var element = jQuery('<div style="display: none; font-size: ' + value + '; margin: 0; padding:0; height: auto; line-height: 1; border:0;">&nbsp;</div>').appendTo('body');
      var height = element.height();
      element.remove();
      return height;
    };

    var rows = element.getAttribute("rows");
    if (rows) {
      // Calculate heightInPx.
      drupalSettings.ckeditorheight = drupalSettings.ckeditorheight || {};
      var heightInPx = toPx((rows * 1.5 + 1) + 'em');

      // Override the height.
      var editorSettingsOverrides = {
        height: heightInPx,
        autoGrow_minHeight: heightInPx
      };

      var overriddenEditorSettings = $.extend({}, format.editorSettings, editorSettingsOverrides);
      var overriddenFormat = $.extend({}, format, {editorSettings: overriddenEditorSettings});
    }
    return method.apply(this, [element, overriddenFormat]);
  }
}(Drupal.editors.ckeditor.attach, drupalSettings, CKEDITOR, jQuery);

Next steps

  • Clear your Drupal 8 caches. To do this I use this Drush command: drush cr if you don’t currently use Drush, I highly recommend using it, or the Drupal Console.
  • Now, go back to your site, and you should be able to see the ckeditor height is changed as  in the picture below.
  • I hope you found this article useful. let me know if you have any questions and I’ll be happy to answer them.
  • This code can be found and downloaded from https://github.com/codimth/ckeditorheight.
rows ckeditor

 

ckeditor height

 

Comments

Add new comment

Restricted HTML

Search

Page Facebook

Become a patron

If you need some help or you search a Drupal freelancer don't hesitate to contact us.

 

Contact Us

All the content is FREE but I still need your help

 

Become a patreon