8

I'm having an issue with the CKEditor autogrow plugin:

Upon pressing return (after auto-growing past the min height), the text content shakes (jumps up one line and back down), and a vertical scroll bar flickers on-and-off. The autogrow works, but the user-experience is jerky.

I can hide the vertical scroll bar by specifying scrolling="no" and overflow="hidden", but the text content still shakes.

I'm disabling scrolling in ckeditor.js:

<iframe scrolling="no" style="width:100%;height:100%;overflow:hidden;" frameBorder="0" title="'+E+'"'+' src="'+W+'"'+' tabIndex="'+(b.webkit?-1:C.tabIndex)+'"'+' allowTransparency="true"'+'></iframe>

CKEditor initialization code:

       CKEDITOR.replace('Description',
        {
            sharedSpaces:
            {
                top: 'topSpace',
                bottom: 'bottomSpace'

            },
            extraPlugins: 'autogrow,tableresize',
            removePlugins: 'maximize,resize,elementspath',
            skin: 'kama',
            toolbar: [['Format', 'Font', 'FontSize'], ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat'], ['TextColor', 'BGColor'], ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'], ['NumberedList', 'BulletedList'], ['Outdent', 'Indent'],
             '/', ['Link', 'Unlink', 'Anchor'], ['Image', 'Flash', 'Table', 'HorizontalRule', 'SpecialChar'], ['PasteText', 'PasteFromWord'],['Cut','Copy','Paste'], ['Undo', 'Redo'], ['Find', 'Replace'], ['SpellChecker']],
            toolbarCanCollapse: false,
            pasteFromWordRemoveFontStyles: false,
            enterMode: CKEDITOR.ENTER_BR,
            shiftEnterMode: CKEDITOR.ENTER_P,
            autoGrow_minHeight: 300

        })

Is there any way to avoid the text content jumping/shifting upon pressing the enter key (after autogrowing past the min height)?

Seth
  • 2,712
  • 3
  • 25
  • 41
Jayaraj
  • 686
  • 10
  • 18

3 Answers3

2

I've been testing a fix today and I think I have a working solution for all major browsers. In addition, I also made a fix for horizontal scrollbar sizing issue (horizontal scrollbar doesn't increase the size of the editor). That ended up being bit of a kludge though (for sake of simplicity scrollbar height is hardcoded 17 pixels) so I'll provide you with both versions, with and without the horizontal scrollbar fix.

I know the proper way would be to create a patch and suggest it to be implemented in next release of CKEditor, but that takes a while so meanwhile here's what you can do. You can download the modified compressed plugin.js file from the link below and place it in your CKEditor in path /plugins/autogrow/plugin.js

So what was changed?

I'll explain these modifications via uncompressed (_source folder) files which are readable whereas compressed files are quite hard to read and understand.

I made small modifications to autogrow temporary marker which is used to calculate editor's new height. Here's the new version of marker code in _source (uncompressed) autogrow/plugin.js line 19.

var marker = CKEDITOR.dom.element.createFromHtml( '<span style="margin:0;padding:0;border:0;clear:both;width:1px;height:0px;font-size:0;display:block;">&nbsp;</span>', doc );

So height is changed from 1 pixel to zero pixels, a non-breaking space is always printed inside the marker element and font size is forced to zero. After these modifications this actually fixed the issue - instead removing the marker from DOM immediately I changed it to be removed via 1 millisecond timeout (line 24 in uncompressed plugin.js file).

setTimeout(function() {
    marker.remove();
},1);

Horizontal scrollbar fix

This is bit of dull. I just added a check whether editor scrollWidth is bigger than clientWidth and if so then add 17 pixels to newHeight and currentHeight variables before checking newHeight minimum and maximum allowed values.

// TODO: calculate horizontal scrollbar height instead of using static 17 pixels
if ( scrollable.$.scrollWidth > scrollable.$.clientWidth ) {
    newHeight += 17;
    currentHeight += 17;
}

newHeight = Math.max( newHeight, min );
newHeight = Math.min( newHeight, max );

Instead of using 17 pixel hardcoded value, method descibed in How can I get the browser's scrollbar sizes? (or something similar) could be used to calculate scrollbar size to make this fix more proper.

Community
  • 1
  • 1
Perttu
  • 171
  • 7
1

  1. contents.css add:

    body {overflow:hidden; /Hide Autogrow flicker/}

    (Need to clear cache to test)

  2. plugin.js (resizeEditor) Set "Additional space specified by user" = 20:

newHeight += 20; //Fix Autogrow flicker //(editor.config.autoGrow_bottomSpace || 0);

  1. plugin.js (resizeEditor) replace :

if (scrollable.$.scrollHeight > scrollable.clientHeight...

With:

    //Fix Autogrow flicker:
    //contents.css change (test: clear css cache): body {overflow:hidden; /*Hide Autogrow flicker*/}
    var editorBody = $(editor.editable().$);
    if (newHeight >= max)
        editorBody.css('overflow-y', 'visible');
    else
        editorBody.css('overflow-y', 'hidden');
SirMoreno
  • 1,109
  • 1
  • 15
  • 34
0

AFAIK the only way to resolve this issue is to alter CKEDitor's code. (I would suggest handling the 'entry key' event as it happens and not in timeout as they do).

Omeriko
  • 1,173
  • 11
  • 22