Pages

Minggu, 01 Januari 2012

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>&nbsp;</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>&nbsp;</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 ^_^

6 komentar:

  1. thanks ya!!!!
    nanti aku coba scriptnya, mudah2an membantu....

    BalasHapus
  2. oya bagaimana ya cara membuat editor web yang lengkap seperti bold, italic, underline, pilihan font dan size nya

    BalasHapus
  3. wah makasih banyak masta, cocok sekali buat para pemula seperti saya

    BalasHapus
  4. @Ghazali: Gunakan Tinymce

    @ahmed: Okeh bro :)

    BalasHapus
  5. makasih infonya.
    ada gak kode script dari html editor ini?
    maksudnya biar bisa di taruh di postingan atau jadi gadget

    BalasHapus

Catatan: Hanya anggota dari blog ini yang dapat mengirim komentar.