Changeset 6921 for CKEditor/trunk

Timestamp:

05/11/11 19:05:03 (2 years ago)

Author:

garry.yao

Message:

#7173: More accurate size calculation logic in autogrow plugin.

Location:

CKEditor/trunk

Files:

• CHANGES.html (modified) (1 diff)
• _source/plugins/autogrow/plugin.js (modified) (1 diff)
• _source/themes/default/theme.js (modified) (1 diff)

CKEditor/trunk/CHANGES.html

@@ -51 +51 @@
                 <li><a href="http://dev.ckeditor.com/ticket/6263">#6263</a> : Some of the table cell's context menu options may be incorrectly disabled.</li>
                 <li><a href="http://dev.ckeditor.com/ticket/6247">#6247</a> : Focus restores properly after float panel is closed.</li>
+                <li><a href="http://dev.ckeditor.com/ticket/7173">#7173</a> : Enhancement to "autogrow" plugin makes it more accurate on editor size.</li>
                 <li>Updated the following language files:<ul>
                         <li><a href="http://dev.ckeditor.com/ticket/7834">#7834</a> : Dutch;</li>

CKEditor/trunk/_source/plugins/autogrow/plugin.js

@@ -8 +8 @@
  */
 (function(){
-        var resizeEditor = function( editor )
-        {
-                if ( !editor.window )
-                        return;
-                var doc = editor.document,
-                        currentHeight = editor.window.getViewPaneSize().height,
-                        newHeight;
 
-                // We can not use documentElement to calculate the height for IE (#6061).
-                // It is not good for IE Quirks, yet using offsetHeight would also not work as expected (#6408).
-                // We do the same for FF because of the html height workaround (#6341).
-                if ( CKEDITOR.env.ie || CKEDITOR.env.gecko )
-                        newHeight = doc.getBody().$.scrollHeight + ( CKEDITOR.env.ie && CKEDITOR.env.quirks ? 0 : 24 );
-                else
-                        newHeight = doc.getDocumentElement().$.offsetHeight;
-
-                var min = editor.config.autoGrow_minHeight,
-                        max = editor.config.autoGrow_maxHeight;
-                ( min == undefined ) && ( editor.config.autoGrow_minHeight = min = 200 );
-                if ( min )
-                        newHeight = Math.max( newHeight, min );
-                if ( max )
-                        newHeight = Math.min( newHeight, max );
-
-                if ( newHeight != currentHeight )
-                {
-                        newHeight = editor.fire( 'autoGrow', { currentHeight : currentHeight, newHeight : newHeight } ).newHeight;
-                        editor.resize( editor.container.getStyle( 'width' ), newHeight, true );
-                }
-        };
         CKEDITOR.plugins.add( 'autogrow',
         {
                 init : function( editor )
                 {
+                        var lastContentHeight;
+                        var resizeEditor = function( editor )
+                        {
+                                if ( !editor.window )
+                                        return;
+
+                                var doc = editor.document,
+                                        resizeable = editor.getResizable( 1 ),
+                                        body = doc.getBody().$,
+                                        htmlElement = doc.getDocumentElement().$,
+                                        currentHeight = resizeable.$.offsetHeight,
+                                        newHeight;
+
+                                var delta =
+                                                // Delta height by checking scrollHeight.
+                                                ( CKEDITOR.env.ie && CKEDITOR.env.quirks ? body.scrollHeight - body.clientHeight
+                                                                : htmlElement.scrollHeight - ( htmlElement.clientHeight || htmlElement.offsetHeight ) )
+                                                // Negative scrollHeight (content reduced) is not supported in some browsers, figure it out by watching over the content size.
+                                                || ( body.clientHeight < lastContentHeight ? body.clientHeight - lastContentHeight : 0 );
+
+                                if ( delta )
+                                {
+                                        newHeight = currentHeight + delta;
+                                        var min = editor.config.autoGrow_minHeight,
+                                                max = editor.config.autoGrow_maxHeight;
+
+                                        ( min == undefined ) && ( editor.config.autoGrow_minHeight = min = 200 );
+                                        if ( min )
+                                                newHeight = Math.max( newHeight, min );
+                                        if ( max )
+                                                newHeight = Math.min( newHeight, max );
+
+                                        if ( newHeight != currentHeight )
+                                        {
+                                                newHeight = editor.fire( 'autoGrow', { currentHeight : currentHeight, newHeight : newHeight } ).newHeight;
+                                                resizeable.setStyle( 'height', newHeight + 'px' );
+                                                editor.fire( 'resize' );
+                                        }
+                                }
+
+                                lastContentHeight = body.clientHeight;
+                        };
+
                         for ( var eventName in { contentDom:1, key:1, selectionChange:1, insertElement:1 } )
                         {

CKEditor/trunk/_source/themes/default/theme.js

@@ -353 +353 @@
  * is mainly used by the resize plugin, which adds a UI handle that can be used
  * to resize the editor.
+ * @param {Boolean} forContents Whether to return the "contents" part of the theme instead of the container.
  * @returns {CKEDITOR.dom.element} The resizable element.
  * @example
  */
-CKEDITOR.editor.prototype.getResizable = function()
+CKEDITOR.editor.prototype.getResizable = function( forContents )
 {
-        return this.container;
+        return forContents ? CKEDITOR.document.getById( 'cke_contents_' + this.name ) : this.container;
 };