Wysiwyg: Client-side editors

Dalam blog ini, saya pernah memposting dua tulisan yang berkaitan dengan dua modules, dimana dua modules tersebut berfungsi untuk memudahkan ketika akan mengelola dokumen seperti ketika kita akan mempublish sebuah tulisan layaknya mengetik di microsoft word atau open office, singkatnya dua modules tersebut adalah perangkat pendukung web-based HTML editor atau yang sering di sebut sebagai WYSIWYG (What-You-See-Is-What-You-Get).

Dua modules yang pernah diposting tersebut adalah Fckeditor dan Whizzywig. Kini selain dua modules tersebut, anda dapat mencoba modules yang lainya dengan fungsi yang sama seperti:

• Ckeditor (Download)
• jWYSIWYG (Download)
• markitUP (Download)
• NiceEdit (Download)
• openWYSIWYG (Download)
• TinyMCE (Download)
• WYMeditor (Download)
  
• YUIEditor (Download)

Dari semua modules tersebut, anda hanya tinggal memilih modules mana yang paling cocok anda manfaatkan. Namun, sebenarnya semua modules tersebut bisa anda gunakan secara berganti-ganti dengan cepat namun dengan catatan penginstalan modules tersebut berbeda seperti biasanya. Misalnya untuk menginstal modules biasanya kita membuat folder baru di sites/all/modules. Kini, apabila anda memanfaatkan modules tersebut secara bergantian maka anda harus membuat folder baru di sites/all/libraries dan anda harus memanfaatkan modules tambahan yaitu Wysiwyg yang di sebut sebagai modules client-side editor. Untuk modules tambahan Wysiwyg tetap di ekstrak di folder modules (site/all/modules) sedangkan untuk semua modules diatas di ekstrak di folder libraries (site/all/libraries). Agar lebih mudah berikut ilustrasi penginstalannya:

1. Buat folder baru pada direktori drupal di sites/all/libraries
2. Download mosules Wysiwyg, klik di alamat sini. Ekstrak modules tersebut di folder modules (site/all/modules).
3. Klik Administer/site building/modules. Cari User Interface, lalu Centang kotak enabled Wysiwyg (lihat gambar 1). Kemudian klik Save Configuration



Gambar 1. Centang kotak enabled


4. Download lagi semua modules-modules yang anda inginkan, misalnya semua modules yang telah disebutkan diatas kemudian ekstrak di folder libraries (sites/all/libraries/).
5. Login ke account drupal anda, lalu lihat di Administer/Site Confguration/wysiwyg
6. Kini anda tinggal mensetting pada INPUT FORMAT dan EDITOR-nya (lihat gambar 2 dibawah ini). Tanda contreng hijau menandakan modules sudah terinstal.
   
   
   
   Gambar 2. Setting Wysiwyg
   
   
7. Filtered HTML berfungsi untuk tampilan para user / pengunjung misalnya pada kolom komentar, sehingga ketika para user akan memberikan komentar, maka tidak difasilitasi dengan icon-icon untuk mengetik seperti di microsoft word atau open office.
8. Full HTML berfungsi untuk anda ketika akan memposting/ mempublish tulisan dengan fasilitas seperti di microsoft office atau open office.
9. Sebagai contoh, misalnya pada Filtered HTML anda kosongkan dan pada FULL HTML anda pilih CKEditor. Lalu klik Save, maka untuk melihat hasilnya, anda dapat mencoba memposting sebuah tulisan (create content / page), lalu pada input format pilih FUll HTML. Hasilnya lihat pada gambar 4 dan 5.
10. Apabila anda ingin menggantinya dengan modules lain, anda hanya tinggal meremove pada INPUT FORMAT dan EDITOR-nya, lalu anda tinggal memilih kembali mana yang modules yang akan dimanfaatkan dan seperti biasa jangan lupa klik Save.
11. Dari semua modules tersebut, diantaranya yang paling lengkap fiturnya adalah CKEditor.
    
    
    

Gambar 3. Klik Save

Gambar 4. Tampilan CKEditor pada Create Page

Gambar 5. Tampilan untuk user pada kolom komentar

Continue reading...