0

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

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

正如我正确理解的那样，每个插件都注册了自己的allowedContent，所以我在图像插件中更改了以下行allowed = 'img[alt,!src]，allowed = 'img[alt,!src, width, height]但它不起作用

4

3 回答 3

2

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

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

您之前更改图像的尝试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]{*}(*)';

因此，如果您只更改了第一次出现，那么第二次将覆盖它。

于 2013-05-16T05:44:34.250 回答
1

非常感谢 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' );
    }
}
于 2013-05-16T11:38:34.813 回答
0

这现在非常简单：

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

于 2015-07-29T00:08:51.150 回答