inject into iframe from wysihtml5 text area

Question

I've turned a simple text box into one with editing features using the wysihtml5 editor. The project necessitates that the text box inject its html into an iframe. Previous to installing the editor, things were working great. Now, the jQuery for the iframe injection no longer works, since the editor has converted the textarea to an iframe. Any ideas on how I might convert the following jQuery to work with the editor?

    (function() {

    var frame = $('iframe#preview'),
        contents = frame.contents(),
        body = contents.find('body'),
        styleTag = contents
                   .find('head')
                   .append('<style>*{font-family:arial}h2{color:#CC6600}</style>')
                   .children('style');

    $('textarea').focus(function() {
      var $this = $(this);

    $this.keyup(function() {
      body.html( $this.val() );
    });
  });
})();

I know that something needs to change in the $('textarea').focus call, I just don't know what. I'm new to the javascript/jQuery world and have tried a few possibilities, but so far haven't been able to figure this one out.

Many thanks for any insight.

Answer 1

As i know (probably i know what im talking), you cannot apply css styling to iframes outside of iframe (from parent document). You should TRY to embed styling inside iframe. Its because browser styling works with document, but iframe its another document and must ship with own css styling. Hope this helps