Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I'm using an instance of the TinyMCE editor in a plugin form, and I need for the editor to be highlighted (light red background) if the field is not correctly filled in.

I can add a custom class 'error' if my code assesses that the editor has not been filled in as desired, but adding that class only affects the background of the 'Text' mode, not the 'Visual' mode.

Is there a way through the WP options available to me of doing this? Thanks.

Here is how I declare the editor -

/** Set up the editor arguments */
$wp_editor_args = array(
    'media_buttons' => false,
    'textarea_rows' => 10
);

/** Check to see if this editor is in error */
$is_error = $this->is_error_field('description');
if($is_error) :
    $wp_editor_args['editor_class'] = 'error';
    print("\t\t\t\t".'<label class="error custom-editor">Please enter an event description (minimum of 50 characters)</label>'."\n");
endif;

/** Add the editor */
wp_editor($this->options_event['description'], 'description', $wp_editor_args);

Here is the CSS I'm using, just in case anyone is curious -

.dd-options .single-option input.error,
.dd-options .single-option textarea.error{
    background-color: #FFEBE8;
    border-color: red;
}

And here is what I have tried (JS as suggested by @Kaiser)-

/**
 * PHP
 */
add_filter('tiny_mce_before_init', 'initiate_tinyMCE_wordcount');
function initiate_tinyMCE_wordcount($initArray){

    $initArray['setup'] = <<<JS
[function(ed){
    setupcontent_callback : "myCustomSetupContent()";
}][0]
JS;

    return $initArray;

}

/**
 * JS
 */
function myCustomSetupContent() {
    tinyMCE.getInstanceById('description')
        .getWin()
        .document.body.style.backgroundColor = '#FFEBE8';
}
share|improve this question

2 Answers 2

So this is how I achieved what I was after -

The filter 'tiny_mce_before_init' is used to update the settings of the editor, so you can add your own JS to the 'setup' key.

add_filter('tiny_mce_before_init', 'initiate_tinyMCE_wordcount');
function initiate_tinyMCE_wordcount($initArray){

    $initArray['setup'] = <<<JS
[function(ed){

    ed.onLoad.add(function(ed, e){

        var tb_name = tinyMCE.activeEditor.id; // The ID of the active editor

        /** Check to see if the text editor (not the TinyMCE iframe) has the class 'error' */
        if($('#'+tb_name).hasClass('error')){
            tinyMCE.activeEditor // Thanks fot @Kaiser for this bit
                .getWin()
                .document.body.style.backgroundColor = '#FFEBE8';
        }

    });

    return $initArray;

}
share|improve this answer

There seem to be several ways to go it (all found with some Google foo):

Via JS:

function myCustomSetupContent() {
    tinyMCE.getInstanceById( 'mce_editor_0' )
        .getWin()
        .document.body.style.backgroundColor = '#000000';
}
tinyMCE.init( {

    setupcontent_callback : "myCustomSetupContent()"
} );

Via CSS & JS & jQuery:

function myCustomSetupContent( editor_id, body, doc ) {
       $( body ).css( 'background','your_color' );
}
tinyMCE.init( {
    setupcontent_callback : "myCustomSetupContent"
} );

And if it doesn't work in IE, use a timeout:

setTimeout(
        "document.getElementById( 'TinyMCE_ID_you_need_to_change_that_here' )
        .contentWindow.document.body.style.backgroundColor = '#000000'; ",
    100
);
share|improve this answer
    
Thanks, but no joy I'm afraid. For the top one, I've tried declaring in JS but got nothing. I've also added the setupcontent_callback line to the PHP 'tiny_mce_before_init' hook (see question for update), but still nothing. I added an alert to the JS, but the callback is just not firing it. No errors reported by Firebug. Thanks. –  David Gard Jul 12 '13 at 13:30

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.