ckeditor - CKEditor 移除内联 img 样式

Question

我正在使用响应式图像技术，使用 CSS 将最大宽度设置为 100%。

这不适用于通过 CKEditor 添加的任何图像，因为添加了内联样式。

在 CSS 中，我添加了一个样式来覆盖宽度，这有效，但 height: auto 没有，因此图像被拉伸。

我需要找到一种方法来阻止 CKEditor 首先添加内联样式。

我正在使用 CKEditor 4.x

谢谢

Answer 1

接受答案的更好替代方法是使用disallowedContent（请参阅文档），而不是allowedContent.

使用allowedContent要求您为每个可能的标签或属性创建一个相当大的白名单；哪里disallowedContent没有；允许您定位要忽略的样式。

这可以这样做：

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

Answer 2

从 4.1 版开始，CKEditor 提供了所谓的内容转换，并且已经定义了其中的一些。如果您限制了您config.allowedContent不想拥有的样式width和样式，那么编辑器会自动将样式转换为属性。例如：height<img>

CKEDITOR.replace( 'editor1', {
    allowedContent: 
        'img[!src,alt,width,height]{float};' + // Note no {width,height}
        'h1 h2 div'
} );

然后：

<p><img alt="Saturn V carrying Apollo 11" class="left" src="assets/sample.jpg" style="height:250px; width:200px" /></p>

变成输出：

<p><img alt="Saturn V carrying Apollo 11" height="250" src="assets/sample.jpg" width="200" /></p>

而且，我猜，它完全解决了你的问题。

Answer 3

您可以在保存之前收听instanceReady事件并更改任何元素，在您的情况下为img标签

CKEDITOR.on('instanceReady', function (ev) {
    ev.editor.dataProcessor.htmlFilter.addRules(
    {
        elements:
        {
            $: function (element) {
                // check for the tag name
                if (element.name == 'img') {
                    var style = element.attributes.style;

                   // remove style tag if it exists
                    if (style) {
                        delete element.attributes.style;
                    }
                }

                // return element without style attribute
                return element;
            }
        }
    });
});