Question

I’m making my own WYSIWYG. I’ve got two buttons: “Visualize” and Show Source.

I’ve got an iframe (rich text editor) that contains a huge piece of HTML code. First time it’s loaded it shows all the elements visually. Once Show Source is pressed the innerHTML text (of the visualized html) is shown. But how can I make the HTML text visual again, when the Visualize button is pressed?

content.document.body.innerText holds the HTML that needs to be visualized.
(content = id of the iframe)

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

Answer 1

If you’re using an iframe and that iframe is only intended to hold the actual page source being edited, then you’re going to need variables on your parent frame that hold the actual source. I would recommend keeping it separate and then use the following to perform 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 imagine that you have methods that are capturing the source, but I would imagine you’d want to capture the actual source as it is at that moment. I’m not sure what you’re doing with the actual editing piece (is it a div that is editable? is it a text area?), but in order to perform the showing, it should just be a matter of toggling the innerHTML and innerText between the two settings. The real catch will be monitoring the actual controls affected by this change.