Home > Web > WYSIWYG Web Based Editor

WYSIWYG Web Based Editor

WYSIWYG (What You See Is What You Get) Web Based Editor merupakan editor yang sering digunakan di banyak blog engine atau CMS (Content Management System) dalam dunia web development. kenapa dikasih nama WYSIWYG? ya karena emang sesuai sama artinya: “Apa yang kau lihat adalah apa yang kau dapatkan”. Artinya dengan menggunakan editor ini kita bisa sesuka hati mengedit kontent / isi kita layaknya ketika mengetik di aplikasi Office. Pengertian dari WYSIWYG ada disini.

“Kita bisa memasukkan gambar, mengedit style, size dari font, menambahkan hyperlink, dan bahkan bisa menambahkan tabel.”

Kali ini saya akan mereview penggunaan dari salah satu WYSIWYG Editor ini yang berbasis Javascript. Kelak ketika suatu saat kita harus membuat web yang didalamnya disertai dengan Content Management System, kita sudah tau kemana harus mencari Editor pengganti textarea ini. Namanya adalah TinyMce. Salah satu blog engine yang menggunakan plugin Editor ini adalah wordpress.com (kebetulan engine blog saya ini juga menggunakan wordpress). TinyMce merupakan software gratis (opensource). kita bisa mendownloadnya disini. (versi yg saya coba adalah versi 2.1.0 Berikut adalah cara penggunaannya:

  1. Ekstrak tinymce_2_1_0.zip yang sudah selesai didownload.
  2. Hasil Ekstrak akan menghasilkan folder tinymce dengan subfolder docs,examples,jscripts.
  3. Contoh dari penggunaan TinyMce ini ada di folder examples/example_advanced.htm
  4. File library javascript yang digunakan ada di dalam folder jscripts yaitu: jscripts/tiny_mce/tiny_mce.js

Untuk mengedit tipe dari editor yang digunakan dapat dengan melihat contoh2 yang ada di folder examples, kemudian lihat sourcenya.

Selamat Mencoba…

About these ads
Categories: Web
  1. agustami
    October 15, 2007 at 3:53 pm | #1

    nanya nih.boleh kaaannn.. gw udah nyoba lakukan sperti perintah tapi nga jalan..apa ya kira22 yang salah pengkodean.??? hasilnya toolbar g kelihatan…

    Tiny Test

    tinyMCE.init({
    mode : “textareas”
    });

    ini akan tampil

  2. December 27, 2007 at 1:53 pm | #2

    Saya bingung mengedi TinyMCE sehingga bisa simple seperti di wordpress

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: