Change background of ckeditor?

问题

How do I change the background colour of CKEditor, where the user types the text? I need to do this dynamically but I cant find the element that needs to change. ANy idea of how to target it?

回答1:

You can try with:

CKEDITOR.instances.editor1.document.getBody().setStyle('background-color', 'red');

Where CKEDITOR.instances.editor1 is an instance of editor - you can test this e.g. here: http://ckeditor.com/demo

回答2:

To change with 'myCss.css' file:

myJavascript:

CKEDITOR.document.$.body.className+=' nameofClass ';

myCss.css:

.nameofClass{
    background-color: 'blue';
}

config.js of ckEditor folder:

config.contentsCss = '/path/myCss.css';

回答3:

If you want to change it with a change or click event:

<textarea id="content" class="main_editor" name="content"></textarea>
<input type="button" class="default-text" value="White" data-value="#ff0000" />

<script>
editor = CKEDITOR.replace("content");
$(document).on("click", ".default-text" , function(e) {
    var color = $(this).data('value');
    editor.document.$.childNodes[1].childNodes[1].style.color = color;
    editor.focus();
});
</script>

I use jquery mini colors and a change event to dynamically change the background (style.background = color).