In CkEditor, how to apply a stylesheet during editing?

Question

When CKEditor is loaded and I am editing material, I want the background to be yellow when I edit.

How to "set" this style sheet inside the editor.

Answer 1

There is a contentsCss option that allows you to load an external CSS stylesheet containing your custom style definitions. Using this, you can make your content what it will look like on your site. Therefore, to use it, you need to create a CKEditor instance as follows:

 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 several ways to achieve what you need using the 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 the contents.css file in the same folder as config.js . Inside, define your styles:

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

What is it.

Answer 2

Something like that:

 var editor = CKEDITOR.replace( 'editor1' ); //textarea with id="editor1" editor.on( 'instanceReady', function( ev ){ //set the background properties this.document.$.childNodes[1].childNodes[1].style.backgroundColor = 'Yellow'; editor.focus(); });
var editor = CKEDITOR.replace( 'editor1' ); //textarea with id="editor1" editor.on( 'instanceReady', function( ev ){ //set the background properties this.document.$.childNodes[1].childNodes[1].style.backgroundColor = 'Yellow'; editor.focus(); }); 

Hope this helps

Answer 3

Create a CSS class that has the desired background color, then use jQuery .focus(); in optional javascript in the footer:

 $('#target').focus(function() { $(this).addClass("yellowBG"); }); 

Answer 4

If you want to go a little further, you can define your own stylesheet from your javascript at runtime -

 function generateCSS(){ var base = document.createElement('style'), baseAttributes = {'id': 'yourID', 'type': 'text/css'}, cssString = ''; base = $(base).attr(baseAttributes); //Now create your css rules cssString += '.body-yellow {background-color: yellow;}'; base.append(cssString).appendTo('head'); } 

And then, when you are done with it, you can delete it if you want.

You can, of course, use simple JavaScript for this. I used jQuery here to be concise. This method helps when your plugins virtualize your series, and you do not want your style sheets to interpret rules that may or may not be used. Therefore, when lines are deleted and inserted (provided that you have quite a lot of custom styles on these lines), you do not need to continue digging through the DOM in order to apply styles -> generate your css and do with.