Autogrow support for divarea plugin

[jgallred]

It would be nice if the autoGrow_minimumHeight property would work with the divarea plugin. Currently it does not.

---

Please see attached file _divarea_autogrow.html​. According to my tests it works exactly the same as autogrow for iframe based editor.

[Jakub Ś]

What you talk about is autoGrow_minHeight option and it works.

All you have to do is use this code on page:

CKEDITOR.replace( 'editor1', {
	extraPlugins: 'divarea,autogrow',
	autoGrow_minHeight : 400,
	autoGrow_maxHeight : 800,
	removePlugins: 'resize'
});

Please note that if you have defined config.extraPlugins= 'autogrow'; and then checked divarea sample this will not work. Sample divarea has extraPlugins: 'divarea' setting on page and it will overwrite the one in config.js.

I closing this ticket as I think it is invalid. If you have other problem/request with this configuration option, please provide more detailed description and I will reopen it.

If this was your problem then it would be nice if you could leave a comment.

[jgallred]

I appreciate you taking the time to help me understand. When I run the following code from the console on ​http://nightly-v4.ckeditor.com/3520/samples/divarea.html, it does not have a min or max height enforced.

CKEDITOR.instances.editor1.destroy();
CKEDITOR.replace( 'editor1', {
         extraPlugins: 'divarea,autogrow',
         autoGrow_minHeight : 400,
         autoGrow_maxHeight : 800,
         removePlugins: 'resize'
 });

Is this related to the paragraph you wrote?

Please note that if you have defined config.extraPlugins= 'autogrow'; and then checked divarea sample this will not work. Sample divarea has extraPlugins: 'divarea' setting on page and it will overwrite the one in config.js.

I was very confused by the wording. I understand that extraPlugins overwrites the config.extraPlugins, but what does that have to do with the divarea sample page, where config is not used?

[Jakub Ś]

but what does that have to do with the divarea sample page, where config is not used?

Options from config.js file are applicable for all instances of CKEditor. Setting in replace mentod are used for one particular instance and have higher priority then setting from config.js.

It would be nice if the autoGrow_minimumHeight property would work with the divarea plugin. Currently it does not.

If I didn't understand you correctly, please explain what the problem is - what steps need to be taken to reproduce, what is the expected result and what is actual result.

[jgallred]

Sorry I was not clearer.

Steps to Reproduce

1. Go to [​​http://nightly-v4.ckeditor.com/3520/samples/divarea.html]
2. Open the browser console
3. Run the command CKEDITOR.instances.editor1.destroy();
4. Run the command

   CKEDITOR.replace( 'editor1', {
            extraPlugins: 'divarea,autogrow',
            autoGrow_minHeight : 400,
            autoGrow_maxHeight : 800,
            removePlugins: 'resize'
   });
   

5. Delete all content in the CKEditor instance

Desired behavior: The CKEditor div should not get any smaller than 400px. If you hold down enter, the div should not get bigger than 800px. Basically, the autogrow behavior of CKEditor with using the divarea plugin.

Actual behavior: The CKEditor div collapses to one line. If you hold down enter, the div expands infinitely.

The div min and max height could be manipulated via CSS, but I just thought it would be convenient if the autogrow plugin handled the case where the divarea plugin is in use.

[Jakub Ś]

Ok, I'm not sure how have I got it working before but it seems that there are problems with autogrow settings and divarea plugin.

[Olek Nowodziński]

Divarea belongs to the inline-editing family, for which the autogrow feature hasn't been implemented yet. At the moment ​height:auto is the default behavior for inline editing.

[Garry Yao]

Auto grow is a iframe wysiwyg dedicated feature which conquers the iframe layout limitation thus are inapplicable to the inline editing environment.

This requirement can be easily achieved on editable via "min-height"/"max-height" page CSS style in all supported browsers.

[Jakub Ś]

Autogrow in divarea plugin can be achieved with the following settings:

1. Put this in head section of divarea.html sample (if you want editor to grow to certain height)

   <style>
    .cke_wysiwyg_div
    {
     min-height: 200px;
     max-height: 600px;
    }
   </style>
   

2. Use the below definition sole (if you want editor to grow endlessly) or with above rule

   CKEDITOR.replace( 'editor1', {
   	extraPlugins: 'divarea',
   	height : 'auto'
   });
   

Property min-height should be supported in all browsers even IE7 - ​http://www.quirksmode.org/css/contents.html

[Jakub Ś]

#9472 was marked as duplicate.

[Jakub Ś]

One more thing. Besides styles and setting height to auto there is still some JavaScript needed to properly handle modes (source/wysiwyg) changes and maximize functionality.
Please see attached file for more details - _divarea_autogrow.html​.
Below is the code that needs to be inserted into page:

editor.on( 'instanceReady', function( e ) {				
				var contentDiv = document.getElementById( 'cke_' +editor.name ).getElementsByTagName( 'div' )[0];
				var contentParent = contentDiv.parentNode;				
				var computedHeight;	
								
				editor.on( 'beforeModeUnload', function( evt ) {  
					if ( evt.editor.mode == 'wysiwyg' && evt.editor.getCommand( 'maximize' ).state == CKEDITOR.TRISTATE_OFF )
						computedHeight = window.getComputedStyle(contentDiv,null).getPropertyValue("height");						
						computedHeight = (computedHeight == '100%') ? window.getComputedStyle(contentParent,null).getPropertyValue("height") : computedHeight;
				});	
				
				editor.on( 'mode', function( evt ) {				
					if ( evt.editor.mode == 'source' && evt.editor.getCommand( 'maximize' ).state == CKEDITOR.TRISTATE_OFF ) 	
						contentParent.getElementsByTagName( 'textarea' )[0].style.height = computedHeight;
				});
				
				editor.on( 'beforeCommandExec', function( evt ) {  
					if( evt.data.name == 'maximize' && evt.editor.mode == 'source' ) {						
						if( evt.editor.getCommand( 'maximize' ).state == CKEDITOR.TRISTATE_OFF ) {							
							contentParent.getElementsByTagName( 'textarea' )[0].style.height = '100%';
						} else 
							contentParent.getElementsByTagName( 'textarea' )[0].style.height = computedHeight;								
							
					} else if ( evt.data.name == 'maximize' && evt.editor.mode == 'wysiwyg' ) {
						computedHeight = window.getComputedStyle(contentDiv,null).getPropertyValue("height");						
						computedHeight = (computedHeight == '100%') ? window.getComputedStyle(contentParent,null).getPropertyValue("height") : computedHeight;								
					}
				});
			});