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

Posted 2023-02-16

【中文标题】CKEDITOR - 防止将图像尺寸添加为 CSS 样式

【英文标题】：CKEDITOR - prevent adding image dimensions as a css style

【发布时间】：2011-01-04 08:17:57

【问题描述】：

如何防止CKEDITOR添加图片尺寸作为样式？

而不是这个：

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

我想要这个

<img src="image.jpg"  >

【问题讨论】：

@Funky Dude - 可能是一个 Xhtml 严格页面

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

到目前为止有什么可以接受的答案吗？

【参考方案1】：

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

如果您搜索他们的错误跟踪站点，您会发现他们尝试“避免 XHTML 不推荐使用的属性”以支持样式。 (Avoid deprecated image attributes)

如果您想自己做（通过更改源文件），请查看此文件：plugins_image_dialogs_image.js 您将在那里看到他们专门删除了该属性并添加了等效样式。

【讨论】：

正确。您可以编辑插件，它应该非常简单。但是你为什么要这样做呢？

不希望图像上的样式属性的一个原因是响应式设计，它们不随设计缩放，为了克服这个问题，您必须在样式表中添加 !important 规则不知道。

【参考方案2】：

嘿，我想通了！所以我在这里创建了一个帐户，只是为了给大家发布这个。我没有将它用于 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 );

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

【讨论】：

您可以使用 CKEditor 的其余部分在 zip 的 _source 文件夹下获取该文件。

【参考方案3】：

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

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;
                        
                    

                

    

【参考方案4】：

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

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

我使用了它，但稍微修剪了代码，以便过滤器只处理图像。此解决方案在插入图像时有效，并且在使用编辑器中的句柄调整大小时也有效。

希望对你有帮助

【参考方案5】：

您可以通过将此代码插入 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;
            
        
    );
);

【讨论】：

这对我有用。其他答案之一中链接的补丁是针对单个实例进行硬编码的，并且我经常在一个页面上有多个实例。作为奖励，它放在我的自定义 JS 配置文件中时可以工作，这意味着我可以保持 ckeditor 库不变，这使得升级更容易。

它对我不起作用，支持哪个版本的CKEditor？我正在使用 3.6.3

这对我在 IE 9 中使用 CKEditor 4.1.2 不起作用 :( 不过在 Chrome 中运行良好。

使用版本："4.1.1",revision:"5a2a7e3，这个补丁似乎工作正常，跨浏览器。

谢谢！我对此进行了复制和调整，以添加对浮点数的处理，将其转换为对齐属性。这让我可以绕过 Drupal 中的一些 XSS 过滤，去除图像上的任何样式属性。

【参考方案6】：

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

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

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

【讨论】：

这个答案与原问题无关。

【参考方案7】：

通过使用 CKEditor 4.4.0 中引入的Disallowed Content，还有另一种方法（更简单）：

CKEDITOR.replace( 'editor1', 
    disallowedContent : 'imgwidth,height'
 );

或在 config.js 中：

config.disallowedContent = 'imgwidth,height';

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

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

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

【讨论】：

这对我有用，而@Marco 解决方案却没有。我用 4.4.5

如果你想允许所有内容，并将样式转换为属性，那么你可以这样做：config.allowedContent = $1: // Use the ability to specify elements as an object. elements: CKEDITOR.dtd, attributes: true, styles: true, classes: true ; config.disallowedContent = 'imgwidth,height';link

这在最新版本中效果最好。我必须将它与 Marco Cortellinos 答案结合使用，才能使用编辑器中的句柄调整大小。

这是如何在 4.4.5 版上运行的？我无法让它工作。

它对我也不起作用。我的版本是 4.6.1。请指教。