如何将 CKEditor 上的 theme/skin 从浅色变为深色？

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
} );

这一行

skin: '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，这个文件会被替换，所以要小心）

或者使用 CSS 修改 body 标签或 .cke_editable class 在 ckeditor 目录中创建一个新文件 myfile.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;

如何将 CKEditor 上的 theme/skin 从浅色变为深色？

How to change theme/skin on CKEditor from light to dark?

javascript

css

jquery

ckeditor

ckeditor4.x

我有

我试过了