Menggunakan TinyMCE WordPress di Custom Panel

Beberapa pemain WordPress mungkin sudah pada punya Custom Admin Panel sendiri kan?! Tapi ada kendala pada field tertentu. Misalnya pada textarea ingin ada fitur pengolahan teks, seperti tebal, miring, garis bawah, tautan dan kawan-kawannya ** membiasakan pakai bahasa indo, tapi serasa aneh ya? 😆 *.

Kita ambil satu contoh, biasanya tagline dalam sebuah situs hanya teks biasa saja, contohnya seperti berikut.

“Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.”

ingin menjadi seperti ini

“Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.”

Sungguh bagus kata-katanya bin keren, akan tetapi ini hanya bisa diubah bentuk raga dan fisiknya lewat CSS langsung. Dan user manula pemula akan kesulitan bila ia ingin merubahnya, walaupun sedikit. Dengan bantuan Custom Admin Panel dan sentuhan TinyMCE dari WordPress, ini bisa teratasi. Caranya seperti berikut:

<?php            
add_action("admin_print_scripts", "load_js");     
function load_js() {         
     wp_enqueue_script('tiny_mce');     
} ?>

Fungsi diatas untuk meload library si tinyMCE.

<?php    wp_tiny_mce( false , array( "editor_selector" => "custom_tagline")); ?>

Fungsi diatas, untuk memanggil fungsi serta mengkonfigurasi textarea yang akan kita sulap. Field “editor_selector” ini adalah nama dan id dari textarea. Ada banyak konfigurasi lainnya yang bisa disetting, semisal “width”, “height”, dll. Lalu untuk menerapkannya pada textarea hanya lengkapi “name”, “id” dan “class” yang tadi di setting diatas.

<textarea id="custom_tagline" class="custom_tagline" name="custom_tagline"></textarea>

Dan hasilnya voilaaa.. textarea anda berhasil disulap menjadi text editor keren bawaan dari WordPress.

Baca Juga:  Menampilkan Post Content WordPress dengan 2 jenis layout berbeda

Untuk setting yang lainnya bisa dilihat dibawah ini.

// TinyMCE init settings
$initArray = array (
     'mode' => 'none',
     'onpageload' => 'switchEditors.edInit',
     'width' => '100%',
     'theme' => 'advanced',
     'skin' => 'wp_theme',
     'theme_advanced_buttons1' => "$mce_buttons",
     'theme_advanced_buttons2' => "$mce_buttons_2",
     'theme_advanced_buttons3' => "$mce_buttons_3",
     'theme_advanced_buttons4' => "$mce_buttons_4",
     'language' => "$mce_locale",
     'spellchecker_languages' => "$mce_spellchecker_languages",
     'theme_advanced_toolbar_location' => 'top',
     'theme_advanced_toolbar_align' => 'left',
     'theme_advanced_statusbar_location' => 'bottom',
     'theme_advanced_resizing' => true,
     'theme_advanced_resize_horizontal' => false,
     'dialog_type' => 'modal',
     'relative_urls' => false,
     'remove_script_host' => false,
     'convert_urls' => false,
     'apply_source_formatting' => false,
     'remove_linebreaks' => true,
     'paste_convert_middot_lists' => true,
     'paste_remove_spans' => true,
     'paste_remove_styles' => true,
     'gecko_spellcheck' => true,
     'entities' => '38,amp,60,lt,62,gt',
     'accessibility_focus' => true,
     'tab_focus' => ':prev,:next',
     'content_css' => "$mce_css",
     'save_callback' => 'switchEditors.saveCallback',
     'wpeditimage_disable_captions' => $no_captions,
     'plugins' => "$plugins"
);

Komentar

comments

Onnay Okheng

Geeks: Wordpress, Internet, & entrepreneurship. Founder http://onnayokheng.com & @barudakunpascom. Let's Sharing and Dreaming.

grain storage instagram türk takipçi satın al