Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>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.</p> <p>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</p> <ul> <li>Without horizontal scrollbar fix: <a href="http://www.filedropper.com/plugin_3" rel="nofollow noreferrer">http://www.filedropper.com/plugin_3</a></li> <li>With horizontal scrollbar fix: <a href="http://www.filedropper.com/plugin_1" rel="nofollow noreferrer">http://www.filedropper.com/plugin_1</a></li> </ul> <p><strong>So what was changed?</strong></p> <p>I'll explain these modifications via uncompressed (_source folder) files which are readable whereas compressed files are quite hard to read and understand.</p> <p>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.</p> <pre><code>var marker = CKEDITOR.dom.element.createFromHtml( '&lt;span style="margin:0;padding:0;border:0;clear:both;width:1px;height:0px;font-size:0;display:block;"&gt;&amp;nbsp;&lt;/span&gt;', doc ); </code></pre> <p>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).</p> <pre><code>setTimeout(function() { marker.remove(); },1); </code></pre> <p><strong>Horizontal scrollbar fix</strong></p> <p>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.</p> <pre><code>// TODO: calculate horizontal scrollbar height instead of using static 17 pixels if ( scrollable.$.scrollWidth &gt; scrollable.$.clientWidth ) { newHeight += 17; currentHeight += 17; } newHeight = Math.max( newHeight, min ); newHeight = Math.min( newHeight, max ); </code></pre> <p>Instead of using 17 pixel hardcoded value, method descibed in <a href="https://stackoverflow.com/questions/986937/javascript-get-the-browsers-scrollbar-sizes">How can I get the browser&#39;s scrollbar sizes?</a> (or something similar) could be used to calculate scrollbar size to make this fix more proper.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload