Make HTML visible inside an iframe

Question

I make my own WYSIWYG. I have two buttons: Visualize and Show Source.

I have an iframe (rich text editor) that contains a huge chunk of HTML code. The first time it loads, it visually displays all the elements. After clicking the "Show Source" button, the text innerHTML (rendered html) is displayed. But how can I render HTML text again when the Render button is clicked?

content.document.body.innerText contains the HTML that you need to render. (content = id iframe)

 $('#Visualize').click(function() { // Make HTML visible }); 

Answer 1

If you use an iframe and that the iframe is only intended to store the actual source of the page that is being edited, then you will need variables on the parent frame that contain the actual source. I would recommend saving it separately, and then using the following to execute the switches:

 var actualSource = content.document.body.innerHTML; // just something to initialize it // You should probably keep it in a global object instead of as a var $('#Visualize').click(function() { actualSource = content.document.body.innerText; content.document.body.innerHTML = ""; content.document.body.innerHTML= actualSource; }); 

I would suggest that you have methods that capture the source, but I would suggest that you want to capture the actual source as it is at that moment. I'm not sure what you are doing with the actual part of the editing (is this an editable div, is it a text area?), But in order to run the show, you just need to switch to innerHTML and innerText between the two settings. The actual catch will control the actual controls affected by this change.

Answer 2

With the html code that you already have, and to show the preview in a div, fix it? Just use html .

 $('#Visualize').click(function(){ $('#myShowDiv').html(content.document.body.innerText); });