In CkEditor, how do I apply a stylesheet while I'm currently editing?

Question

When CKEditor is loaded and I'm editing the stuff, I want the background to be yellow as I edit.

How do I "set" that stylesheet inside the editor.

Answer 1

There is an option contentsCss which lets you to load an external CSS stylesheet containing your custom style definitions. Using that you can make your content look exactly as it would look on your website. So in order to use it you need to instantiate CKEditor in the following way:

CKEDITOR.replace('mytextarea', {
    // Custom stylesheet for the contents
    contentsCss : 'assets/custom.css'
});

And you would also define you custom.css for example as follows:

body {
    font-family: Arial, Verdana, sans-serif;
    font-size: 12px;
    color: #444;
    background-color: yellow;
}

h1, h2 {
    color: #555;
    background-color: #EFEFEF;
}

/* etc some custom styles */

EDIT. Using config.js

There are couple of ways to achive what you need using config.js file. Example:

CKEDITOR.editorConfig = function( config )
{
    // ... some other configuration options

    // Define some custom class to be assigned to body element ogf the editor area
    config.bodyClass = 'body-yellow';
};

Create contents.css file in the same folder as config.js. Inside define your styles:

.body-yellow {
    background-color: yellow;
}

That's it.