CKEditor删除内联img样式

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

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

在CSS中，我添加了一个样式来覆盖宽度，它可以工作，但是height:auto不能，所以图像会被拉伸

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

我正在使用CKEditor 4.x

---

谢谢

自4.1版以来，CKEditor提供了所谓的功能，并且已经定义了其中的一些功能。如果您限制您不想在

在输出中变为：

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

---

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

一个比公认答案更好的选择是使用

不允许的内容

（），而不是

允许的内容

使用

allowedContent

需要为每个可能的标记或属性创建一个相当大的白名单；其中as

不允许的内容

不允许；允许您以要忽略的样式为目标

可以这样做：

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

---

您可以收听

instancerady

事件，并在保存之前更改任何元素，在您的情况下是

img

标记

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

---

据我所知，它还应该去掉你的

p

标签，因为它们是你的规则不允许的。我想在不需要每个可能的标记和属性的巨大白名单的情况下进行转换，即使用

allowedContent:true

，可能如下：

CKEDITOR.on（'instancerady'，function（ev）{ev.editor.filter.addTransformations（[['img:sizeToAttribute']]；]）

使其始终将样式转换为属性，但这没有任何作用。仅供参考

p

由编辑器添加为必备标记，提供

config。enterMode

是

输入p

@Synchro是正确的，使用

allowedContent

要求您将每个标记和属性都列为白名单。我已经发布了一个替代的，更合适的解决方案。这应该是可以接受的答案，因为它完全删除了在弹出窗口中设置图像尺寸的功能…这就是你想要的。酷。它在ckeditor 4.6中不起作用，下面是这个解决方案运行良好的config.js。当我不想使用allowContent时

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

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