I'm developing a pure JavaScript WYSIWYG editor for my own Content Management System (CMS). What I need this to do is sync the source code in the IFRAME with the content of a TEXTAREA element, so I can toggle source code view, and the rich text editing back and forth. I've got some code together, it syncs the data, however I can only change the content in the rich text editor (IFRAME), and not the source editor (TEXTAREA). The purpose of this is to submit the data via POST form to the server as I don't know how else I could do it. I do not want to use jQuery either. I am not the "JavaScript expert". Anyways here is the section of my code:

```
<iframe id="editor" frameborder="0"></iframe>
<textarea id="html" onchange="document.getElementById('editor').contentWindow.document.body.innerHTML=this.value;"></textarea>
<script>
var e = document.getElementById("editor").contentWindow;
e.document.designMode = "on";
e.document.open();
e.document.write("<head><style>body{font-family:arial,helvetica,sans-serif;}</style></head>");
e.document.close();

function def() {
   document.getElementById("fontName").selectedIndex = 0;
   document.getElementById("fontSize").selectedIndex = 1;
   document.getElementById("foreColor").selectedIndex = 0;
}

function edit(x, y) {
   e.document.execCommand(x, false, y);
   e.focus();
}

setInterval(function() {
    document.getElementById("html").value = e.document.body.innerHTML;
}, 200);
</script>

```