title: Accessing WordPress's TinyMCE iFrame
body: <p>Using jQuery I'm trying to manipulate the WordPress content editor, which uses TinyMCE inside of an iframe. I can't seem to get the following code to work as intended:</p>
  
  <pre><code>jQuery(document).ready(function($) {
  $('#content_ifr').ready(function() {
      $('#content_ifr').contents().find('body').css('background-color', '#f33');
  });
  </code></pre>
  
  <p>Regardless of whether I use ".ready()" or ".load()", the event will fire before the TinyMCE editor (the body of the iframe) is completely finished loading.</p>
  
  <p>However, the following code will work if I wait for the iframe to load before manually clicking the title textbox to fire the click event:</p>
  
  <pre><code>jQuery(document).ready(function($) {
  $('#title').click(function() {
      $('#content_ifr').contents().find('body').css('background-color', '#f33');
  });
  </code></pre>
  
  <p>I've searched exhaustively on the subject of jQuery and iFrames, and it seems it's a hit or miss depending on the situation. Some code works for some people and not for others.</p>
  
  <p>Does anyone know of a way to get the first code snippet to fire after the TinyMCE iframe body is completely finished loading? Because it's just the WordPress content editor, the iframe content is on the same domain.</p>
  
  <p>What I really want to do is add a class to the body element in the iframe via .addClass()</p>
  
  <pre><code>jQuery(document).ready(function($) {
  $('#content_ifr').ready(function() {
      $('#content_ifr').contents().find('body').addClass('ui-droppable');
  });
  </code></pre>
  
  <p>so that I can apply the drag n' drop code in the following tutorial:</p>
  
  <p><a href="http://skfox.com/2008/11/26/jquery-example-inserting-text-with-drag-n-drop/" rel="nofollow">http://skfox.com/2008/11/26/jquery-example-inserting-text-with-drag-n-drop/</a></p>