如何修改CK Editor默认字体族与字号？配置后样式未生效

我之前也踩过一模一样的坑！你用的font_defaultLabel和fontSize_defaultLabel确实只能修改工具栏下拉菜单的选中显示值，根本不会影响编辑区域的实际样式——因为CK Editor的编辑区域是一个独立的iframe，它的样式由专门的contents.css控制，和工具栏配置是完全分开的模块。

给你两个靠谱的解决办法，按需选择：

方法一：直接修改核心样式文件（适合不需要频繁升级CK Editor的场景） #

找到CK Editor安装目录里的contents.css文件，定位到body的样式规则，把字体和字号改成你需要的配置：

body {
    font-family: Georgia, serif;
    font-size: 20px;
    /* 保留原有其他样式，比如margin、padding、color这些，别全部删除 */
}

方法二：引入自定义样式文件（推荐，避免升级CK Editor时覆盖修改） #

如果不想改动核心文件，怕以后升级CK Editor时丢失自定义配置，可以自己创建一个自定义样式文件，比如custom-ck-content.css，内容如下：

body {
    font-family: Georgia, serif;
    font-size: 20px;
}

然后在CK Editor的配置里指定加载这个自定义样式，同时保留你原来的下拉菜单配置：

// 保留下拉菜单的默认选中项配置
config.font_defaultLabel = 'Georgia';
config.fontSize_defaultLabel = '20';
// 新增自定义内容样式配置
config.contentsCss = '/path/to/your/custom-ck-content.css';
// 如果需要同时保留默认样式+自定义样式，可以传数组：
// config.contentsCss = [CKEDITOR.getUrl('contents.css'), '/path/to/your/custom-ck-content.css'];

这样设置完成后，编辑区域的默认文本样式就会变成你想要的Georgia字体、20号大小，同时工具栏的下拉菜单也会默认选中对应的选项，完美匹配~

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