Membuat Rich Text Editor :)

Mungkin udah ada yang tau cara buatnya :) … Tapi disini aku akan cerita tentang cara membuat WYSIWYG Editor / Rich Text Editor menggunakan HTML+Javascript yang sangat-sangat simple, bukan seperti TinyMCE, :D , jadi mohon dimaklumi, hahaha…

Yang harus dimengerti terlebih dahulu adalah HTML, CSS, JavaScript+DOM * pasti! *

Pada dasarnya, web browser yang umum dipakai (Mozilla,KHTML,MSIE,Opera) punya fitur designMode, apa itu “designMode”?? coba aja copy paste code berikut ke address bar kamu:

javascript: document.designMode = 'on'; void 0;

atau untuk MSIE:

javascript: document.designMode = 'on'; document.body.contentEditable = 'true'; void 0;

Apa yang terjadi? Halaman web yang kamu buka bisa kamu edit/deface kan? =)
Itu contoh kalau designMode digunakan untuk keseluruhan document. Gimana kalau untuk sebuah elemen * contohnya untuk WYSIWYG Editor *? Caranya, bisa pakai tag “<iframe>“. Frame gunanya untuk menyelipkan halaman lain ke sebuah halaman. Trik menggunakan iframe untuk WYSIWYG editor dipakai sama banyak editor seperti tinyMCE, Midas, dll. Tapi aku pernah ketemu dengan editor yang gak pake iframe, di tryruby.hobix.com. * penasaran *

Lanjut ke pembuatan editor,
Pertama-tama, buat dulu sebuah frame dengan iframe,

<iframe id="editKu" name="editKu"></iframe>

Lanjut dengan membuat script di bawahnya,

<script>
* variabel editKu sebagai penunjuk frame editKu */
editKu = document.getElementById("editKu").contentWindow;

function editKu_init () {
  /* buat frame editKu menjadi designMode, cara pakenya sama seperti document.designMode */
  editKu.document.designMode = 'on';

  /* di set dulu style untuk framenya */
  editKu.document.open ();
  editKu.document.write ('<head><style>body { font-family: Sans-serif; }</style></head>');
  editKu.document.close ();

  /* fokus ke editKu */
  editKu.focus ();
}

/* jalankan editKu! */
editKu_init ();
</script>

Di-save lalu buka. Coba lihat iframe yang dibuat, isinya bisa diedit kan? Kalau sudah bisa, berarti bener :D

Lanjuut,, kasih fungsi untuk ngasih efek Bold, Italic, dsb…
Tambah kode fungsi di bawah ini, tepatnya di bawah fungsi editKu_init,

function command (cmd) {
  /* document.execCommand (perintah, DefaultUI *false aja*, value); */
  editKu.document.execCommand (cmd, false, null);

  /* fokus ke editKu */
  editKu.focus ();
}

contoh cara pakai fungsi ini: command (‘bold’) * untuk ngasih efek bold *
Biar pakenya tinggal klik, buat buttonnya,

<input type="button" onclick="command('bold')" value="Bold"/>

Bisa juga pake,

<img src="gambar" onclick="command('bold')" />

Sekarang, tinggal buat botton command lainnnya, * italic, underline, dsb *

Itu aja yang bisa aku ceritain :D .

Referensi yang bisa dipake untuk buat WYSIWYG Editor, salah satunya di Mozilla Developer Center. :D
Contoh simple WYSIWYG Editor yang aku buat ada di sini,, :D

Ada komentar / kritik / tambahan / pertanyaan, silakan post komen di sini :)

Tulisan ini dikirim pada pada Sabtu, Mei 24th, 2008 11:21 pm dan di isikan dibawah Computer, Web Design, Web Trick. Anda dapat meneruskan melihat respon dari tulisan ini melalui RSS 2.0 feed. r Anda dapat merespon, or trackback dari website anda.

4 Tanggapan ke “Membuat Rich Text Editor :)”

  1. Muhammad Zulfikar Berkata:
    Mei 25, 2008 pukul 1:26 am

    thanks noph, inponya……hhe
    siap dicoba….

  2. t4rum4 Berkata:
    Juni 20, 2008 pukul 6:34 pm

    Wahhh.. ebat.. dah bisa buat kayak beginian.. Te OO Pe Dah. :)

  3. zikri Berkata:
    Mei 25, 2009 pukul 1:15 am

    klo fungsi Ctrl+f apa code nya??..kirim kemail juga yaa..

  4. ekoisa Berkata:
    Agustus 24, 2009 pukul 1:54 pm

    Wah bro, tulisanmu bermanfaat banget nih….
    Gw mulai dapet pencerahan lagi…
    Saat ini gw lagi nyoba buat HTML editor… yang bisa dipake di ajax.
    Thx ya bro

Tinggalkan Balasan