Apply background-color in ckeditor textarea

Question

I'm having some problems to apply a background-color in the textarea of a ckeditor instance.

When the user clicks on submit without adding any text, it's shown a message telling him to fill all the required fields, and these required fields areas all with the text-fields set with background-color: #CFC183; .

As the ckeditor is created with javascript code, I was using it to try to check if there's any text entered in the text area. if there's no character, I apply the changes. When I apply in the console this code:

CKEDITOR.instances.body.document.getBody().setStyle('background-color', '#CFC183');

It applies the background exactly like I want to. So, I added this javascript code in my javascript file to try to manage it, but doesn't seems to be working. Here's my code:

var editorInstance = CKEDITOR.replace('body', { toolbar : 'Full' });
editorInstance.on("instanceReady", function (ev) { 
    var editorCKE = CKEDITOR.instances.body; readyMap[editorCKE] = true;
    editorCKE.setReadOnly(true); 
});
var hasText = CKEDITOR.instances.body.document.getBody().getChild(0).getText();
if (!hasText) { 
    CKEDITOR.on('instanceCreated', function(e) { 
        e.editor.document.getBody().setStyle('background-color', '#CFC183');
    });
}

Firebug shows this error message:

TypeError: CKEDITOR.instances.body.document is undefined

I'm not that good at Javascript, so is there anything wrong with my code? I already checked this question here, so I believe there's something wrong with my javascript code and I want your help, please.

Answer 1

I guess that you've got an error in this line:

var hasText = CKEDITOR.instances.body.document.getBody().getChild(0).getText();

This is because you're trying to get document element before it's ready (before instanceReady event).

The same error will be thrown here:

if (!hasText) { 
    CKEDITOR.on('instanceCreated', function(e) { 
        e.editor.document.getBody().setStyle('background-color', '#CFC183');
    });
}

Again - instanceCreated is still too early. You have to move all that code to instanceReady listener. You'll have something like (I'm not sure if I understand what you're trying to achieve):

var editor = CKEDITOR.replace( 'body', { toolbar: 'Full' } );
editor.on( 'instanceReady', function( evt ) {
    readyMap[ editor.name ] = true;
    editor.setReadOnly( true ); 

    var hasText = editor.document.getBody().getFirst().getText();
    if ( !hasText ) { 
        editor.document.getBody().setStyle( 'background-color', '#CFC183' );
    }
} );

As you can see, there is one more issue in your code:

readyMap[editorCKE] = true;

In JS there are no weak maps (yet, but they will be introduced soon). Only strings can be used as a keys of an object. In your case toString() method will be called on editorCKE , which returns [object Object] . That's why I added name property there.