◄ Min  Size Fonts: + | - | ± Color: Max ►

Live HTML Editor Without Preview Button

Live HTML EditorSelama 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/
Loading...
XLive HTML Editor Without Preview Button
Live HTML editor tanpa tombol preview dalam melihat hasil akhir
Subscribe my posts Register For Free!
[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...


MISC

Resources

WANT BE HERE!!! CONTACT ME :P

FACEBOOK PAGE