Menambahkan Custom Button Pada Tinymce Wp

Membuat Atau Menambahkan Custom Button Pada Tinymce Editor WordPress

Masyhuri Jamil 27/02/2019 3211x 0

30menit – Menambahkan Custom Button Embed Youtube Pada Tinymce Editor WordPress.

Tutorial berikut merupakan lanjutan dari tutorial membuat custom button “page break” di halaman sebelumnya. Silakan buka folder template (tema) btpm. Kemudian buka folder “inc” dan buka kembali file “wp_add_button_editor.php” pada text editor. Tambahkan fungsi php custom button baru untuk youtube ke dalam file “wp_add_button_editor.php”

function btpm_tinymce_yt(){ ?>
	<script type="text/javascript">
		jQuery(document).ready(function($){
			tinymce.create('tinymce.plugins.BTPMYouTube', {
				init : function(ed) {
					ed.addButton('youtube', {
						title : '<?php echo __('Insert Video Youtube', 'btpm'); ?>',
						image : '<?php echo get_template_directory_uri(); ?>/images/youtube.svg',
						onclick : function() {
							var startFr = '<p class="video-container">';
							var vidFrame = prompt("<?php echo __('Embed Video', 'btpm'); ?>", "<?php echo __('Paste Code <iframe .. > to </iframe>', 'btpm'); ?>");
							var endingFr = '</p>';
							var Frame = startFr + vidFrame + endingFr;
							if (vidFrame != null && vidFrame != 'undefined'){
								ed.execCommand('mceInsertContent', false, Frame);
							}
						}
					});
				}
			});
			tinymce.PluginManager.add('youtube', tinymce.plugins.BTPMYouTube);
		});
	</script>
<?php }

function btpm_tinymce_yt(){ ?>

jQuery(document).ready(function($){

tinymce.create('tinymce.plugins.BTPMYouTube', {

init : function(ed) {

ed.addButton('youtube', {

title : '<?php echo __('Insert Video Youtube', 'btpm'); ?>',

image : '<?php echo get_template_directory_uri(); ?>/images/youtube.svg',

onclick : function() {

var startFr = '<p class="video-container">';

var vidFrame = prompt("<?php echo __('Embed Video', 'btpm'); ?>", "<?php echo __('Paste Code <iframe .. > to </iframe>', 'btpm'); ?>");

var endingFr = '</p>';

var Frame = startFr + vidFrame + endingFr;

if (vidFrame != null && vidFrame != 'undefined'){

ed.execCommand('mceInsertContent', false, Frame);

}

});

}

});

tinymce.PluginManager.add('youtube', tinymce.plugins.BTPMYouTube);

});

</script>

<?php }

Fungsinya saya namakan “btpm_tinymce_yt()” Di dalamnya masih sama hampir seluruhnya coding javascript. Kita juga membutuhkan “image” untuk icon. Masih saya sarankan gunakan tipe .svg karena tipe ini menggunakan konsep vektor sehingga tidak akan pecah dalam berbagai resolusi layar. Untuk peletakan filenya juga silakan disesuaikan dengan keinginan. Selanjutnya nanti tinggal menyesuaikan pemanggilan filenya pada coding “image”. Jika melihat coding saya di atas file “image” saya letakkan pada folder images. Kemudian tambahkan data array pada variable $plugin_array untuk menambahkan custom button youtube.

$plugin_array['youtube'] = btpm_tinymce_yt();

1	$plugin_array['youtube'] = btpm_tinymce_yt();

Tambahkan juga array_push untuk tombol youtube pada register button.

array_push( $buttons, 'youtube' );

1	array_push( $buttons, 'youtube' );

Hasilnya akan muncul tombol baru embed youtube pada tinymce editor yang jika di klik akan memanggil form input javascript. Tinggal pastekan kode embed <iframe> dan video youtube berhasil disematkan. Seperti terlihat pada gambar berikut.

Jika ada yang kurang bisa di fahami dapat melihat video berikut :

Semoga bermanfaat. Happy Coding..

Lanjut lembar ke
1
2

Tag-tag #wp_advance Custom button Embed iframe Next page Page Page break Post Tinymce Tinymce editor Wordpress Wp Youtube

Tulisan Terkait

Membuat Atau Menambahkan Custom Button Pada Tinymce Editor WordPress oleh :

Masyhuri Jamil

Tidak memiliki kompetensi di bidang coding. Tapi selalu semangat terus belajar html, css, php, mysql, java script (jquery). Suka oprek-oprek android juga dan yang pasti suka jalan-jalan (treveling).

Memiliki 149 tulisan

Tambahkan Komentar Anda