Geek Answers Handbook

CKEditor autostart plugin vertical scroll bar flickering problem

I have a problem with the CogEditor plugin:

When you press return (after automatic growth at the minimum height), the text content trembles (jumps one line and returns down), and the vertical scroll bar flickers on. Auto show works, but user experience is jerky.

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

I will disable 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 a way to avoid skipping / shifting text content when I press the enter key (after auto-spill at minimum height)?

+8
javascript fckeditor ckeditor autogrow
source share
3 answers

Today I tested the fix, and I think I have a working solution for all major browsers. In addition, I also made a correction for the question about the size of the horizontal scrollbar (horizontal scrollbar does not increase the size of the editor). This was ultimately the kludge bit, though (for the sake of simplicity, the scrollbar height is hardcoded 17 pixels), so I will give you both versions, with and without horizontal scroll fix.

I know that the correct way would be to create a patch and suggest that it be implemented in the next version of CKEditor, but this takes some time, so meanwhile what you can do. You can download the modified compressed plugin.js file from the link below and put it in your CKEditor at /plugins/autogrow/plugin.js

So what has changed?

I will explain these changes using uncompressed (_source folder) files that are readable, while compressed files are quite difficult to read and understand.

I made small changes to the autogrow temporary marker, which is used to calculate the new editor height. Here's the new version of the marker code in the _source (uncompressed) line of autogrow / plugin.js 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 );

Thus, the height changes from 1 pixel to zero pixels, always unprintable space is always printed inside the marker element, and the font size is forced to zero. After these modifications, this actually fixed the problem - instead of immediately removing the token from the DOM, I changed it to remove it after a 1 millisecond timeout (line 24 in the uncompressed plugin.js file).

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

Fix horizontal scrollbar

This is a little boring. I just added if the scrollWidth editor checks more than clientWidth, and if so, add 17 pixels to the newHeight and currentHeight variables before checking the minimum and maximum allowable values ​​of newHeight.

 // 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 a 17-pixel hard-coded value, the descibed method in How can I get browser scrollbar sizes? (or something similar) could be used to calculate the size of the scroll bar until make this fix more correct.

+2
source share

  • contents.css add:

    body {overflow: hidden; / Hide flicker of autorun /}

    (you need to clear the cache to check)

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

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

  • plugin.js (resizeEditor) replace:

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

FROM

  //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');
+1
source share

AFAIK, the only way to solve this problem is to change the CKEDitor code. (I would suggest handling the “login key” event as it happens, and not time out like them).

0
source share

More articles:


All Articles