Question

我试图强制CKEditor将图像宽度和高度设置为属性而不是样式。根据{{3}}我需要在CKEditor config 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

This is now super simple:

Control ctrl;

void MyContextMS_Opening(object sender, CancelEventArgs e) {
  ctrl = ((ContextMenuStrip)sender).SourceControl;
}

private void SeeDetailsToolStripMenuItem_Click(object sender, EventArgs e) {
  Button b = ctrl as Button;
  if (b != null) {
    MessageBox.Show(b.Text);
  }
}

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图像宽度和高度

3 个答案: