CKEditor ACF image width and height

0

votes

I am trying to force CKEditor to set image width and height as attributes not styles. According to docs i need to set in CKEditor config allowedContent = img[!src,alt,width,height] but when i do this CKEditor mode changes from automatic to custom and filters all other html tags.

How to change allowedContent only this specific case?

As i understand correctly each plugin registers its own allowedContent, so i changed in image plugin following line allowed = 'img[alt,!src] to allowed = 'img[alt,!src, width, height] but it does not work

ckeditor

2

votes

ACF lacks one thing - #feature event. There's currently no convenient way to alter allowedContent of a feature being registered.

In your case, you will be able to use a temporary solution I described on CKEditor forum.

Your previous attempt to alter image's allowedContent wasn't successful most likely because you haven't fully replaced it. This is a code from image plugin:

var allowed = 'img[alt,!src]{border-style,border-width,float,height,margin,margin-bottom,margin-left,margin-right,margin-top,width}',
    required = 'img[alt,src]';

if ( CKEDITOR.dialog.isTabEnabled( editor, pluginName, 'advanced' ) )
    allowed = 'img[alt,dir,id,lang,longdesc,!src,title]{*}(*)';

So if you have changed just the first occurrence, then the second overrides it.

1

votes

Many thanks Rainmar for help. It seems that dialog is removing the attributes. I managed to fix that changing commit function for width and height in image/dialogs/image.js file.

The old function looked like this (for width only):


commit: function( type, element, internalCommit ) {
var value = this.getValue();
    if ( type == IMAGE ) {
        if ( value )
            element.setStyle( 'width', CKEDITOR.tools.cssLength( value ) );
        else
            element.removeStyle( 'width' );

        !internalCommit && element.removeAttribute( 'width' );
    } else if ( type == PREVIEW ) {
        var aMatch = value.match( regexGetSize );
        if ( !aMatch ) {
            var oImageOriginal = this.getDialog().originalElement;
            if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )
                element.setStyle( 'width', oImageOriginal.$.width + 'px' );
        } else
            element.setStyle( 'width', CKEDITOR.tools.cssLength( value ) );
    } else if ( type == CLEANUP ) {
        element.removeAttribute( 'width' );
        element.removeStyle( 'width' );
    }
}

And change it to this:


commit: function( type, element, internalCommit ) {
var value = this.getValue();
    if ( type == IMAGE ) {
        if ( value ) {
            element.setAttribute('width', value + 'px');
            element.setStyle( 'width', CKEDITOR.tools.cssLength( value ) );
        }else {
            element.removeAttribute('width');
            element.removeStyle( 'width' );
        }
        !internalCommit && element.removeStyle( 'width' ); 
    } else if ( type == PREVIEW ) {
        var aMatch = value.match( regexGetSize );
        if ( !aMatch ) {
            var oImageOriginal = this.getDialog().originalElement;
            if ( oImageOriginal.getCustomData( 'isReady' ) == 'true' )
                element.setStyle( 'width', oImageOriginal.$.width + 'px' );
        } else
            element.setStyle( 'width', CKEDITOR.tools.cssLength( value ) );
    } else if ( type == CLEANUP ) {
        element.removeAttribute( 'width' );
        element.removeStyle( 'width' );
    }
}

0

votes

This is now super simple:

config.allowedContent = {
    $1: {
        // Use the ability to specify elements as an object.
        elements: CKEDITOR.dtd,
        attributes: true,
        styles: true,
        classes: true
    }
};
config.disallowedContent = 'img{width,height}';

Which will alow everything, and convert inline image width/height to attributes.

http://docs.ckeditor.com/#!/guide/dev_acf-section-example%3A-disallow-inline-styles-and-use-attributes-instead

CKEditor ACF image width and height

3 Answers