Menambah Emotion pada TinyMce

emotion_at_tiny_image

emotion_at_tiny_image

Para web developer sekarang, tentu sudah tidak asing lagi sama TinyMce. TinyMce merupakan  salah satu open source WYSISYG (What You See Is What You Get) editor.  Dengan editor ini pada web, pengunjung web bisa mengetik tulisan dan mengeditnya seperti pada Ms. Word. TinyMce diterapkan pada tag textarea (<textarea >) pada HTML. Dengan sedikit konfigurasi khusus dengan settingan web kamu, maka textarea otomatis bisa berubah jadi text editor sederhana.

Yang penulis mau share kali ini yaitu gimana caranya nambah emotion di toolbar TinyMce versi 3.2.1.1 (advance theme). Secara default, di  theme ini cuman ada16 emotion. 

Nah, dengan cara berikut ini, kamu bisa nambah bahkan kasih style emotion kamu sendiri ke dalam TinyMce yang diterapin di web kamu.

  1. Masuk ke folder \tiny_mce\plugins\emotions\img. Di sinilah folder gambar disimpan. Paste gambar” yang akan ditambah ke sini. Misal ini gambar yang maw ditambahkan.
    example emotion files

    example emotion files

  2. Buka file \tiny_mce\plugins\emotions\langs\en_dlg.js. Tambahkan baris berikut di antara kurung kurawal ‘{}’ : 
    happy:"Happy", bearing:"Bearing", coldsweats:"Coldsweats", confident:"Confident" 

     

  3. Lalu buka file \tiny_mce\plugins\emotions\emotions.htm. Di dalam tag table, tambah 1 baris 4 kolom yang akan diisi dengan gambar yang baru. Copy 1 set <tr>(dari <tr> sampe </tr>), lalu paste dan edit sesuai dengan konfigurasi yang sudah kita lakukan di atas :
    <tr> <td><a href="javascript:EmotionsDialog.insert('bearing.gif','emotions_dlg.bearing');"><img src="img/bearing.gif" width="18" height="18" border="0" alt="{#emotions_dlg.bearing}" title="{#emotions_dlg.bearing}" /></a></td>    <td><a href="javascript:EmotionsDialog.insert('coldsweats.gif','emotions_dlg.coldsweats');"><img src="img/coldsweats.gif" width="18" height="18" border="0" alt="{#emotions_dlg.coldsweats}" title="{#emotions_dlg.coldsweats}" /></a></td> <td><a href="javascript:EmotionsDialog.insert('confident.gif','emotions_dlg.confident');"><img src="img/confident.gif" width="18" height="18" border="0" alt="{#emotions_dlg.confident}" title="{#emotions_dlg.confident}" /></a></td> <td><a href="javascript:EmotionsDialog.insert('happy.gif','emotions_dlg.happy');"><img src="img/happy.gif" width="18" height="18" border="0" alt="{#emotions_dlg.happy}" title="{#emotions_dlg.happy}" /></a></td> </tr>
  4. Tadaaa…. Emotions pun nambah, jadi seperti ini deh :
    emo2

    Hasil tambahan emotion

  5. Sekarang, kita sudah bisa menyertakan smiley itu di tulisan yang akan diposting :

Gampang kan??? ^^  Selamat mencoba!!

2 thoughts on “Menambah Emotion pada TinyMce

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