Sabtu, 13 April 2013

HTML EDITOR Sederhana


HTML EDITOR SEDERHANA

HTML EDITOR ? aku gak pernah kepikiran bisa membuat itu namun setelah dilihat-lihat kok aku jadi penasaran gimana cara buatnya, berawal dari membuat Penghitung Karakter Teks saya dari situ berfikir, kan setiap kode yang di tuliskan itu melalui textarea Gimana caranya agar setiap orang mengetik di dalam textarea itu kodenya langsung jadi HTML..? akhirnya kepikiran properti javascript innerHTML innerHTML kan artinya masukan HTML jadi dari situ muncul idenya. aku menulis kodenya seperti ini

function jadiHTML(){
var a = document.getElementById("x");
var b = document.getElementById("cc").value;
b     = a.innerHTML = b;
}

#x {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 50%;
background: #fff;
color: #111;
overflow: auto;
padding: 5px
}
#y {
position: absolute;
top: 0;
right: 50%;
bottom: 0;
left: 0;
}
#y > textarea{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #eee;
border: 0;
}

<div id='y'><textarea id='cc' onkeyup='jadiHTML()' spellcheck='false' placeholder='tulis html disini'></textarea></div>
<div id='x'></div>

Atau langsung aja simpan kode dibawah ini dengan ekstensi .html

<script>
function jadiHTML(){
var a = document.getElementById("x");
var b = document.getElementById("cc").value;
b     = a.innerHTML = b;
}
</script>

<style>
#x {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 50%;
background: #fff;
color: #111;
overflow: auto;
padding: 5px
}
#y {
position: absolute;
top: 0;
right: 50%;
bottom: 0;
left: 0;
}
#y > textarea{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #eee;
border: 0;
}
</style>

<div id='y'><textarea id='cc' onkeyup='jadiHTML()' spellcheck='false' placeholder='tulis html disini'></textarea></div>
<div id='x'></div>

Buat sobat semuanya kalau ada kesalahan-kesalahan mohon koreksinya karena saya baru belajar tentang JS