Question

如何防止CKEDITOR将图像尺寸添加为样式？

而不是：

<img src="image.jpg" style="height:100px; width:100px;">

我想要这个

<img src="image.jpg" height="100px" width="100px">

Answer 1

您可以通过在CKEditor的config.js中插入此代码来解决此问题

CKEDITOR.on('instanceReady', function (ev) {
ev.editor.dataProcessor.htmlFilter.addRules(
    {
        elements:
        {
            $: function (element) {
                // Output dimensions of images as width and height
                if (element.name == 'img') {
                    var style = element.attributes.style;

                    if (style) {
                        // Get the width from the style.
                        var match = /(?:^|\s)width\s*:\s*(\d+)px/i.exec(style),
                            width = match && match[1];

                        // Get the height from the style.
                        match = /(?:^|\s)height\s*:\s*(\d+)px/i.exec(style);
                        var height = match && match[1];

                        if (width) {
                            element.attributes.style = element.attributes.style.replace(/(?:^|\s)width\s*:\s*(\d+)px;?/i, '');
                            element.attributes.width = width;
                        }

                        if (height) {
                            element.attributes.style = element.attributes.style.replace(/(?:^|\s)height\s*:\s*(\d+)px;?/i, '');
                            element.attributes.height = height;
                        }
                    }
                }



                if (!element.attributes.style)
                    delete element.attributes.style;

                return element;
            }
        }
    });
});

Answer 2

通过使用CKEditor 4.4.0中引入的Disallowed Content，还有一种方法可以做到这一点（更简单）：

CKEDITOR.replace( 'editor1', {
    disallowedContent : 'img{width,height}'
} );

或在config.js中：

config.disallowedContent = 'img{width,height}';

此规则将禁止img元素的内联样式（宽度和高度），CKEditor将使用属性代替。

如果由于某种原因，您会注意到图像对话框窗口中的宽度/高度输入元素现在已经消失，请设置以下内容：

config.extraAllowedContent = 'img[width,height]';

Answer 3

嘿，我明白了！所以我在这里创建了一个帐户，只是为了大家发布这个。我没有将它用于Outlook时事通讯，但它应该仍然适用于它，因为它增加了img标签的高度和宽度属性。

如果我们碰巧想要再次这样做，这就是我如何做到的。

首先，我找到了一些完全格式化和注释的源文件：

http://dev.fckeditor.net/browser/CKEditor/tags/3.2/_source/plugins/image/dialogs/image.js

所以我检索了plugins / image / dialogs / image.js的源代码：

svn co http://svn.fckeditor.net/CKEditor/tags/3.2/_source/plugins/image/dialogs

如果您在每行上都有行号，因为您没有下载它并只是复制它，您可以通过运行此命令（从Linux终端）删除它们：

cut -c 5- image.js > image2.js

或者只需点击上方第一个链接页面底部附近的原始格式链接即可。

现在我们有一个可以编辑的干净源文件。

我原来的打包版本是19k。解压缩的源代码是45k。但它应该只在有人正在编辑某些内容时加载，并且不应该成为问题。如果它只是重新包装它。

我所拥有的版本可能与您所拥有的版本不同，因此我将向您展示我正在修改的行以及我对它们所做的操作。

替换第636-641行：

if ( value )
    element.setStyle( 'width', CKEDITOR.tools.cssLength( value ) );
else if ( !value && this.isChanged( ) )
    element.removeStyle( 'width' );

!internalCommit && element.removeAttribute( 'width' );

使用：

if ( value ) {
    element.setStyle( 'width', CKEDITOR.tools.cssLength( value ) );
    element.setAttribute( 'width', value );
} else if ( !value && this.isChanged( ) ) {
    element.removeStyle( 'width' );
    element.removeAttribute( 'width' );
}

//!internalCommit && element.removeAttribute( 'width' );

替换第653行（上述编辑后为657）：

element.setStyle( 'width', value + 'px');

使用：

element.setStyle( 'width', value + 'px');
element.setAttribute( 'width', value );

替换第686-692行（上述编辑后的691-697）：

if ( value )
    element.setStyle( 'height', CKEDITOR.tools.cssLength( value ) );
else if ( !value && this.isChanged( ) )
    element.removeStyle( 'height' );

if ( !internalCommit && type == IMAGE )
    element.removeAttribute( 'height' );

使用：

if ( value ) {
    element.setStyle( 'height', CKEDITOR.tools.cssLength( value ) );
    element.setAttribute( 'height', value );
} else if ( !value && this.isChanged( ) ) {
    element.removeStyle( 'height' );
    element.removeAttribute( 'height' );
}

//if ( !internalCommit && type == IMAGE )
//  element.removeAttribute( 'height' );

替换第704行（上述编辑后的712）：

element.setStyle( 'height', value + 'px' );

使用：

element.setStyle( 'height', value + 'px' );
element.setAttribute( 'height', value );

唯一的问题是当您拖动控制点以调整其大小时它不起作用。我无法弄清楚那一部分。拖动控制点以调整大小后，只需打开图像属性，然后单击确定，它将再次添加宽度和高度属性。

Answer 4

我不相信你可以在不改变CKEDITOR的图像插件文件的情况下做到这一点。

如果您搜索他们的错误跟踪网站，您会看到他们尝试“避免使用XHTML弃用属性”，以支持样式。（Avoid deprecated image attributes）

如果您想自己（通过更改源文件）这样做的地方就是这个文件：plugins_image_dialogs_image.js 您将在那里看到他们专门删除属性并添加等效的样式。

Answer 5

保存表单时，请执行此操作

var CKEDITOR   = window.parent.CKEDITOR;   
        for ( var i in CKEDITOR.instances ){
           var currentInstance = i;
           break;
        }
        var oEditor = CKEDITOR.instances[currentInstance];
        oEditor.dataProcessor.htmlFilter.addRules({
            elements :{
                img : function( element ){
                    if(!element.attributes.width){
                        if(element.attributes.style){
                            var styling = element.attributes.style
                            var findwidth = new RegExp("\[width: \]\s*(((?!\[width: \]|\[px\]).)+)\s*\[px\]")
                            var sWidth = findwidth.exec(styling)
                            sWidth = sWidth[1]
                            if(sWidth) element.attributes.width = sWidth;
                        }
                        // var reg=/width: \s*([0-9]+)\s*px/i;
                        // var res=styling.match(reg);


                    }
                   if(!element.attributes.height){
                        if(element.attributes.style){
                            var styling = element.attributes.style
                            var findheight = new RegExp("\[height: \]\s*(((?!\[height: \]|\[px\]).)+)\s*\[px\]")
                            var sHeight = findheight.exec(styling)
                            sHeight = sHeight[1]
                            if(sHeight) element.attributes.width = sHeight;
                        }
                    }

                }

    }

Answer 6

与Cedric Dugas的解决方案类似，这里有一个CKEditor门票补丁，帮助我解决了这个问题：

http://dev.ckeditor.com/attachment/ticket/5024/5024_6.patch

我使用它但稍微修剪了一下代码，以便过滤器只处理图像。此解决方案在插入图像时以及在使用编辑器中的控件调整大小时都有效。

希望有所帮助

Answer 7

对于ckeditor 4.1版，您可以使用以下内容：

CKEDITOR.replace(textareaId,{
    allowedContent: true,
});

小心这一点，因为它似乎删除了所有的html验证。

CKEDITOR - 防止将图像尺寸添加为css样式

7 个答案: