Using jQuery I am attempting to manipulate the WordPress content editor, which utilizes TinyMCE within an iframe. I can not appear to obtain the following code to operate as intended:

jQuery(document).ready(function($) {
$('#content_ifr').ready(function() {
    $('#content_ifr').contents().find('body').css('background-color', '#f33');
});

No matter whether I personally use ".ready()" or ".load()", the big event will fire prior to the TinyMCE editor (your body from the iframe) is totally finished loading.

However, the next code works basically wait for a iframe to load before by hand clicking the title textbox to fireplace the press event:

jQuery(document).ready(function($) {
$('#title').click(function() {
    $('#content_ifr').contents().find('body').css('background-color', '#f33');
});

I have looked extensively about jQuery and iFrames, also it appears it is a a guessing game with respect to the situation. Some code works best for many people and never for other people.

Does anybody are conscious of a method to obtain the first code snippet to fireplace following the TinyMCE iframe is completely finished loading? Since it is only the WordPress content editor, the iframe submissions are on a single domain.

Things I actually want to do is give a class towards the body aspect in the iframe via .addClass()

jQuery(document).ready(function($) {
$('#content_ifr').ready(function() {
    $('#content_ifr').contents().find('body').addClass('ui-droppable');
});

to ensure that I'm able to apply the drag n' drop code within the following tutorial:

http://skfox.com/2008/11/26/jquery-example-inserting-text-with-drag-n-drop/

After more digging, it seems the issue is the means by which WordPress interacts with TinyMCE. The publish by kovshenin within the following thread shed some light about this: change textarea value doesn't work To be able to manipulate the WordPress content, I have to use the hidden textarea and never the iframe content itself.

Take a look at the tinymce configuration. All that you should so is by using the "setup"-setting and hang the onInit-Handler there. Here's a good example:

tinyMCE.init({
   ...
   setup : function(ed) {
      ed.onInit.add(function(ed, evt) {
          window.console && window.console.log('Tinymce Iframe loaded!');
          // do whatever you like here
      });
   }
});

You should use the tiny_mce_before_init hook to include a category towards the body before tinymce.init

function my_tiny_mce_before_init( $init_array ) {
    $init_array['body_class'] = 'some-class some-other-class';
    return $init_array;
}
add_filter('tiny_mce_before_init', 'my_tiny_mce_before_init');