Integrasi TinyMce dengan CodeIgniter

Dalam pengaturan tulisan yang akan dipos, perlu sebuah editor teks WYSIWYG (What You See Is What You Get).TinyMCE, merupakan salah satu open source JavaScript editor teks. Dengan editor ini, para blogger akan lebih mudah mengatur layout tulisan yang akan disimpan.

Integrasi TinyMCE dengan CI yang mempunyai konsep MVC dapat dilakukan dengan cara sebagai berikut :

1)       Definisikan variabel tinyMCE pada konstruktor controller halaman yang akan diintegrasi dengan TinyMCE. Pastikan path TinyMCE sudah benar.

class Myprofile extends Controller{ function Myprofile(){ parent::Controller(); $this-> tinyMce = ' <!-- TinyMCE --> <script src="'. base_url().'../js/tiny_mce/tiny_mce.js"></script> <script type="text/javascript"> tinyMCE.init({ mode : "textareas", theme : "simple" });</script > <!-- /TinyMCE --> '; . . . }

2)       Cetak variabel di atas pada view halaman yang di dalamnya terdapat textarea.

<?= $this-> tinyMce; ?>

Selain theme simple, kita juga dapat menampilkan TinyMce dalam versi “advance” yang tampilannya mirip seperti Ms. Word.

Berikut contoh hasil textarea yang berubah menjadi editor simple TinyMCE:

tiny_simple_version

Advertisements

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!!