CKEDITOR - 防止将图片尺寸作为CSS样式添加

Question

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

而不是这样：

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

我想要这个

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

- Franek

---

@Funky Dude - 可能是一个XHTML Strict页面。 - Thiago Belem

@Funky Dude，请看@Stephen的评论。我们将使用它来创建电子邮件通讯的内容。因此，我们不能使用CSS。有时候，如果您不指定图像的尺寸，Outlook可能无法显示图像。 - Franek

目前有任何可接受的答案吗？ - Milche Patern

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

- Marco Cortellino

---

这对我很有效。其他答案中链接的补丁是针对单个实例硬编码的，而我经常在页面上有多个实例。 作为额外的奖励，当放置在我的自定义JS配置文件中时，它也可以工作，这意味着我可以保持ckeditor库不变，使升级更容易。 - Synchro

这在我的IE 9中使用CKEditor 4.1.2无法工作 :( 但在Chrome中运行良好。 - mlunoe

使用版本：“4.1.1”，修订版：“5a2a7e3”，这个补丁似乎可以很好地跨浏览器工作。 - Milche Patern

谢谢！我在这个基础上进行了复制和修改，以添加对浮点数的处理，将其转换为对齐属性。这使我能够绕过Drupal中某些XSS过滤器对图像样式属性的剥离。 - Brock Boland

在Drupal 7中，将此代码附加到sites/all/modules/ckeditor/ckeditor.config.js文件。 - Vojtech Vitek - golang.cz

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

- Wiktor Walc

---

这个对我有用，而@Marco的解决方案没有。我使用的是4.4.5版本。 - Gab

如果您想允许所有内容，并将样式转换为属性，则可以执行以下操作：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}';链接 - Thomas Wood

这在最新版本中效果最佳。我不得不结合Marco Cortellino的答案，才能使用编辑器中的手柄进行调整大小。 - ColmanJ

这在4.4.5版本上是如何工作的？我无法让它工作。 - ibubi

我也尝试了，但没有成功。我的版本是4.6.1，请给予建议。 - Kushan Randima

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

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

- rykr

---

您可以在 CKEditor 的 zip 包中的 _source 文件夹中获取该文件。 - AlfonsoML

Answer 4

我不相信你能在不修改CKEDITOR的图像插件文件的情况下完成它。

如果你搜索他们的错误跟踪网站，你会看到他们试图“避免使用XHTML废弃属性”，而倾向于使用样式（避免废弃的图像属性）。

如果你想自己完成它（通过修改源文件），那么需要查找这个文件：plugins_image_dialogs_image.js。你会发现他们明确删除了该属性，并添加了与之等效的样式。

- Gabriele Petrioli

---

非常好。你可以编辑插件，这应该很简单。但是你为什么要这样做呢？ - Pekka

在响应式设计中，不希望在图像上使用样式属性的一个原因是它们无法随着设计的比例进行缩放。为了解决这个问题，你必须向你的样式表添加!important规则，但这并不是一个理想的解决方案。 - Tyssen

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

                }

    }

- The Orca

Answer 6

类似于Cedric Dugas的解决方案，这里有一个CKEditor的补丁票据，帮助我很好地解决了这个问题：

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

我使用了它，但稍微简化了代码，以便过滤器只处理图像。当图像被插入时，此解决方案有效，也适用于在编辑器中使用手柄调整大小时。

希望能有所帮助。

- MaxiWheat

Answer 7

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

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

要小心使用这个，因为它似乎会删除所有的HTML验证。

- cby016

---

此回答与原问题无关。 - Wiktor Walc