Menampilkan editor TinyMCE di front-end tanpa wp_editor

Dengan function wp_editor Anda akan dengan mudah untuk menampilkan editor yang sama dengan editor postingan admin. Bagaimana jika kita ingin menampilkan hal yang sama dengan memanfaatkan langsung fitur TinyMCE yang digunakan oleh wp_editor?

Cara ini sudah saya terapkan di beberapa plugin private dan sudah saya share di WPSE.

Kode HTML sederhana textarea

Kode ini bisa Anda tempatkan di page situs Anda.

<textarea id="textarea_id_element"></textarea>

Kode PHP dan settingan TinyMCE

Dengan menggunakan function jv_editor_tinymce kita akan menempatkan kode js settingan tinyMCE di bagian footer theme. Pastikan Anda mengubah id name textrea dimana Anda akan menempatkan tinyMCE editor.

add_action( 'wp_footer', 'jv_editor_tinymce' );
function jv_editor_tinymce()
{ ?>
<script type="text/javascript">
if ( undefined !== window.jQuery ) {
	jQuery( document ).ready( function( $ ) {
		tinymce.init( {
			mode : 'exact',
			elements : 'textarea_id_element', //your id name textarea element
			theme: 'modern',
			skin: 'lightgray',
			menubar : false,
			statusbar : false,
			toolbar: [
				'bold italic | alignleft aligncenter alignright | bullist numlist outdent indent | undo redo'
			],
			plugins :'paste',
			paste_auto_cleanup_on_paste : true,
			paste_postprocess : function( pl, o ) {
				o.node.innerHTML = o.node.innerHTML.replace( /&nbsp;+/ig, ' ' );
			}
		} );
	} );
}
</script>
<?php
}

Kode JS TinyMCE WordPress

add_action( 'wp_enqueue_scripts', 'jv_enqueue_scripts' );
function jv_enqueue_scripts() {
	wp_enqueue_script( 'tinymce_js', includes_url( 'js/tinymce/' ) . 'wp-tinymce.php', array( 'jquery' ), false, true );
}
Tampilan editor TinyMCE
Tampilan editor TinyMCE dengan menggunakan theme TwentySixteen.

Tutorial ini hanya sekedar dasar untuk menampilkan editor tinyMCE, untuk menggunakannya dalam hal mengirimkan data layaknya postingan, Anda membutuhkan form, tombol submit dan function untuk mengevaluasi data yang dikirim. Semoga bermanfaat.

Leave a Reply

*

*