Ckeditor4: editor.resize() doesn't work with CSS units

Created on 11 Apr 2018  路  2Comments  路  Source: ckeditor/ckeditor4

Are you reporting a feature request or a bug?

Bug

Provide detailed reproduction steps (if any)

  1. Open sample CKEditor.
  2. Open console, and type CKEDITOR.instances[ 'your-instance-name' ].resize( '500em', '500em' )

Expected result

Editor is resized.

Actual result

Nothing happens

Other details

According to docs you should be able to pass

a CSS size value with unit as an argument.

Note: None of other CSS are working.

  • Browser: Any
  • OS: Any
  • CKEditor version: 4.9.2
  • Installed CKEditor plugins: resize
good first issue S confirmed bug

Most helpful comment

Yes, I suffer from this issue too. It's caused by this line of CKEDITOR.editor.prototype.resize in /core/creators/themedui.js:

outer.setSize( 'width', width, true );

While the definition of CKEDITOR.dom.element.prototype.setSize in /core/dom/element.js is:

/**
     * Sets the element size considering the box model.
     *
     * @param {'width'/'height'} type The dimension to set.
     * @param {Number} size The length unit in px.
     * @param {Boolean} isBorderBox Apply the size based on the border box model.
     */
    CKEDITOR.dom.element.prototype.setSize = function( type, size, isBorderBox ) {
        if ( typeof size == 'number' ) {
            if ( isBorderBox && !( CKEDITOR.env.ie && CKEDITOR.env.quirks ) )
                size -= marginAndPaddingSize.call( this, type );

            this.setStyle( type, size + 'px' );
        }
    };

Clearly, it receives only numeric values, thus CSS unit values fail.

And for height, there are those lines in the same method CKEDITOR.editor.prototype.resize:

resultContentsHeight = Math.max( height - ( isContentHeight ? 0 : contentsOuterDelta ), 0 ),
            resultOuterHeight = ( isContentHeight ? height + contentsOuterDelta : height );

        contents.setStyle( 'height', resultContentsHeight + 'px' );

If fed with CSS unit value strings, they will involve string and number computations which result in NaN and the end result applied to the element height is "NaNpx", which is rejected.

All 2 comments

Yes, I suffer from this issue too. It's caused by this line of CKEDITOR.editor.prototype.resize in /core/creators/themedui.js:

outer.setSize( 'width', width, true );

While the definition of CKEDITOR.dom.element.prototype.setSize in /core/dom/element.js is:

/**
     * Sets the element size considering the box model.
     *
     * @param {'width'/'height'} type The dimension to set.
     * @param {Number} size The length unit in px.
     * @param {Boolean} isBorderBox Apply the size based on the border box model.
     */
    CKEDITOR.dom.element.prototype.setSize = function( type, size, isBorderBox ) {
        if ( typeof size == 'number' ) {
            if ( isBorderBox && !( CKEDITOR.env.ie && CKEDITOR.env.quirks ) )
                size -= marginAndPaddingSize.call( this, type );

            this.setStyle( type, size + 'px' );
        }
    };

Clearly, it receives only numeric values, thus CSS unit values fail.

And for height, there are those lines in the same method CKEDITOR.editor.prototype.resize:

resultContentsHeight = Math.max( height - ( isContentHeight ? 0 : contentsOuterDelta ), 0 ),
            resultOuterHeight = ( isContentHeight ? height + contentsOuterDelta : height );

        contents.setStyle( 'height', resultContentsHeight + 'px' );

If fed with CSS unit value strings, they will involve string and number computations which result in NaN and the end result applied to the element height is "NaNpx", which is rejected.

@ashrafsabrym we fixed the issue but note that this method is supposed to only work with absolute CSS units. Docs have been also updated as they could give incorrect information about this feature.

Closed in #4010

Was this page helpful?
0 / 5 - 0 ratings