css - 如何将css类设置为ckeditor的div区域

Question

我正在使用 ckeditor 和 divarea 插件，这样我就可以在 div 而不是 iframe 中使用 ckeditor。

这样ckeditor就可以继承页面的css样式了。

现在我想设置ckeditor内容的样式。

一种解决方案是这样的:

.cke_contents h1 {
    font-size: 32px;
    /* custom styles */
}
.cke_contents p {
    font-size: 12px;
    /* custom styles */
}

恐怕这可能会导致其他问题。所以我在想的是设置一个类名，这样我可以自由设置自定义样式。像这样:

<textarea id="ckeTextblock"></textarea>

<script>
    CKEDITOR.replace("ckeTextblock", {
    extraPlugins: 'divarea',
    bodyClass: 'customClassName'
})
</script>

.customClassName h1 {
    font-size: 32px;
    /* custom styles */
}
.customClassName p {
    font-size: 12px;
    /* custom styles */
}

我已经尝试过“bodyClass”配置，但它在 divarea 中不起作用。

有人知道吗？谢谢!

Answer 1

最后，因为使用了 divarea，ckeditor 继承了页面的 css，所以我在页面的 scss 中使用了这样的 css override:

#cke_richTextArea .cke_wysiwyg_div {
   padding: 15px;
   h1 {
       // custom it.
   }
   p {
       // custom it.
   }
}

关于 ckeditor“格式”下拉菜单样式(如 h1、p 等)的另一件事，我可以复制和自定义新皮肤并修改 editor.css 和 editor_*.css 是可以的。