如何定位CKEditor内部类 解决编辑区字号设置不生效问题

• 你写的嵌套语法是Sass/Less等CSS预处理器的语法，若没有对应的预编译流程直接在原生CSS中使用，绝大多数浏览器无法识别，规则会直接失效。
• 经典模式CKEditor的编辑区是放在独立iframe中的，iframe内部是完全独立的文档上下文，外层页面的CSS选择器无法穿透匹配iframe内部的DOM元素。你写的body .cke_editable匹配的是当前外层页面的body下的子元素，根本碰不到iframe里带cke_editable类的编辑区body。
• 就算是同文档场景，你写的body .cke_editable选择器也有问题：中间的空格代表后代选择器，即选中body的子元素中带cke_editable类的节点，但实际cke_editable是body元素自身的类名，正确写法应该是body.cke_editable（中间无空格）。

方案1：通过CKEditor配置注入编辑区样式（最稳定，适配经典iframe模式，推荐） #

不要在外层页面写选择器硬找iframe内的元素，直接在CKEditor初始化时给内部编辑区注入样式即可：

// CKEditor 4 初始化示例
CKEDITOR.replace('你的编辑器挂载元素ID', {
  // 其余原有配置保留
  on: {
    instanceReady: function (evt) {
      const editor = evt.editor
      // 直接给编辑区body设置样式
      editor.document.getBody().setStyles({
        'font-size': '20px',
        'line-height': '1.6',
        'word-wrap': 'break-word'
      })
    }
  }
})

如果要统一管理编辑区样式，也可以单独写编辑区专用的CSS文件，通过配置加载到iframe内部：

CKEDITOR.replace('你的编辑器挂载元素ID', {
  contentsCss: '/你的静态资源路径/ckeditor-content.css' // 该CSS文件会被加载到iframe内部
})

在ckeditor-content.css里直接写规则即可，不需要加外层.feed-ckeditor前缀：

body.cke_editable {
  font-size: 20px;
  line-height: 1.6;
  word-wrap: break-word;
}

方案2：适配内联模式CKEditor（无iframe场景） #

如果你用的是没有iframe的内联版CKEditor，把嵌套的CSS改写成原生CSS支持的平铺写法，修正选择器错误即可：

.feed-ckeditor .cke_chrome {
  border: none !important;
}
.feed-ckeditor .cke_chrome .cke_contents {
  height: 100px !important;
}
.feed-ckeditor .cke_editable {
  font-size: 20px !important;
  line-height: 1.6;
  word-wrap: break-word;
}
.feed-ckeditor .cke_bottom {
  border-top: 1px solid #c9c9c94d !important;
  border-bottom: 1px solid #c9c9c94d !important;
}

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