去除CKEditor上传图片时自动加宽高样式（width和height）

CKEditor是一款非常优秀的编辑器，尤其是目前最新的版本5，非常好用，之前我们也整理过CKEditor5的接入使用教程，不过本篇呢，我们要说一些关于老版本的CKEditor的问题，默认的CKEditor编辑器在上传图片的时候，会自动带上图片的宽高样式，默认上传图片后，生成的代码如下：

<img alt="" src="xxx.jpg" style="height:322px; width:743px" />

这种情况下，我们就需要一个一个的手动去除这些自动生成的内联样式，如 style="height:XXpx; width:XXpx"，当然对于大量的旧数据，我们也可以使用数据库批量去除图片宽高样式的方法，不过都比较麻烦。最好的解决方案是：通过修改CKEditor编辑器的默认设置，让其在上传的时候自动不带这些内联样式。

一、为什么要去除CKEditor上传图片的内联样式呢？

原因主要有两点：

1、当下人们查找信息主要以移动端为主：

过去的时候，人们查找信息的主要终端是电脑显示器，而现在则以移动设备为主，而内联样式的权重是最好的，也就是说内联样式是不能通过CSS等前端开发的方法覆盖的。

比如说iphone6、7、8，其页面像素宽度均为750像素，物理像素为375，如果要展示一个大于750像素的图片，则会造成溢出，如果强制改变其宽度，则会造成图片变形。

2、设备类型增多，前端开发对响应式前端开发的要求增高

目前，我们能接触到的屏幕类型越来越多，前端开发的网页就需要在不同的设备和屏幕上进行适配。如果使用内联样式，则非常死板。一般我们都会通过CSS样式，对图片的最大宽度进行约束，使其不要溢出。

二、如何去除CKEditor编辑器插入图片的样式？

网站关于CKEditor去除宽高样式的文章比较多，不过同质化太严重，很多高权重的网站疯狂采集，互相采集，造成一篇错误的文章出现在各种权重较高的网站上。

本文主要针对ckeditor4编辑器，今天先给出phpcms的ckeditor4编辑器去除样式的解决方案，之前也处理过其他CMS的，但是当时没有整理，后续有时间的话再整理出来。

根据目录，打开文件：网站根目录\statics\js\ckeditor4\plugins\image\dialogs\image.js。

先将image.js文件备份一份，然后使用IDE的格式化命令将JS代码格式化为可阅读的形式，当然也可找一个在线JS格式的工具（如：https://tool.oschina.net/，大家也可自行查找）。

PS：WebStorm、PhpStorm等JetBrains系列的IDE格式化代码的快捷键为：CTRL+ALT+L 组合键。更多JetBrains系列IDE的快捷键请参考：PhpStorm中常用的快键键整理。

CTRL+F，查找关键词：“setStyle”，然后注意观察寻找：setStyle("width"）和 setStyle("height"）的行。可能你查找到的结果比较多，但是这两个属性基本都是集中在2-4行内的（因为不同的格式化工具格式化到的代码不同，所以这边不给出具体行数，无参考意义），使用CTRL+F查找时，大致在7-12个匹配点，将相关的代码进行注释，即行前加 // 符号。

注释时要注意，有个格式化工具会将太长的语句设置断行，如遇断行，则相关的行都需要注释，原则是整句注释。

当然你也可以直接搜索：setStyle("width"）和 setStyle("height"），但是因为CKEditor编辑器的版本一直在迭代更新，所以存在查找不到的可能。这也是为什么网上能搜到的资料大部分对你不适用的原因。所以，我们推荐用最基本的思路去修改。

{
    type: "vbox",
    padding: 1,
    children: [{
        type: "text",
        width: "45px",
        id: "txtWidth",
        label: d.lang.common.width,
        onKeyUp: z,
        onChange: function () {
            g.call(this, "advanced:txtdlgGenStyle")
        },
        validate: function () {
            var a = this.getValue().match(y);
            (a = !(!a || 0 === parseInt(a[1], 10))) || alert(d.lang.common.invalidLength.replace("%1", d.lang.common.width).replace("%2", "px, %"));
            return a
        },
        setup: B,
        commit: function (a, b) {
            var c = this.getValue();
            //1 == a ? (c && d.activeFilter.check("img{width,height}") ? b.setStyle("width", CKEDITOR.tools.cssLength(c)) : b.removeStyle("width"), b.removeAttribute("width")) : 4 == a ? c.match(l) ? b.setStyle("width", CKEDITOR.tools.cssLength(c)) : (c = this.getDialog().originalElement, "true" == c.getCustomData("isReady") && b.setStyle("width", c.$.width + "px")) : 8 == a && (b.removeAttribute("width"), b.removeStyle("width"))
        }
    },
        {
            type: "text",
            id: "txtHeight",
            width: "45px",
            label: d.lang.common.height,
            onKeyUp: z,
            onChange: function () {
                g.call(this, "advanced:txtdlgGenStyle")
            },
            validate: function () {
                var a = this.getValue().match(y);
                (a = !(!a || 0 === parseInt(a[1], 10))) || alert(d.lang.common.invalidLength.replace("%1", d.lang.common.height).replace("%2", "px, %"));
                return a
            },
            setup: B,
            commit: function (a, b) {
                var c = this.getValue();
                //1 == a ? (c && d.activeFilter.check("img{width,height}") ? b.setStyle("height", CKEDITOR.tools.cssLength(c)) : b.removeStyle("height"), b.removeAttribute("height")) : 4 == a ? c.match(l) ? b.setStyle("height", CKEDITOR.tools.cssLength(c)) : (c = this.getDialog().originalElement, "true" == c.getCustomData("isReady") && b.setStyle("height", c.$.height + "px")) : 8 == a && (b.removeAttribute("height"), b.removeStyle("height"))
            }
        }]
},

修改完之后，将image.js保存，回到网站后台，点击【内容】→【添加内容】，PHPCMS添加内容时是以弹出页面的形式，这个时候，疯狂的CTRL+F5，让页面进行更新原js文件的缓存。当然你也可以直接找到image.js文件的路径，然后在浏览器上打开，这种方法比较优雅，但是效率低。

刷新之后，在编辑内上传一张图片进行测试。一般来说都会有效，这个时候，你可以选择将image.js文件再重新进行压缩一次，以减少体积，当然这一步是可选的。

后续有机会的话，我们会再整理被集成在其他CMS中的CKEditor编辑器去除图片自带样式的方法，不过基本思路都是一样的，只是CKEditor的文件目录不太一样，找到ckeditor目录，进行如法炮制即可。