CKEditor ACF图像的宽度和高度

Question

我试图强制CKEditor将图像的宽度和高度设置为属性，而不是样式。根据docs的说法，我需要在CKEditor配置allowedContent = img[!src,alt,width,height]中进行设置，但当我这样做时，CKEditor模式将从自动更改为自定义，并过滤所有其他html标记。

如何仅在此特定情况下更改allowedContent？

根据我的理解，每个插件都注册了自己的allowedContent，所以我将图片插件中的allowed = 'img[alt,!src]改成了allowed = 'img[alt,!src, width, height]，但它不起作用

Answer 1

ACF缺少一样东西-- #feature event。目前还没有方便的方法来更改正在注册的功能的allowedContent。

在您的情况下，您将能够使用我在CKEditor forum上描述的临时解决方案。

您之前更改图像的allowedContent的尝试没有成功，很可能是因为您没有完全替换它。这是来自image插件的代码：

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]{*}(*)';

因此，如果您只更改了第一个匹配项，则第二个匹配项将覆盖它。

Answer 2

非常感谢Rainmar的帮助。似乎对话框正在删除这些属性。我设法修复了image/dialogs/image.js文件中更改宽度和高度的提交函数。

旧函数看起来像这样(仅用于宽度)：

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

并将其更改为：

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

Answer 3

现在，这非常简单：

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

这将降低所有内容，并将内联图像的宽度/高度转换为属性。

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