WordPress 3.9+ TinyMCE 4 Tweaks: Menambahkan Gaya, Tombol, Fon, Drop-down & Pop-Ups

Salah satu pembaruan favorit saya di WordPress 3.9 adalah membuat inti TinyMCE versi 4.0. TinyMCE baru terlihat lebih bersih (sangat cocok dengan dashboard WP) dan memiliki beberapa fungsi tambahan yang sangat bagus. Banyak tema dan plugin lama saya harus diperbarui untuk bekerja dengan TinyMCE baru jadi saya menghabiskan waktu untuk menggali API dan mencari tahu beberapa hal keren. Di bawah ini saya akan memberikan beberapa contoh tentang bagaimana Anda dapat memperluas fungsionalitas TinyMCE. Saya tidak akan memandu Anda melalui semua langkah atau apa arti kode tersebut (ini dimaksudkan untuk pengembang) tetapi akan memberi Anda kode yang tepat yang dapat Anda salin / tempel di tema atau plugin Anda dan kemudian atur sesuai keinginan.


Menambahkan Ukuran Huruf & Pilihan Huruf Keluarga

Secara default, Custom Fonts dan ukuran font tidak ditambahkan ke dalam editor TinyMCE. Fungsi di bawah ini akan menambahkan kedua dropdown ini ke paling kiri dari editor di baris kedua. Cukup ubah di mana dikatakan ‘mce_buttons_2’ jika Anda menginginkannya di baris yang berbeda (mis: gunakan ‘mce_buttons_3’ untuk baris ketiga).

// Aktifkan ukuran font & keluarga font pilih di editor
if (! function_exists ('wpex_mce_buttons')) {
function wpex_mce_buttons ($ buttons) {
array_unshift ($ buttons, 'fontselect'); // Tambahkan Font Select
array_unshift ($ buttons, 'fontsizeselect'); // Tambahkan Ukuran Huruf Pilih
mengembalikan $ tombol;
}
}
add_filter ('mce_buttons_2', 'wpex_mce_buttons');

Menambahkan Ukuran Huruf Ubahsuaian

Secara default ukuran font ditetapkan ke nilai pt yang tidak selalu ideal. Saya lebih suka menggunakan nilai piksel (12px, 13px, 14px, 16px..etc) dan untuk memberikan lebih banyak opsi untuk fleksibilitas parutan. Fungsi di bawah ini akan mengubah opsi ukuran font default di pemilih dropdown.

// Sesuaikan ukuran font editor mce
if (! function_exists ('wpex_mce_text_sizes')) {
function wpex_mce_text_sizes ($ initArray) {
$ initArray ['fontsize_formats'] = "9px 10px 12px 13px 14px 16px 18px 21px 24px 28px 32px 32px";
mengembalikan $ initArray;
}
}
add_filter ('tiny_mce_before_init', 'wpex_mce_text_sizes');

Menambahkan Font Kustom

Opsi font default dalam pemilih font family adalah semua font “web-safe” secara default, tetapi bagaimana jika Anda ingin menambahkan lebih banyak font ke pemilih? Mungkin beberapa Font Google? Kami akan sangat mudah melihat contoh di bawah ini.

// Tambahkan Font khusus ke daftar Font
if (! function_exists ('wpex_mce_google_fonts_array')) {
function wpex_mce_google_fonts_array ($ initArray) {
$ initArray ['font_formats'] = 'Lato = Lato; Andale Mono = andale mono, times; Arial = arial, helvetica, sans-serif; Arial Black = arial black, avant garde; Buku Antiqua = buku antiqua, palatino; Comic Sans MS = komik sans ms, sans-serif; Kurir Baru = kurir baru, kurir; Georgia = georgia, palatino; Helvetica = helvetica; Dampak = dampak, chicago; Simbol = simbol; Tahoma = tahoma, arial, helvetica, sans-serif; Terminal = terminal, monaco; Times New Roman = kali roman baru, kali; Trebuchet MS = trebuchet ms, geneva; Verdana = verdana, geneva; Webdings = webdings; Wingdings = wingdings, zapf dingbats ';
mengembalikan $ initArray;
}
}
add_filter ('tiny_mce_before_init', 'wpex_mce_google_fonts_array');

Perhatikan bagaimana saya menambahkan “Lato” ke daftar dalam kode di atas? Sesederhana itu! Dalam tema Total WordPress saya, saya benar-benar mengulang-ulang semua font khusus yang digunakan di situs sebagaimana ditentukan dalam panel tema dan menambahkannya ke kotak pilih sehingga juga tersedia saat mengedit posting / halaman Anda (manis). Tetapi kode HANYA mengiklankan keluarga font ke drop-down itu tidak akan memuat script sehingga ketika Anda mengubah teks Anda di editor Anda benar-benar dapat melihat bahwa font khusus diterapkan untuk itu … Itulah yang dilakukan kode di bawah ini!

// Tambahkan Google Scripts untuk digunakan dengan editor
if (! function_exists ('wpex_mce_google_fonts_styles')) {
function wpex_mce_google_fonts_styles () {
$ font_url = 'http://fonts.googleapis.com/css?family=Lato:300,400.700';
add_editor_style (str_replace (',', '% 2C', $ font_url));
}
}
add_action ('init', 'wpex_mce_google_fonts_styles');

Aktifkan Menu Dropdown Format (gaya) & Tambahkan Gaya Baru

Ingat dropdown “Gaya” di WP 3.8? Itu keren sekali! Anda dapat menggunakannya untuk menambahkan beberapa kelas keren untuk digunakan dalam editor posting (saya menggunakannya pada WPExplorer sebenarnya untuk tombol, bentang berwarna, kotak..etc). Kami akan di WP 3.9 Anda masih dapat menambahkan gaya, namun, itu telah diubah namanya di TinyMCE 4.0 baru menjadi “Format” sehingga bekerja sedikit berbeda. Di bawah ini adalah contoh cara mengaktifkan dropdown Format dan juga menambahkan beberapa item baru ke dalamnya.

Menu Dropdown Format TInyMCE WordPress

Aktifkan Menu Dropdown Format

Ini sebenarnya dilakukan dengan cara yang sama sebelum WP 3.9 tetapi saya berbagi jika Anda tidak tahu bagaimana melakukannya.

// Tambahkan Menu Dropdown Format ke MCE
if (! function_exists ('wpex_style_select')) {
function wpex_style_select ($ buttons) {
array_push ($ buttons, 'styleselect');
mengembalikan $ tombol;
}
}
add_filter ('mce_buttons', 'wpex_style_select');

Tambahkan Item Baru ke Format

Menambahkan item baru sangat mudah. Harap perhatikan bagaimana saya telah menambahkan “$ settings [‘ style_formats_merge ’] = true;” ke kode di bawah ini, ini memastikan bahwa suntingan Anda ditambahkan ke menu dropdown format bersama yang lainnya – jangan timpa semuanya (mungkin plugin lain juga ingin menggunakannya).

// Tambahkan gaya baru ke dropdown menu "format" TinyMCE
if (! function_exists ('wpex_styles_dropdown')) {
function wpex_styles_dropdown ($ settings) {

// Buat array gaya baru
$ new_styles = array (
Himpunan(
'title' => __ ('Gaya Kustom', 'wpex'),
'item' => array (
Himpunan(
'title' => __ ('Tombol Tema', 'wpex'),
'pemilih' => 'a',
'kelas' => 'tombol tema'
),
Himpunan(
'title' => __ ('Sorot', 'wpex'),
'inline' => 'span',
'kelas' => 'sorot teks',
),
),
),
);

// Gabungkan gaya lama & baru
$ settings ['style_formats_merge'] = true;

// Tambahkan gaya baru
$ settings ['style_formats'] = json_encode ($ new_styles);

// Kembalikan Pengaturan Baru
mengembalikan $ pengaturan;

}
}
add_filter ('tiny_mce_before_init', 'wpex_styles_dropdown');

Menambahkan Tombol MCE Sederhana

Menambahkan tombol baru ke editor TinyMCE sangat berguna untuk kode pendek, karena sebagai pengguna Anda tidak harus mengingat kode pendek apa pun, Anda cukup mengeklik tombol dan memasukkannya. Saya tidak mengatakan untuk menambahkan 100-an tombol ke TinyMCE untuk semua shortcode Anda (saya benci ketika pengembang melakukan ini, itu praktik yang sangat buruk dan terlihat mengerikan) tetapi jika Anda menambahkan 1 atau beberapa saya akan membiarkannya berlalu �� Jika Anda ingin menambahkan banyak, maka Anda harus membuat submenu seperti yang dijelaskan di bagian berikut ini.

Tombol Baru WordPress MCE

Kode PHP – Nyatakan plugin MCE baru di WP

Kode ini akan mendeklarasikan plugin MCE baru Anda, pastikan untuk mengubah lokasi file javascript “mce-button.js” agar sesuai dengan lokasi file Anda (yang akan saya beri kode untuk Anda juga pada subbagian berikutnya) juga jelas mengganti nama awalan “saya” untuk sesuatu yang lebih unik!

// Kaitkan fungsi Anda ke filter yang benar
function my_add_mce_button () {
// periksa izin pengguna
if (! current_user_can ('edit_posts') &&! current_user_can ('edit_pages')) {
kembali;
}
// periksa apakah WYSIWYG diaktifkan
if ('true' == get_user_option ('rich_editing')) {
add_filter ('mce_external_plugins', 'my_add_tinymce_plugin');
add_filter ('mce_buttons', 'my_register_mce_button');
}
}
add_action ('admin_head', 'my_add_mce_button');

// Nyatakan skrip untuk tombol baru
function my_add_tinymce_plugin ($ plugin_array) {
$ plugin_array ['my_mce_button'] = get_template_directory_uri (). '/ js / mce-button.js';
kembalikan $ plugin_array;
}

// Daftarkan tombol baru di editor
function my_register_mce_button ($ buttons) {
array_push ($ buttons, 'my_mce_button');
mengembalikan $ tombol;
}

Kode JS – Tambahkan tombol ke MCE

Kode js ini berlaku pada file js yang terdaftar dalam snippet di atas dalam fungsi “symple_shortcodes_add_tinymce_plugin”. Ini harus menambahkan tombol teks baru yang mengatakan “Tombol Baru” ke dalam editor Anda dan ketika diklik akan memasukkan teks “WPExplorer.com is awesome!” (tentu saja).

(fungsi () {
tinymce.PluginManager.add ('my_mce_button', fungsi (editor, url) {
editor.addButton ('my_mce_button', {
teks: 'Tombol Baru',
ikon: false,
onclick: function () {
editor.insertContent ('WPExplorer.com is awesome!');
}
});
});
}) ();

Tambahkan Ikon Kustom ke Tombol MCE Baru Anda

Di atas saya menunjukkan kepada Anda cara menambahkan tombol baru yang akan ditampilkan sebagai “Tombol Baru” di editor, ini agak timpang … Jadi kode yang diubah akan menunjukkan kepada Anda cara menambahkan ikon kustom Anda sendiri.

Muat lembar gaya dengan CSS Anda

Gunakan fungsi ini untuk memuat stylesheet baru untuk digunakan di panel admin Anda – beberapa plugin / tema mungkin sudah menambahkan stylesheet jadi jika tema / plugin Anda melakukan hal yang melompati ini dan cukup tambahkan CSS kustom Anda dan atur js (ditunjukkan di bawah).

function my_shortcodes_mce_css () {
wp_enqueue_style ('symple_shortcodes-tc', plugins_url ('/ css / my-mce-style.css', __FILE__));
}
add_action ('admin_enqueue_scripts', 'my_shortcodes_mce_css');

CSS Khusus Anda

Ini adalah CSS untuk menambahkan stylesheet yang dimuat sebelumnya.

i.my-mce-icon {
background-image: url ('URL ICON ANDA');
}

Tweak Javascript Anda

Sekarang sederhanakan tweak javascript yang Anda tambahkan sebelumnya untuk menghapus parameter teks dan alih-alih mengatur ikon menjadi false, berikan saja nama kelas khusus.

(fungsi () {
tinymce.PluginManager.add ('my_mce_button', fungsi (editor, url) {
editor.addButton ('my_mce_button', {
ikon: 'ikon-saya',
onclick: function () {
editor.insertContent ('WPExplorer.com is awesome!');
}
});
});
}) ();

Menambahkan Tombol Dengan Submenu

Submenu Tombol MCE

Sebelumnya saya menyebutkan bahwa menambahkan satu ton ikon baru ke bar TinyMCE adalah ide yang buruk (dan memang demikian) jadi lihat kode di bawah ini untuk melihat bagaimana Anda dapat mengedit javascript untuk menampilkan submenu untuk tombol kustom Anda. Jika Anda ingin melihatnya beraksi, periksa my Video Kode Pendek Symple.

(fungsi () {
tinymce.PluginManager.add ('my_mce_button', fungsi (editor, url) {
editor.addButton ('my_mce_button', {
teks: 'Contoh Dropdown',
ikon: false,
jenis: 'menubutton',
Tidak bisa: [
{
teks: 'Item 1',
Tidak bisa: [
{
teks: 'Sub Item 1',
onclick: function () {
editor.insertContent ('WPExplorer.com is awesome!');
}
},
{
teks: 'Sub Item 2',
onclick: function () {
editor.insertContent ('WPExplorer.com is awesome!');
}
}
]
},
{
teks: 'Item 2',
Tidak bisa: [
{
teks: 'Sub Item 1',
onclick: function () {
editor.insertContent ('WPExplorer.com is awesome!');
}
},
{
teks: 'Sub Item 2',
onclick: function () {
editor.insertContent ('WPExplorer.com is awesome!');
}
}
]
}
]
});
});
}) ();

Menambahkan Jendela Pop-Up ke Tombol Anda di Klik

Dalam contoh di atas Anda mungkin memperhatikan bahwa setiap tombol hanya menyisipkan teks “WPExplorer.com luar biasa!” mana yang keren, tetapi bagaimana dengan membuat jendela sembulan di mana pengguna dapat mengubah apa yang dimasukkan ke dalam teks? Nah, itu akan manis! Dan itu adalah sesuatu yang saya tambahkan ke versi 1.6 dari Symple Shortcodes saya, membuat plugin ini lebih ramah pengguna.

Jendela Munculan WordPress MCE

(fungsi () {
tinymce.PluginManager.add ('my_mce_button', fungsi (editor, url) {
editor.addButton ('my_mce_button', {
teks: 'Contoh Dropdown',
ikon: false,
jenis: 'menubutton',
Tidak bisa: [
{
teks: 'Item 1',
Tidak bisa: [
{
teks: 'Munculan',
onclick: function () {
editor.windowManager.open ({
judul: 'Masukkan Shortcode Acak',
tubuh: [
{
ketik: 'kotak teks',
nama: 'textboxName',
label: 'Kotak Teks',
nilai: '30'
},
{
ketik: 'kotak teks',
nama: 'multilineName',
label: 'Kotak Teks Multiline',
nilai: 'Anda bisa mengatakan banyak hal di sini',
multiline: benar,
minWidth: 300,
minTinggi: 100
},
{
ketik: 'listbox',
nama: 'listboxName',
label: 'Kotak Daftar',
'nilai': [
{text: 'Opsi 1', nilai: '1'},
{text: 'Opsi 2', nilai: '2'},
{text: 'Opsi 3', nilai: '3'}
]
}
],
onsubmit: function (e) {
editor.insertContent ('[random_shortcode textbox = "' + e.data.textboxName + '" multiline = "' + e.data.multilineName + '" listbox = "' + e.data.listboxName + ''"] ');
}
});
}
}
]
}
]
});
});
}) ();

Ini keren … Sekarang Apa?

Pertanyaan bagus! Sekarang saatnya bagi Anda untuk mengambil tweak mengagumkan ini dan membuat sesuatu yang epik atau memperbarui plugin / tema Anda agar kompatibel dengan TinyMCE baru di WordPress 3.9. Beri tahu saya apa yang Anda kemukakan dalam komentar di bawah!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map