Live HTML Editor Without Preview Button

Selama ini Koben bermodalkan HTML editor dalam melihat hasil akhir dari sebuah rangkaian kode/script. Dengan adanya fasilitas Live HTML Editor ini mempermudah kita dalam pembelajaran. Ada 2 type yakni online & offline mode. Bila masih pusing dengan bagaimana cara pemakaiaannya, silahkan baca di mari Tata Cara Memakai Editor HTML. Banyak versi istilah yang digunakan untuk satu aplikasi ini! Ada yang memberi nama Live HTML, HTML editor, WYSIWYG dll.
Dari pada kebanyakan opening ceremony, Koben hanya mau berbagi informasi live HTML modus baru! Tanpa tombol preview seperti dahulu, secara live akan langsung terlihat perubahan yang terjadi :) Tanpa tetek-bengek (tetek = susu, bengek = nama satu penyakit) kita tidak perlu direpotkan memencet tombol preview dalam melihat hasil/result pada proses kinerja :D

Javascript berikut dapat sobat buat dalam halaman posting biasa ataupun post page! Save dengan ekstension .html jg bisa kok ;) Urusan design or gaya terserah kalian. Gue cuma berbagi bahan ramuannya saja :P

Demo on post area.

<style>
    .htmleditor {
        margin:0;
        border:0;
        padding:0;
        background:transparent;
    }
    textarea {
        width:95%;
        height:300px;
        overflow:auto;
        color:#03F;       
        font-family:'monospace', serif;
        margin:10px auto;
    }
    #iframe {
        width:95%;
        height:300px;
    }
</style>
<script type="text/javascript">
//<![CDATA[
    function writelivehtml() {
        window.frames['livehtml'].document.open();
        window.frames['livehtml'].document.write(document.htmleditor.htmltext.value);
        window.frames['livehtml'].document.close();
    }
    window.onload = function () {
        writelivehtml();
    }
//]]>
</script>
<form name="htmleditor" method="get" onsubmit="return false;" action="" class="">
<div>
<textarea rows="1" style="background-color:#f1f1f1" cols="1" oninput="writelivehtml();" onpropertychange="writelivehtml();" wrap="logical" name="htmltext" class="htmleditor">__Default_HTML__</textarea>
<iframe src="about:blank" name="livehtml" frameborder="0" allowtransparency="true" id="iframe"></iframe>
</div>
</form>

Hehehe :P Keren kan ;))
Happy coding \m/