CKEditor删除inline img样式 [英] CKEditor remove inline img style

问题描述

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

I am using a responsive image technique setting a max-width of 100% with CSS.

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

This isn't working for any images added through CKEditor, as an inline style is added.

在CSS中，我添加了一个样式来覆盖width，但是height：auto不会，因此图片被拉伸。

In CSS I have added a style to override the width, which works, but height: auto doesn't, so the images is stretched.

我需要找到一种方法来阻止CKEditor在第一时间添加内联样式。

I need to find a way to stop CKEditor from adding the inline style in the first place.

我使用CKEditor 4.x

I am using CKEditor 4.x

谢谢

推荐答案

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

Since version 4.1, CKEditor offers so called Content Transformations and already defines some of them. If you restrict in your config.allowedContent that you don't want to have width and height in <img> styles, then editor will automatically convert styles to attributes. For example:

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>

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

and, as I guess, it completely solves your problem.

这篇关于CKEditor删除inline img样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！