Opened 7 years ago

Closed 7 years ago

Last modified 6 years ago

#9351 closed New Feature (invalid)

Autogrow support for divarea plugin

Reported by: jgallred Owned by:
Priority: Normal Milestone:
Component: General Version: 4.0
Keywords: Cc:

Description (last modified by Jakub Ś)

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.

Attachments (1)

_divarea_autogrow.html (7.3 KB) - added by Jakub Ś 6 years ago.
Autogrow for divarea - complete

Download all attachments as: .zip

Change History (19)

comment:1 Changed 7 years ago by Jakub Ś

Resolution: invalid
Status: newclosed

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.

comment:2 Changed 7 years ago by 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?

comment:3 Changed 7 years ago by 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.

comment:4 Changed 7 years ago by 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.

comment:5 Changed 7 years ago by Jakub Ś

Resolution: invalid
Status: closedreopened

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.

comment:6 Changed 7 years ago by Jakub Ś

Status: reopenedconfirmed
Type: New FeatureBug

comment:7 Changed 7 years ago by Olek Nowodziński

Milestone: CKEditor 4.0
Summary: Autogrow config support for divarea pluginAutogrow support for divarea plugin
Type: BugNew Feature
Version: 4.0 Beta4.0 (GitHub - master)

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.

comment:8 Changed 7 years ago by Garry Yao

Milestone: CKEditor 4.0
Resolution: invalid
Status: confirmedclosed

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.

comment:9 Changed 7 years ago by 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

comment:10 Changed 7 years ago by Jakub Ś

#9472 was marked as duplicate.

comment:11 Changed 7 years ago by Jakub Ś

Description: modified (diff)

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

comment:12 Changed 7 years ago by Jakub Ś

Description: modified (diff)

comment:13 Changed 7 years ago by jgallred

Thanks for the insight.

comment:14 in reply to:  11 Changed 6 years ago by 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?

Last edited 6 years ago by Harrison Mak (previous) (diff)

Changed 6 years ago by Jakub Ś

Attachment: _divarea_autogrow.html added

Autogrow for divarea - complete

comment:15 Changed 6 years ago by 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?

comment:16 Changed 6 years ago by woto

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

comment:17 in reply to:  15 Changed 6 years ago by 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;
            }
        });

comment:18 Changed 6 years ago by 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())

Note: See TracTickets for help on using tickets.
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy