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.

---

Edited by @j.swiderski
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;								
					}
				});
			});

[jgallred]

Thanks for the insight.

[Harrison Mak]

Replying to j.swiderski:

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;								
					}
				});
			});

Hi, I was able to use this solution successfully on chrome and firefox, however for IE I made the following changes:

 var contentDiv = document.getElementById('cke_' + editor.name).getElementsByTagName('div')[0];
        var contentParent = contentDiv.parentNode;

        var contentDivName = '#' + myDivName

        editor.on('beforeModeUnload', function (evt) {
            if (evt.editor.mode == 'wysiwyg' && evt.editor.getCommand('maximize').state == CKEDITOR.TRISTATE_OFF) {
                computedHeight = $(contentDivName).css('height');
            }
            computedHeight = (computedHeight == '100%') ? $(contentDivName).parent().css('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 = $(contentDivName).css('height');
                computedHeight = (computedHeight == '100%') ? $(contentDivName).parent().css('height') : computedHeight;
            }
        });

I'm still stuck on one thing though, when I switch to Source mode the editor has no height in IE because the height is declared as 'auto'. I guess IE doesn't like this, so I can't enter any text into the editor.

Any suggestions?

[Jakub Ś]

Autogrow for divarea - complete

[Jakub Ś]

It seems I haven't checked this in IE or at least use case where user simply switches to source and back.

I have made small update and changed attached file. In IE9 and IE10 there was a problem with 0 width. After change if width is 0px then it will be changed to 100%. There is still problem with IE8 and IE7 - they don't support getComputedStyle method
I assume jQuery has found way to work around it. I will have to try that too :)

@ hmak I haven’t tested every case. What is the exact test case or test cases when this happens?

[woto]

Wow, found ticket with same problem. Thank guys. It should be mentioned in documentation.

[Gerbus]

Replying to j.swiderski:

It seems I haven't checked this in IE or at least use case where user simply switches to source and back.

I have made small update and changed attached file. In IE9 and IE10 there was a problem with 0 width. After change if width is 0px then it will be changed to 100%. There is still problem with IE8 and IE7 - they don't support getComputedStyle method
I assume jQuery has found way to work around it. I will have to try that too :)

@ hmak I haven’t tested every case. What is the exact test case or test cases when this happens?

Tried using jQuery's .css function in place of .getComputedStyle (see below code), which I assumed would magically work with IE 8, but it looks like it still doesn't (though it does suppress the javascript errors).

        var contentDiv = document.getElementById('cke_' + editor.name).getElementsByTagName('div')[0];
        var contentParent = contentDiv.parentNode;
        var contentDivSelector = '#cke_' + editor.name;
        var computedHeight;

        editor.on('beforeModeUnload', function (evt) {
            if (evt.editor.mode == 'wysiwyg' && evt.editor.getCommand('maximize').state == CKEDITOR.TRISTATE_OFF) {
                computedHeight = $(contentDivSelector).css('height');
            }
            computedHeight = (computedHeight == '100%') ? $(contentDivSelector).parent().css('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;
                contentParent.getElementsByTagName('textarea')[0].display = 'block';
            }
        });

        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%') ? $(contentDivSelector).parent().css('height') : computedHeight;
            }
        });

[kevin]

This should still be mentioned in the autorow documentation. It's too bad there's not a workaround implemented.

This worked for me, after calling $(e).ckeditor({ config })

e.next().find('.cke_wysiwyg_div').css('max-height', '650px').css('min-height', e.height())