Search code examples
javascriptjquerycssckeditorckeditor4.x

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

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

enter image description here

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.

Solution

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