TinyMCE Plugin WordPress

WYSIWYG, tentunya sudah sering kita dengar istilah ini, merupakan kepanjangan dari What You See Is What You Get. Kalau dari perspektif user ini berarti kemudahan membuat, mengubah atau menghapus layout atau konten sebuah dokumen dimana user tinggal klik dan drag maka usermendapatkan apa yang diinginkan. Istilah ini erat kaitannya dengan editor HTML yang akan kita bahas berikut ini. Dalam artikel ini, saya akan tunjukkan bagaimana tinyMCE bekerja pada sebuah CMS yang banyak dipakai saat ini yaitu CMS WordPress.

TinyMCE pada WordPress

(TinyMCE Plugin WordPress) Salah satu keunggulan WordPress adalah kemudahan dalam mengedit sebuah konten di halaman backend yang dia miliki. Ini tidak terlepas dari editor HTML yang dia pakai yaitu TinyMCE. Editor HTML ini merupakan proyek open source dari Moxiecode Systems AB dengan lisensi LGPL. Satu fitur yang membuatnya sangat disukai adalah dukungan kustomisasi yang sangat luas. Mulai dari menambah dan mengurangi fitur sampai pada pembuatan plugin atau theme untuk jenis editor ini.

Tidak semua plugin yang dimiliki TinyMCE diimplementasikan dalam core WordPress. Hanya 7 plugin bawaan editor yang dipakai oleh wordpress diantaranya adalah directionality, fullscreen, inlinepopups, media, paste, spellchecker, tabfocus. Selain itu ada beberapa plugin editor yang WordPress custom sendiri yaitu wordpress, wpdialogs, wpeditimage, wpfullscreen, wpgallery, wplink.

[caption id="attachment_353" align="aligncenter" width="299"] tinymce-whendy-blog[/caption]

Mengaktifkan hidden button

Dalam implementasinya semua button edit tidak ditampilkan oleh WordPress. Button-button edit seperti hr (horizontal rule), sub (subscript)dan sup (superscript) sudah ada dalam TinyMCE-nya WordPress tapi hanya memang tidak diaktifkan oleh WordPress. Source code dibawah ini merupakan cara kita mengaktifkan button-button itu.

function my_mce_buttons($buttons) {
/**
* Add in a core button that's disabled by default
*/
$buttons[] = 'sup';
$buttons[] = 'sub';
return $buttons;
}
add_filter('mce_buttons', 'my_mce_buttons');

Untuk mengaktifkan button-button yang ter-hidden, dapat dilakukan dengan cara menambahkan value button pada sebuah array yang kita filterpada hook mce_buttons. Pada contoh, saya menambahkan button superscript dan subscript yang saya tampilkan pada baris pertama editor wordpress(mce_buttons). Selain mce_button, core WordPress juga menyediakan filter hook mce_button_2, mce_button_3, dan mce_button_4untuk memposisikan button pada baris 2,3 dan 4 editor. Berikut adalah list button yang saya dapat dari dokumentasinya TinyMCE tentang buttoncontrol:

bold, italic, underline, strikethrough, justifyleft, justifycenter, justifyright, justifyfull, bullist, numlist, outdent, indent, cut, copy, paste, undo, redo, link, unlink, image, cleanup, help, code, hr, removeformat, formatselect, fontselect, fontsizeselect, styleselect, sub, sup, forecolor, backcolor, forecolorpicker, backcolorpicker, charmap, visualaid, anchor, newdocument, blockquote, separator ( | is possible as separator, too)

Menambahkan TinyMCE Table pada WordPress Editor

Pembuatan tabel konten WordPress sering kali menyulitkan user yang belum mengerti struktur HTML. Tidak ada button pada editor WordPress yang dapat memudahkan user dalam membuat struktur tabel pada konten post WordPress. Mau tidak mau untuk membuat struktur tabel, user harus mengerjakannya secara manual dengan menulis kode-kode HTML pada tab “HTML”.

Ada dua solusi yang biasanya dilakukan developer untuk memudahkan user membuat struktur tabel, diantaranya adalah membuat shortcodewordpress untuk generate table konten atau menambahkan plugin table yang sudah dimiliki oleh tinyMCE. Saya kira untuk masalah ini, solusi kedua adalah yang paling bisa digunakan oleh user awam.

Pada subbab ini, Saya akan mencoba menerangkan bagaimana caranya kita menambahkan plugin table tinyMCE pada editor WordPress.

1. Download versi terbaru tinyMCE. Pada saat artikel ini ditulis, versi terakhir tinyMCE adalah 3.5.7. TinyMCE bisa kita dapatkan pada link ini.

2. Semua plugin tinyMCE akan terletak pada folder tinymce/jscripts/tiny_mce/plugins/. Seperti yang tampak pada gambar berikut ini.

[caption id="attachment_354" align="aligncenter" width="550"] tinymce-whendy-blog[/caption]

Copas folder table pada plugin atau theme WordPress yang akan Anda buat, dalam contoh saya akan meletakkan table folder pada theme saya sendiri yang terletak pada /gootheme/feature/editor/table

[caption id="attachment_355" align="aligncenter" width="222"] tinymce-whendy-blog[/caption]

3. Kemudian pada function.php theme, tambahkan source code berikut untuk menampilkan beberapa button table dan load plugin table.

add_action('admin_init', 'custom_mce');
function custom_mce() {
  if (current_user_can('edit_posts') && current_user_can('edit_pages')) {
    add_filter('tiny_mce_before_init', 'custom_mce_before_init');
    add_filter('mce_buttons_3', 'custom_mce_button_3');
    add_filter('mce_external_plugins', 'custom_mce_plugin');
  }
}

function custom_mce_before_init($inits) {
   $inits['url_theme'] = THEME_URI;
   return $inits;
}
/**
* Add in a table button
*/

function custom_mce_button_3($buttons) {
    array_push($buttons, '|', "table");
    array_push($buttons, '|', "delete_table");
    array_push($buttons, '|', "delete_col");
    array_push($buttons, '|', "delete_row");
    array_push($buttons, '|', "col_after");
    array_push($buttons, '|', "col_before");
    array_push($buttons, '|', "row_after");
    array_push($buttons, '|', "row_before");
    array_push($buttons, '|', "row_props");
    array_push($buttons, '|', "cell_props");
    array_push($buttons, '|', "split_cells");
    array_push($buttons, '|', "merge_cells");

    return $buttons;
}

/**
* Load table file plugin
*/

function custom_mce_plugin($plugins) {
   $plugins["table"] = THEME_URI . '/features/editor/table/editor_plugin.js';
   return $plugins;
}

Ada tiga filter hook MCE yang setidaknya saya gunakan pada source code diatas. Pertama adalah filter tiny_mce_before_init yang akan melewatkan parameter kita pada core plugin editor yang kita buat. Kedua adalah filter mce_buttons_3 yang akan menambahkan beberapabutton plugin editor. Terakhir filter mce_external_plugins yang akan me-load file plugin, dalam contoh adalah editor_plugin.js yang dimilikitable plugin TinyMCE.

[caption id="attachment_356" align="aligncenter" width="550"] tinymce-whendy-blog[/caption]

Ada dua tips yang Saya berikan pada artikel diatas yaitu mengaktifkan button-button yang di hidden Wordpress dan menambahkan plugin editor tinyMCE. Ada satu artikel lagi yang ingin Saya share pada para pembaca setia BisaKomputer, yaitu cara membuat plugin TinyMCE sendiri pada editor WordPress. Menurut Saya dengan menguasai beberapa tips custom editor TinyMCE pada WordPress yang saya sebutkan diatas, kita dapat meng-custom atau bahkan menciptakan sendiri lingkungan editing yang mungkin akan menambah nilai jual pada themes WordPress.