Opened 5 years ago

Last modified 4 years ago

#12120 confirmed New Feature

Dynamic size restrictions in AutoGrow feature

Reported by: Olek Nowodziński Owned by:
Priority: Normal Milestone:
Component: General Version: 4.0
Keywords: Drupal Cc: wim.leers@…

Description

At the moment AutoGrow plugin supports config.autoGrow_minHeight and config.autoGrow_maxHeight along with editor#autoGrow event, which can be used to force a custom height on every editor resize, i.e.

CKEDITOR.replace( 'editor2', {
	extraPlugins: 'autogrow',
	autoGrow_maxHeight: 400,
	removePlugins: 'resize',
	on: {
		autoGrow: function( evt ) {
			evt.data.newHeight = 42;
		}
	}
} );

Such behaviour is desired when the space around the editor is changing, i.e. window is resized, other page elements collapse or expand.

The event, however, controls height only, while overflow-y of editable area remains relative to config.autoGrow_maxHeight. The result is that even though it is possible to customise the main behaviour of the plugin, the scrollbar of editable area might be missing, making editor contents unreachable, which is a serious UX flaw.

Possible solutions:

  1. Implement editor.plugins.autoGrow.setMaxHeight, which would override config.autoGrow_maxHeight on demand.
    1. + Solves the problem.
    2. - Change is permanent. Some devs may want to override autoGrow_maxHeight on demand, while in other cases they would expect default configuration to be preserved and respected.
  2. Re-implement editor#autoGrow event, so autoGrow_maxHeight can be changed for every single event.
    1. + Solves the problem.
    2. + The impact of config.autoGrow_maxHeight remains.
    3. - Makes the code less obvious.
    4. - It's not straightforward. Hard to reach in documentation.

Change History (7)

comment:1 Changed 5 years ago by Piotrek Koszuliński

cc

comment:2 Changed 5 years ago by Wim Leers

Cc: wim.leers@… added
Keywords: Drupal added

comment:3 Changed 5 years ago by Jakub Ś

Status: newconfirmed
Version: 4.0

+1 for solution number two.

comment:4 Changed 4 years ago by Marek Lewandowski

Milestone: CKEditor 4.6.0

Let's try to solve it in 4.6.0. In meanwhile I was able to put together a workaround for that:

editor.on( 'autoGrow', function( evt ) {
	// A workaround to control scrollbar appearance when using autoGrow event to control editor's
	// height.

	// Low priority listener to show/hide scrollbar depending on inner part height.
	// Important: to make it work your config.autoGrow_maxHeight needs to be set to false.
	var doc = evt.editor.document,
		scrollable = CKEDITOR.env.quirks ? doc.getBody() : doc.getDocumentElement();

	if ( scrollable.$.scrollHeight < scrollable.$.clientHeight ) {
		scrollable.setStyle( 'overflow-y', 'hidden' );
	} else {
		scrollable.removeStyle( 'overflow-y' );
	}
}, null, null, 10000 );

Note that this code will work only for classic editor, needs to be adjusted to support inline.

comment:5 Changed 4 years ago by Wim Leers

Thanks!

Note that this code will work only for classic editor, needs to be adjusted to support inline.

But why would you even want that? Autogrow only makes sense for classic (iframe) editor. For inline, it grows automatically anyway, unless you have very special CSS.

So, if this works, then this is fine to use until it is fixed in the plugin itself.

Even the autogrow plugin itself explicitly says this:

	CKEDITOR.plugins.add( 'autogrow', {
		init: function( editor ) {
			// This feature is available only for themed ui instance.
			if ( editor.elementMode == CKEDITOR.ELEMENT_MODE_INLINE )
				return;

			editor.on( 'instanceReady', function() {
				// Simply set auto height with div wysiwyg.
				if ( editor.editable().isInline() )
					editor.ui.space( 'contents' ).setStyle( 'height', 'auto' );
				// For classic (`iframe`-based) wysiwyg we need to resize the editor.
				else
					initIframeAutogrow( editor );
			} );
		}
	} );   

comment:6 Changed 4 years ago by Marek Lewandowski

Ahhh, cool. In fact I was concerned about divarea, but I didn't check how autogrow integrates with it. :)

comment:7 Changed 4 years ago by Marek Lewandowski

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