Question

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

因此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 */
}

我已经尝试了＆＃34; bodyClass＆＃34;配置，但它不适用于divarea。

任何人都有任何想法？谢谢！

Answer 1

最后，因为使用divarea，ckeditor继承了页面的css，所以我在我的页面scss中使用这个css覆盖：

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

另一件关于ckeditor＆＃34;格式＆＃34;下拉菜单样式（如h1，p等），我可以复制并自定义一个新皮肤并修改editor.css和editor _ * .css没关系。

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

1 个答案: