Membuat HTML Editor dengan Javascript
Kita juga bisa membuat HTML Editor, walaupun sederhana tetapi sangat membantu bagi para pemula yang ingin mempelajari HTML. Untuk membuat HTML Editor ini sangat mudah, hanya diperlukan sebaris Javascript untuk membuatnya, berikut langkah-langkah pembuatannya
1) Jalankan Web Editor yang biasa Anda pakai, seperti Adobe Dreamweaver atau Microsoft Frontpage.
2) Salin kode di bawah ini
=========================================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>HTML Editor</title>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
width:147px;
height:130px;
z-index:1;
overflow:auto;
left: 18px;
top: 209px;
}
-->
</style>
</head>
<body>
<script language="javascript">
function pasang(){
document.getElementById('hasil').innerHTML=document.getElementById('tulis').value;
}
</script>
<div id="hasil" style="width:1300px; height:500px; overflow:scroll;">Preview Hasil Kodingan </div>
<p> </p>
<p align="center">
<textarea name="tulis" cols="150" rows="5" id="tulis"></textarea>
</p>
<p>
<input type="submit" name="Submit" value="Submit" onclick="pasang()" />
</p>
<p> </p>
</body>
</html>
=====================================================
3) Simpan File tersebut lalu jalankan di browser Anda
4) Anda akan melihat sebuah textarea yang besar, kotak itu adalah tempat Anda menulis script, lalu di bawahnya ada tombol Submit, klik tombol itu untuk melihat hasil kodingan Anda.
Sebuah HTML Editor sederhana tetapi sangat membantu berhasil dibuat ^_^
Jika ingin membahas artikel ini, silahkan isi kotak komentar yang berada di bawah artikel ini ^_^
1) Jalankan Web Editor yang biasa Anda pakai, seperti Adobe Dreamweaver atau Microsoft Frontpage.
2) Salin kode di bawah ini
=========================================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>HTML Editor</title>
<style type="text/css">
<!--
#Layer1 {
position:absolute;
width:147px;
height:130px;
z-index:1;
overflow:auto;
left: 18px;
top: 209px;
}
-->
</style>
</head>
<body>
<script language="javascript">
function pasang(){
document.getElementById('hasil').innerHTML=document.getElementById('tulis').value;
}
</script>
<div id="hasil" style="width:1300px; height:500px; overflow:scroll;">Preview Hasil Kodingan </div>
<p> </p>
<p align="center">
<textarea name="tulis" cols="150" rows="5" id="tulis"></textarea>
</p>
<p>
<input type="submit" name="Submit" value="Submit" onclick="pasang()" />
</p>
<p> </p>
</body>
</html>
=====================================================
3) Simpan File tersebut lalu jalankan di browser Anda
4) Anda akan melihat sebuah textarea yang besar, kotak itu adalah tempat Anda menulis script, lalu di bawahnya ada tombol Submit, klik tombol itu untuk melihat hasil kodingan Anda.
Sebuah HTML Editor sederhana tetapi sangat membantu berhasil dibuat ^_^
Jika ingin membahas artikel ini, silahkan isi kotak komentar yang berada di bawah artikel ini ^_^
thanks ya!!!!
BalasHapusnanti aku coba scriptnya, mudah2an membantu....
@Hadi : Iya silahkan ^_^
BalasHapusoya bagaimana ya cara membuat editor web yang lengkap seperti bold, italic, underline, pilihan font dan size nya
BalasHapuswah makasih banyak masta, cocok sekali buat para pemula seperti saya
BalasHapus@Ghazali: Gunakan Tinymce
BalasHapus@ahmed: Okeh bro :)
makasih infonya.
BalasHapusada gak kode script dari html editor ini?
maksudnya biar bisa di taruh di postingan atau jadi gadget