changing the background color for ckEditor

Question

I need to change the background color dynamically on load with my ckEditor the page that it is on is a dynamically loading page where they user has a specific bg color. I can not load a css it has to be just the editor body background color

so i tried

window.onload=function(){
    CKEDITOR.instances.editor_data.addCss( 'body { background-color: #efefef; }' );
}

i do not get an error, but also do not get any changes

i also tried

CKEDITOR.instances.editor_data.addCss( '#cke_editor_data { background-color: #efefef; }' );

Suksukarno

Answer 1

If you're calling that during window.load then it's too late, addCss defines some css to load when the editor is created, but it doesn't modify the running instance.

So you can so this (using only addCSS):

CKEDITOR.on('instanceCreated', function(e) {
    e.editor.addCss( 'body { background-color: red; }' );
});

Or this (a more generic way to work with the edited document)

CKEDITOR.on('instanceReady', function(e) {
    // First time
    e.editor.document.getBody().setStyle('background-color', 'blue');
    // in case the user switches to source and back
    e.editor.on('contentDom', function() {
        e.editor.document.getBody().setStyle('background-color', 'blue');
    });
});

Sequential

@AlfonsosML +1, Found your answer and it works great. However, I have multiple editors on 1 page. Do you know how can I target each editor separately? – Probation

the events are fired for each editor and e.editor contains the editor that the event refers to, so you just need to check it (for example its name) to decide what to do with it. – Sequential

Looking in the docs for CKeditor v4, addCss is a method of the CKEDITOR object, but not of editor instances anymore, so your first method will not work in v4. Instead, you need to use editor.document.addCssText(). Also, in your second method, you need to capture the 'mode' event as well (or instead of) 'contentDom', because clicking [Source] twice in the editor toolbar doesn't seem to fire contentDom (I checked). In the 'mode' event handler, check that editor.mode==='wysiwyg' before proceeding: editor.document is null when in source-editing mode. – Patriarchy

@vinylDeveloper: What AlfonsoML said will work, but in some cases a better way might be to add the event listeners in the config object for each editor - i.e. what you pass as the 2nd parameter to CKEDITOR.replace(): CKEDITOR.replace('textarea1',{...,on:{instanceReady:setEditorStyle,mode:setEditorStyle,...}}). Here setEditorStyle is the name of your event-handler function that you need to define elsewhere in your code (it can be named anything you like, of course). This way you can add different event handlers to different editor instances, if needed. – Patriarchy

Oops... 2 comments ago, I should have said editor.document.appendStyleText(), not editor.document.addCssText() - sorry! – Patriarchy

Yep, I replied to an answer about CKEditor 3 one year ago. I don't have psychic powers to guess how they plan to modify the APIs of CKEditor in the future so I couldn't know that they would move the addCss method to the main CKEDITOR object. Also the second method used to work, but they have broken some of that functionality and you have might have to rewrite it to keep it working. – Sequential

Second option worked perfectly. This was a tricky challenge, I appreciate the good solution. – Wixted

Answer 2

@AlfonsosML's second answer above is perfect for targeting the body element of the editor. However I needed to target the a tag within the editor and found his first answer broke it. I then tried the solution offered by @Doin in the comments: editor.document.addCssText() which also failed. @Doin had kindly corrected code in the the comment to editor.document.appendStyleText() but it was hidden above. I have given his correction a 'Useful' vote so that hopefully it will be visible to others more quickly. This worked for me. My working code mixed the 2:

CKEDITOR.on('instanceReady', function(e) {
    // First time
    e.editor.document.getBody().setStyle('background-color', 'rgba(0,0,0,0.59)');
    e.editor.document.getBody().setStyle('color', 'white');
    e.editor.document.getBody().setStyle('text-align', 'center');
    e.editor.document.appendStyleText( 'a { color: white; }' );
    // in case the user switches to source and back
    e.editor.on('contentDom', function() {
        e.editor.document.getBody().setStyle('background-color', 'rgba(0,0,0,0.59)');
        e.editor.document.getBody().setStyle('color', 'white');   
        e.editor.document.getBody().setStyle('text-align', 'center');
        e.editor.document.appendStyleText( 'a { color: white; }' );
    });
}); 

Thank you

Phytosociology

Answer 3

also, you can add this style for CKEditor

.cke_contents{border:solid 1px #696969;background-color:white;}

Bosom

Answer 4

I suggest use only CSS for this particular editor, while keeping other editors on your website unchanged:

.your-div-class__editor .ck-editor .ck-editor__main .ck-content {
    background: rgb(37, 49, 61);
}

Where your-div-class__editor is the <div class="your-div-class__editor">...</div> where the exact editor should be created.

Alternatively, you can use just the .ck-content css selector and set the content background for every ck-editor on the page (or site), depending on the scope of your css.

Folsom