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

Question

I'm using CKEditor for my site, I'm trying to turn all elements from light to become a dark mode.

---

I have

<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>

---

I've tried

Download the zip, and move it into my project at /js .

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

This line

skin: 'moonocolor,/js/ckeditor/skins/moono-dark/skin.js',

doesn't seem to work.

Answer 1

Go to https://ckeditor.com/cke4/builder Choose Standard preset, then choose the skin Moono Dark, then click Download button at the end. Unzip the file in /js/ folder and just use:

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

No need to use skin config option since Moono Dark is the only skin in your setup.

EDIT: If you want black background with white text, add this line before the replace command:

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

or edit contents.css in ckeditor directory and change CSS of body tag (but this file is replaced if you update ckeditor, so be careful)

or create a new file myfile.css in ckeditor directory with your CSS modifications of body tag or .cke_editable class and load it in your config file with:

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

EDIT2: To change the border color you have to modify your web page CSS, not ckeditor, like this:

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

For the bottom bar, I only know how to completely remove it, but you can't resize ckeditor after you do that. Add these lines to your config file:

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