Sync iFrame Source Code with textarea element

1
votes

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>
2
javascripthtml

2 Answers

2
votes

Figured it out, hope this helps others ;)

<iframe id="editor" frameborder="0">test</iframe>
<textarea id="html" onfocus="editor.rte();" onblur="editor.source();"></textarea>
<script>
<!--
//<![CDATA[
var editor = function() {
    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();
    var a, b;
    return {
        run:function(c, s) {
            e.document.execCommand(c, false, s);
        },
        source:function() {
            clearInterval(b);
            a = setInterval(function(){document.getElementById("html").value = e.document.body.innerHTML;}, 200);
        },
        rte:function() {
            clearInterval(a);
            b = setInterval(function(){e.document.body.innerHTML = document.getElementById("html").value;}, 200);
        }
    };
}();
editor.source();
//]]>
-->
</script>
0
votes

@solo

that code is bad, try to typing <input> inside textarea. You cannot type on it because the interval. So, my tips is, only run the code then user finish typing. Like..

var timer = null;
$('textarea').keydown(function(){
   clearTimeout(timer); 
   timer = setTimeout(doStuff, 300)
});

function doStuff() {
   e.document.body.innerHTML = document.getElementById("html").value;
}

Sorry for my bad english