Allow users to provide absolute css units to editor.resize function

CHANGES.md

@@ -13,6 +13,7 @@ Fixed Issues:
 * [#3156](https://github.com/ckeditor/ckeditor4/issues/3156): Fixed: [Autolink](https://ckeditor.com/cke4/addon/autolink) [`config.autolink_urlRegex`](https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-autolink_urlRegex) and [`config.autolink_emailRegex`](https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-autolink_emailRegex) options are not customizable. Thanks to [Sergiy Dobrovolsky](https://github.com/serggoodwill)!
 * [#624](https://github.com/ckeditor/ckeditor4/issues/624): Fixed: [Notification](https://ckeditor.com/cke4/addon/notification) doesn't work with [bottom toolbar location](https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-toolbarLocation).
 * [#3000](https://github.com/ckeditor/ckeditor4/issues/3000): Fixed: [Auto Embed](https://ckeditor.com/cke4/addon/autoembed) doesn't work with [bottom toolbar location](https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-toolbarLocation).
+* [#1883](https://github.com/ckeditor/ckeditor4/issues/1883): Fixed: [`editor.resize`](https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#method-resize) method doesn't work with CSS units.
 
 ## CKEditor 4.14
 

core/creators/themedui.js

@@ -251,9 +251,13 @@ CKEDITOR.replaceClass = 'ckeditor';
 	/**
 	 * Resizes the editor interface.
 	 *
-	 *		editor.resize( 900, 300 );
+	 * **Note:** Since 4.14.1 this method accepts numeric or absolute CSS length units.
 	 *
-	 *		editor.resize( '100%', 450, true );
+	 * ```javascript
+	 *	editor.resize( 900, 300 );
+	 *
+	 *	editor.resize( '5in', 450, true );
+	 * ```
 	 *
 	 * @param {Number/String} width The new width. It can be an integer denoting a value
 	 * in pixels or a CSS size value with unit.
@@ -283,20 +287,24 @@ CKEDITOR.replaceClass = 'ckeditor';
 			outer = container;
 		}
 
+		width = convertCssUnitToPx( width );
+
 		// Set as border box width. (https://dev.ckeditor.com/ticket/5353)
 		outer.setSize( 'width', width, true );
 
 		// WebKit needs to refresh the iframe size to avoid rendering issues. (1/2) (https://dev.ckeditor.com/ticket/8348)
 		contentsFrame && ( contentsFrame.style.width = '1%' );
 
+		height = convertCssUnitToPx( height );
+
 		// Get the height delta between the outer table and the content area.
 		var contentsOuterDelta = ( outer.$.offsetHeight || 0 ) - ( contents.$.clientHeight || 0 ),
 
 		// If we're setting the content area's height, then we don't need the delta.
 			resultContentsHeight = Math.max( height - ( isContentHeight ? 0 : contentsOuterDelta ), 0 ),
 			resultOuterHeight = ( isContentHeight ? height + contentsOuterDelta : height );
 
-		contents.setStyle( 'height', resultContentsHeight + 'px' );
+		contents.setStyle( 'height', CKEDITOR.tools.cssLength( resultContentsHeight ) );
 
 		// WebKit needs to refresh the iframe size to avoid rendering issues. (2/2) (https://dev.ckeditor.com/ticket/8348)
 		contentsFrame && ( contentsFrame.style.width = '100%' );
@@ -322,6 +330,10 @@ CKEDITOR.replaceClass = 'ckeditor';
 		return forContents ? this.ui.space( 'contents' ) : this.container;
 	};
 
+	function convertCssUnitToPx( unit ) {
+		return CKEDITOR.tools.convertToPx( CKEDITOR.tools.cssLength( unit ) );
+	}
+
 	function createInstance( element, config, data, mode ) {
 		element = CKEDITOR.editor._getEditorElement( element );
 

tests/core/creators/manual/resizewithcssunits.html

@@ -0,0 +1,56 @@
+<style>
+	.input-container > div {
+		margin-bottom: 15px;
+	}
+
+	label {
+		display: block;
+	}
+
+	[type="checkbox"] + label {
+		display: inline-block;
+	}
+
+	button {
+		margin-bottom: 15px;
+	}
+</style>
+
+<div class="input-container">
+	<div>
+		<label for="width">Width</label>
+		<input type="text" name="width" id="width">
+	</div>
+
+	<div>
+		<label for="height">Height</label>
+		<input type="text" name="height" id="height">
+	</div>
+
+	<div>
+		<input type="checkbox" name="isContentHeight" id="isContentHeight">
+		<label for="isContentHeight">is content height</label>
+	</div>
+
+	<button type="submit" id="resize-button">Resize!</button>
+</div>
+
+<div id="editor">
+	<p>Lorem ipsum dolor sit amet.</p>
+</div>
+
+<script>
+	var editor = CKEDITOR.replace( 'editor' ),
+		resizeButton = CKEDITOR.document.getById( 'resize-button' ),
+		editorWidth = CKEDITOR.document.getById( 'width' ),
+		editorHeight = CKEDITOR.document.getById( 'height' ),
+		isContentHeight = CKEDITOR.document.getById( 'isContentHeight' );
+
+	resizeButton.on( 'click', function () {
+		editor.resize(
+			editorWidth.getValue(),
+			editorHeight.getValue(),
+			isContentHeight.$.checked
+		);
+	} );
+</script>

tests/core/creators/manual/resizewithcssunits.md

@@ -0,0 +1,31 @@
+@bender-tags: bug, 4.14.1, 1883
+@bender-ui: collapsed
+@bender-ckeditor-plugins: toolbar, wysiwygarea, table
+
+**For each scenario use one of these values:**
+- `300`
+- `10cm`
+- `50mm`
+- `8in`
+- `20pc`
+- `300pt`
+- `200px`
+
+## Scenario 1
+
+1. Fill width and height fields with values from the beginning of the test.
+1. Press `Resize!` button.
+
+### Expected
+
+The whole editor changes its size reflecting used unit values.
+
+## Scenario 2
+
+1. Fill width and height fields with values from the beginning of the test.
+1. Tick `is content height` checkbox.
+1. Press `Resize!` button.
+
+### Expected
+
+Editor changes its size of editing area reflecting used unit values. Note that the toolbar shouldn't be included in resize.

tests/core/creators/themedui.js

@@ -4,6 +4,7 @@
 ( function() {
 	'use strict';
 
+	// Helper functions
 	function getEditorContentHeight( editor ) {
 		return editor.ui.space( 'contents' ).$.offsetHeight;
 	}
@@ -12,6 +13,15 @@
 		return editor.container.$.offsetHeight;
 	}
 
+	function getEditorInnerHeight( editor ) {
+		return editor.container.findOne( '.cke_inner' ).$.offsetHeight;
+	}
+
+	var unitsToTest = [
+		// absolute lengths
+		'cm', 'mm', 'in', 'pc', 'pt', 'px'
+	];
+
 	bender.editor = {
 		config: {
 			// Set the empty toolbar, so bazillions of buttons in the build mode will not
@@ -47,6 +57,69 @@
 
 			assert.areSame( 'cke_' + editor.name, editor.container.getId() );
 			assert.areSame( editor.ui.space( 'contents' ), editor.ui.contentsElement );
+		},
+
+		// (#1883)
+		'test resize event with css units': function() {
+			var editor = this.editor,
+				lastResizeData = 0;
+
+			editor.on( 'resize', function( evt ) {
+				lastResizeData = evt.data;
+			} );
+
+			for ( var i = 0; i < unitsToTest.length; i++ ) {
+				var width = 20 + unitsToTest[i],
+					height = 50 + unitsToTest[i];
+
+				editor.resize( width, height );
+				assert.areSame( CKEDITOR.tools.convertToPx( height ), lastResizeData.outerHeight );
+				assert.areSame( CKEDITOR.tools.convertToPx( width ), lastResizeData.outerWidth );
+				assert.areSame( getEditorContentHeight( editor ), lastResizeData.contentsHeight );
+				assert.areSame( CKEDITOR.tools.convertToPx( height ), getEditorOuterHeight( editor ) );
+			}
+		},
+
+		// (#1883)
+		'test resize event with css units and isContentHeight': function() {
+			var editor = this.editor,
+				lastResizeData = 0;
+
+			editor.on( 'resize', function( evt ) {
+				lastResizeData = evt.data;
+			} );
+
+			for ( var i = 0; i < unitsToTest.length; i++ ) {
+				var width = 20 + unitsToTest[i],
+					height = 50 + unitsToTest[i];
+
+				editor.resize( width, height, true );
+				assert.areSame( getEditorOuterHeight( editor ), lastResizeData.outerHeight );
+				assert.areSame( CKEDITOR.tools.convertToPx( width ), lastResizeData.outerWidth );
+				assert.areSame( getEditorContentHeight( editor ), lastResizeData.contentsHeight );
+				assert.areSame( CKEDITOR.tools.convertToPx( height ), getEditorContentHeight( editor ) );
+			}
+		},
+
+		// (#1883)
+		'test resize event with css units and resizeInner': function() {
+			var editor = this.editor,
+				lastResizeData = 0;
+
+			editor.on( 'resize', function( evt ) {
+				lastResizeData = evt.data;
+			} );
+
+			for ( var i = 0; i < unitsToTest.length; i++ ) {
+				var width = 20 + unitsToTest[i],
+					height = 50 + unitsToTest[i];
+
+				editor.resize( width, height, false, true );
+				assert.areSame( getEditorInnerHeight( editor ), lastResizeData.outerHeight );
+				assert.areSame( CKEDITOR.tools.convertToPx( width ), lastResizeData.outerWidth );
+				assert.areSame( getEditorContentHeight( editor ), lastResizeData.contentsHeight );
+				assert.areSame( CKEDITOR.tools.convertToPx( height ), getEditorInnerHeight( editor ) );
+			}
 		}
 	} );
 } )();