CKEditor删除内联img样式

Question

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

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

在CSS中,我添加了一个样式来覆盖宽度,但是高度: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>

而且,正如我猜,它完全解决了你的问题.