Baru saja cari-cari snippet untuk nambahkan tombol/button khusus untuk citation atau tag “cite” di editor Tiny MCE nya WordPress. Sudah cari-cari di Google tapi ga ada yang spesifik untuk citation tapi fungsinya mirip-mirip tombol bold. Ga susah ternyata, kita modifikasi saja yang sudah ada.
Tidak perlu buat plugin khusus cukup di function.php aja juga bisa. Tapi kalo mau bikin plugin juga ga papa. Tapi dicontoh ini cukup di function.php di dalam theme.
Ada dua bagian yang perlu diperhatikan yaitu pertama, script php-nya untuk me-register tombol menggunakan filter mce_external_plugins dan mce_buttons. Buat yang belum tau, script function.php ini diletakkan di dalam folder theme.
add_action( 'init', 'tmce_buttons' );
function tmce_buttons() {
add_filter( "mce_external_plugins", "tmce_add_buttons" );
add_filter( 'mce_buttons', 'tmce_register_buttons' );
}
function tmce_add_buttons( $plugin_array ) {
$plugin_array['tmce'] = get_template_directory_uri() .'/assets/js/tinymce-custom.js';
return $plugin_array;
}
function tmce_register_buttons( $buttons ) {
array_push( $buttons, 'citation' );
return $buttons;
}Kemudian kedua, adalah file javascriptnya yang diletakkan di folder theme di dalam folder /js
(function() {
tinymce.create('tinymce.plugins.tmce', {
init : function(editor, url) {
editor.addCommand('citation', function(ui, v) {
editor.formatter.toggle("citation");
});
editor.addButton("citation", {
title : 'Citation',
cmd : 'citation',
icon: 'dashicon dashicons-format-quote',
//image : url + '/test.png',
});
editor.onNodeChange.add(function(editor, cm, n) {
active = editor.formatter.match('citation');
control = editor.controlManager.get('citation').setActive(active);
});
editor.onInit.add(function(editor, e) {
editor.formatter.register('citation',
{inline: 'cite', classes : ['citation-title'] } );
});
},
});
// Register plugin
tinymce.PluginManager.add( 'tmce', tinymce.plugins.tmce );
})();Selamat mencoba. 😀
