如何实现CKEditor 4增强图片默认居中对齐？附解决方案

我之前也碰到过这个刚需——每次在CKEditor里插图片都要手动调居中，实在太繁琐了，找了一圈没看到现成的示例，折腾了好一会儿才摸清楚配置方法，正好分享给同样有这个需求的人，这个方案适用于**CKEditor 4 + Enhanced Image（image2插件）**的场景：

步骤1：定位CKEditor配置文件 #

CKEditor根目录下一般会有个config.js文件，这就是我们要修改的配置入口，如果没有的话直接新建一个即可。

步骤2：添加默认对齐配置 #

在config.js里插入以下代码：

// 设置插入Enhanced Image时默认居中对齐
config.image2_defaultAlign = 'center';

// （可选）如果项目用自定义CSS类控制对齐，可配置此项
// 类名对应你项目里的样式类，编辑器会给图片自动添加指定类
config.image2_alignClasses = [ 'image-align-left', 'image-align-center', 'image-align-right' ];

补充说明 #

• image2_defaultAlign是Enhanced Image插件专门用于设置默认对齐的配置项，可选值包括'left'、'center'、'right'、'none'，直接设为'center'就能实现插入图片时自动居中。
• 如果你的项目不希望用编辑器默认的内联样式（比如style="text-align:center"），而是想用自定义CSS类统一控制对齐样式，就可以配置image2_alignClasses，把项目里对应的类名填进去，编辑器会自动给图片元素加上指定类，方便后续样式维护。

内容的提问来源于stack exchange，提问作者zubroid