如何将 CKEditor 上的主题/皮肤从浅色更改为深色？

Question

我正在为我的网站使用 CKEditor，我正在尝试将所有元素从浅色变为深色模式。

---

我有

<script src="//cdn.ckeditor.com/4.8.0/standard/ckeditor.js"></script>



<textarea name="description" rows="100" cols="80" id="description">
......TEXTS......
</textarea>
<script>
CKEDITOR.replace( 'description' );
CKEDITOR.config.height = 500;
</script>

---

我试过了

下载 zip，并将其移至我的项目中，地址为 /js。

CKEDITOR.replace( 'description', {
    skin: 'moonocolor,/js/ckeditor/skins/moono-dark/skin.js',
    height : 500
} );

这一行

皮肤：'moonocolor,/js/ckeditor/skins/moono-dark/skin.js',

好像没用。

Answer 1

转到https://ckeditor.com/cke4/builder 选择标准预设，然后选择皮肤 Moono Dark，然后单击最后的下载按钮。 解压/js/文件夹中的文件，然后使用：

<script src="/js/ckeditor/ckeditor.js"></script>
<textarea name="description" rows="100" cols="80" id="description">
</textarea>
<script>
CKEDITOR.replace( 'description' );
</script>

无需使用 skin 配置选项，因为 Moono Dark 是您设置中唯一的皮肤。

编辑：如果您想要黑色背景和白色文本，请在 replace 命令之前添加此行：

CKEDITOR.addCss('.cke_editable { background-color: black; color: white }');

或者编辑ckeditor目录下的contents.css，修改body标签的CSS（但是如果你更新ckeditor这个文件会被替换，所以要小心）

或在 ckeditor 目录中创建一个新文件 myfile.css，并使用您对 body 标签或 .cke_editable 类的 CSS 修改，并将其加载到您的配置文件中：

config.contentsCss = [CKEDITOR.getUrl('contents.css'), CKEDITOR.getUrl('myfile.css')];

EDIT2：要更改边框颜色，您必须修改网页 CSS，而不是 ckeditor，如下所示：

.cke_chrome {
    border: 1px solid black !important;
}

对于底栏，我只知道如何完全删除它，但是你不能在你这样做之后调整ckeditor的大小。将这些行添加到您的配置文件中：

config.removePlugins = 'elementspath';
config.resize_enabled = false;