Dynamic HTML Editor using HTML and Javascript

Home » HTML » Javascript » Dynamic HTML Editor using HTML and Javascript

Dynamic HTML Editor using HTML and Javascript

Posted by 20Fingers2Brains on Tags: HTML , Javascript

In this article we will see how to create a Dynamic HTML Editor.
This editor is created using HTML and Javascript.
I have created frames to separate the region for typing and to show the result.
We have used setTimeOut method to call a javascript method which picks whatever you write on left frame and updates on the right frame. The interval set to update the right frame is 150 milliseconds.

Code :

<html>
<head><title>Editor</title>
<script type="text/javascript">
    var structure = '<html>' +
'<head><title>Editor</title>' +
'<style type="text/css">' +
'.expand { width: 100%; height: 100%; background-color:black; color:white; font-family:comic sans ms; font-weight:bold; }' +
'.close { border: none;margin: 0px; padding: 0px; }' +
'.color{background-color:black; color:white;}' +
'html,body { overflow: hidden;}' +
'</style>' +
'</head>' +
'<body class="expand close">' +
'<form name="f" class="expand close">' +
'<textarea id="txtarea" wrap="hard" name="ta" class="expand close">' +
'</textarea>' +
'</form>' +
'</body>' +
'</html>';
    var headerText = '<html>' +
'<head><title>Header</title>' +
'<style type="text/css">' +
'#p1{font-family:comic sans ms; font-weight:bolder; font-size:30px; text-align:center; color:green}' +
'#p2{font-family:comic san ms; font-weight:bold; font-size:15px; text-align:center;color:green}' +
'</style>' +
'</head>' +
'<body bgcolor="silver">' +
'<p id="p1"><u>Dynamic Editor</u></p>' +
'<p id="p2">Edit And See</p>' +
'</body>' +
'</html>';

    var footerText = '<html>' +
'<body bgcolor="silver">' +
'</body>' +
'</html>';
    function init() {
        window.frame2.document.write(structure);
        window.frame2.document.close();
        window.frame1.document.write(headerText);
        window.frame4.document.write(footerText);
        update();
    }
    var old = "";
    function update() {
        var textarea = window.frame2.document.f.ta;
        var d = frame3.document;
        if (old != textarea.value) {
            old = textarea.value;
            d.open();
            d.write(old);
            d.close();
        }
        window.setTimeout(update, 150);
    }
</script>
</head>
<frameset rows="20%,*,20%" onload="init()">
<frame name="frame1" src="">
<frameset cols="50%,50%">
<frame name="frame2" src="">
<frame name="frame3" src="">
</frameset>
<frame name="frame4" src="">
</frameset>
</html>

The above code created a Dynamic HTML Editor. This editor gives you the dynamic feeling. The HTML code you write on left, immediately is updated on right frame. We can even write or use Javascript on this editor. This editor does not support jQuery.

1 comments:

Unknown16 July 2015 at 05:55

Nice blog Very useful information is providing by ur blog. Great beginning html tutorials Very clear and helpful for beginners.
ReplyDelete
Replies