Insert HTML into iframe

Question

Hey Guys,

I am creating a in browser HTML editor. I am using the syntax highlighter called Code Mirror which is very good.

My setup is an iframe that holds a view of the page which is being edited and a textarea which the plain text HTML sits which the user edits.

I am trying to insert the edited HTML from the textarea into the iframe which displays they rendered HTML.

Is this possible? I have tried the following:

HTML setup:

<iframe id="render">

</iframe>

<textarea id="code">
HTML WILL BE 

HERE
</textarea>
<input type="submit" id="edit_button" value="Edit" />

JQuery Setup:

$('#edit_button').click(function(){
    var code = editor.getCode(); // editor.getCode() is a codemirror function which gets the HTML from the text area
    var iframe = $('#render');
    iframe.html(code)
})

This does not seem to load the HTML into the iframe, is there a special method to insert HTML into a iframe or is this not possible?

Cheers

Eef

Answer 1

try

iframe[0].documentElement.innerHTML = code;

Assuming that the url to the iframe is from the same domain as the webpage.

Answer 2

Set the

document.designMode

property and then try adding the HMTL

Read

Rich-Text Editing in Mozilla

also