让 CKEditor 图片响应式(responsive)

通过 CKEditor 上传并插入图片后,CKEditor 的图片部件(widget)会在图片的 <img> 元素里插入行内样式定义来设置图片的宽高,这会导致响应式布局失效:图片因为被固定了宽高,在窗口缩小后会超出外层元素。生成的 HTML 代码示例如下:

对于这个问题,有三种解决方法:

方法 1:设置 CSS

最简单的解决方法是在 CSS 文件里加入下面的代码:

这会重写 CKEditor 生成的行内 CSS。

方法 2:使用插件 Enhanced Image

你可以使用加强版的图片部件插件 Enhanced Image(Image2)来替代原有的图片部件,同时确保 CKEditor 的版本大于 4.3。

(未测试。)

方法 3:使用 JavaScript

如果你使用 Bootstrap,这里还有另一种方法:

出处地址

需要注意的是,如果你使用 Bootstrap 4,需要把第 6 行的 img-responsive 换成 img-fluid。

(未测试。)

说说你的想法吧!

邮箱不会被公开,必填项已用*标出。

*