WordPress 3.9+ TinyMCE 4 Tweaks: Dodawanie stylów, przycisków, czcionek, rozwijanych menu i wyskakujących okienek

Jedną z moich ulubionych aktualizacji w WordPress 3.9 było stworzenie rdzenia TinyMCE w wersji 4.0. Nowy TinyMCE wygląda na czystszy (naprawdę pasuje do deski rozdzielczej WP) i ma kilka naprawdę fajnych dodatkowych funkcji. Wiele moich starych motywów i wtyczek musiało zostać zaktualizowanych do pracy z nowym TinyMCE, więc poświęciłem trochę czasu na przeglądanie API i wymyślanie fajnych rzeczy. Poniżej podam kilka przykładów, w jaki sposób możesz rozszerzyć funkcjonalność TinyMCE. Nie przeprowadzę cię przez wszystkie kroki ani co dokładnie oznacza kod (jest to przeznaczone dla programistów), ale dostarczy ci dokładnego kodu, który możesz skopiować / wkleić w swoim motywie lub wtyczce, a następnie odpowiednio dostosować.

Dodawanie rozmiaru czcionki i wybór rodziny czcionek

Domyślnie czcionki niestandardowe i rozmiary czcionek nie są dodawane do edytora TinyMCE. Poniższa funkcja doda oba te menu rozwijane po lewej stronie edytora w drugim rzędzie. Po prostu zmień, gdzie jest napisane „mce_buttons_2”, jeśli chcesz, aby było w innym wierszu (np. Użyj „mce_buttons_3” dla trzeciego rzędu).

// Włącz rozmiar czcionki i wybór rodziny czcionek w edytorze
if (! function_exists ('wpex_mce_buttons')) {
funkcja wpex_mce_buttons ($ buttons) {
array_unshift ($ buttons, 'fontselect'); // Dodaj czcionkę Wybierz
array_unshift ($ buttons, 'fontsizeselect'); // Dodaj rozmiar czcionki Wybierz
przyciski powrotu $;
}
}
add_filter ('mce_buttons_2', 'wpex_mce_buttons');

Dodawanie niestandardowych rozmiarów czcionek

Domyślnie rozmiary czcionek są ustawione na wartości pt, co nie zawsze jest idealne. Wolę używać wartości pikseli (12px, 13px, 14px, 16px..etc) i zapewnić więcej opcji dla większej elastyczności. Poniższa funkcja zmieni domyślne opcje rozmiaru czcionki w rozwijanym selektorze.

// Dostosuj rozmiary czcionek edytora mce
if (! function_exists ('wpex_mce_text_sizes')) {
funkcja wpex_mce_text_sizes ($ initArray) {
$ initArray ['fontsize_formats'] = "9px 10px 12px 13px 14px 16px 18px 21px 24px 28px 32px 36px";
return $ initArray;
}
}
add_filter ('tiny_mce_before_init', 'wpex_mce_text_sizes');

Dodawanie niestandardowych czcionek

Domyślne opcje czcionek w selektorze rodziny czcionek są domyślnie czcionkami „bezpiecznymi dla sieci”, ale co zrobić, jeśli chcesz dodać więcej czcionek do selektora? Może jakieś czcionki Google? Zobaczymy przykład poniżej.

// Dodaj niestandardowe czcionki do listy czcionek
if (! function_exists ('wpex_mce_google_fonts_array')) {
funkcja 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, awangarda; Book Antiqua = book antiqua, palatino; Comic Sans MS = komiks bez ms, bezszeryfowy; Kurier Nowy = kurier nowy, kurier; Gruzja = Georgia, palatino; Helvetica = helvetica; Wpływ = uderzenie, Chicago; Symbol = symbol; Tahoma = tahoma, arial, helvetica, sans-serif; Terminal = terminal, monako; Times New Roman = times new roman, times; Trebuchet MS = trebuchet ms, Geneva; Verdana = verdana, Geneva; Webdings = webdings; Wingdings = wingdings, zapf dingbats ';
return $ initArray;
}
}
add_filter ('tiny_mce_before_init', 'wpex_mce_google_fonts_array');

Zauważ, jak dodałem „Lato” do listy w powyższym kodzie? To takie proste! W moim motywie Total WordPress przeglądam dowolną niestandardową czcionkę używaną w witrynie zgodnie z definicją w panelu motywu i dodam ją do pola wyboru, aby były one również dostępne podczas edytowania postów / stron (słodkie). Ale kod reklamuje TYLKO rodzinę czcionek w menu rozwijanym, nie magicznie ładuje skryptu, aby po zmianie tekstu w edytorze można było zobaczyć, że zastosowano do niego niestandardową czcionkę… Tak właśnie działa poniższy kod!

// Dodaj skrypty Google do użytku z edytorem
if (! function_exists ('wpex_mce_google_fonts_styles')) {
funkcja 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 Działalności („init”, „wpex_mce_google_fonts_styles”);

Włącz menu rozwijane Formaty (style) i Dodaj nowe style

Pamiętasz menu „Style” w WP 3.8? To było całkiem fajne! Możesz go użyć, aby dodać kilka fajnych klas do użycia w edytorze postów (używam go w WPExplorer w rzeczywistości do przycisków, zakresów kolorów, pól .. etc). W WP 3.9 nadal możesz dodawać style, jednak w nowym TinyMCE 4.0 zmieniono jego nazwę na „Formaty”, więc działa trochę inaczej. Poniżej znajduje się przykład włączenia listy rozwijanej Formaty, a także dodania do niej nowych elementów.

Włącz menu rozwijane Formaty

Robi się to w ten sam sposób przed WP 3.9, ale dzielę się tym, że nie wiedziałeś, jak to zrobić.

// Dodaj menu rozwijane formaty do MCE
if (! function_exists ('wpex_style_select')) {
funkcja wpex_style_select ($ buttons) {
array_push ($ buttons, 'styleselect');
przyciski powrotu $;
}
}
add_filter ('mce_buttons', 'wpex_style_select');

Dodaj nowe elementy do formatów

Dodawanie nowych przedmiotów jest bardzo łatwe. Zwróć uwagę, jak dodałem „$ settings [„ style_formats_merge ”] = true;” w poniższym kodzie, upewni się, że Twoje zmiany zostaną dodane do menu formatów wraz z innymi – nie nadpisuj całej treści (być może inne wtyczki też z niej skorzystają).

// Dodaj nowe style do menu rozwijanego „formatów” TinyMCE
if (! function_exists ('wpex_styles_dropdown')) {
funkcja wpex_styles_dropdown ($ settings) {

// Utwórz tablicę nowych stylów
$ new_styles = array (
szyk(
„title” => __ („Style niestandardowe”, „wpex”),
„items” => tablica (
szyk(
„title” => __ („Przycisk motywu”, „wpex”),
„selektor” => „a”,
„klasy” => „przycisk motywu”
),
szyk(
„title” => __ („Highlight”, „wpex”),
„inline” => „span”,
„klasy” => „podświetlanie tekstu”,
),
),
),
);

// Scal stare i nowe style
$ settings ['style_formats_merge'] = true;

// Dodaj nowe style
$ settings ['style_formats'] = json_encode ($ new_styles);

// Zwróć nowe ustawienia
zwróć ustawienia $;

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

Dodanie prostego przycisku MCE

Dodanie nowego przycisku do edytora TinyMCE jest szczególnie przydatne w przypadku skrótów, ponieważ jako użytkownik nie musisz pamiętać żadnych skrótów, możesz po prostu kliknąć przycisk i wstawić go. Nie mówię, aby dodać 100 przycisków do TinyMCE dla wszystkich twoich skrótów (nienawidzę, gdy programiści to robią, to taka zła praktyka i wygląda okropnie), ale jeśli dodasz 1 lub kilka, pozwolę jej przejść �� Jeśli chcesz dodać kilka, a następnie powinieneś utworzyć podmenu, jak wyjaśniono w poniższej sekcji.

Kod PHP – Zadeklaruj nową wtyczkę MCE w WP

Ten kod zadeklaruje twoją nową wtyczkę MCE, pamiętaj również, aby zmienić lokalizację pliku javascript „mce-button.js”, tak aby pasowała do lokalizacji twojego pliku (dla której również podam kod w następnym podsekcji) ponieważ oczywiście zmień nazwę prefiksu „my” na coś bardziej unikalnego!

// Przechwytuje twoje funkcje do odpowiednich filtrów
funkcja my_add_mce_button () {
// sprawdź uprawnienia użytkownika
if (! current_user_can ('edit_posts') &&! current_user_can ('edit_pages')) {
powrót;
}
// sprawdź, czy WYSIWYG jest włączony
if ('true' == get_user_option ('rich_editing')) {
add_filter ('mce_external_plugins', 'my_add_tinymce_plugin');
add_filter ('mce_buttons', 'my_register_mce_button');
}
}
działanie dodatkowe („admin_head”, „my_add_mce_button”);

// Zadeklaruj skrypt dla nowego przycisku
funkcja my_add_tinymce_plugin ($ plugin_array) {
$ plugin_array ['my_mce_button'] = get_template_directory_uri (). '/ js / mce-button.js';
return $ plugin_array;
}

// Zarejestruj nowy przycisk w edytorze
funkcja my_register_mce_button ($ buttons) {
array_push ($ buttons, 'my_mce_button');
przyciski powrotu $;
}

Kod JS – Dodaj przycisk do MCE

Ten kod js znajduje się w pliku js zarejestrowanym we fragmencie powyżej w funkcji „symple_shortcodes_add_tinymce_plugin”. To powinno dodać nowy przycisk tekstowy z napisem „Nowy przycisk” do edytora, a po kliknięciu wstawi tekst „WPExplorer.com jest niesamowity!” (oczywiście).

(funkcja () {
tinymce.PluginManager.add ('my_mce_button', funkcja (edytor, adres URL) {
Editor.addButton („my_mce_button”, {
tekst: „Nowy przycisk”,
ikona: fałsz,
onclick: function () {
Editor.insertContent („WPExplorer.com jest niesamowity!”);
}
});
});
}) ();

Dodaj niestandardową ikonę do nowego przycisku MCE

Powyżej pokazałem, jak dodać nowy przycisk, który będzie wyświetlany w edytorze jako „Nowy przycisk”, jest to trochę kiepskie… Więc zmieniony kod pokaże, jak dodać własną ikonę niestandardową.

Załaduj arkusz stylów za pomocą swojego CSS

Użyj tej funkcji, aby załadować nowy arkusz stylów do użytku w panelu administracyjnym – niektóre wtyczki / motywy mogą już dodawać arkusz stylów, więc jeśli twój motyw / wtyczka to robi, pomiń to i po prostu dodaj własny CSS i popraw js (pokazany poniżej).

funkcja my_shortcodes_mce_css () {
wp_enqueue_style ('symple_shortcodes-tc', plugins_url ('/ css / my-mce-style.css', __FILE__));
}
działanie dodatkowe („admin_enqueue_scripts”, „my_shortcodes_mce_css”);

Twój niestandardowy CSS

To jest CSS, aby dodać załadowany wcześniej arkusz stylów.

i.my-mce-icon {
background-image: url („URL twojej ikony”);
}

Popraw swój Javascript

Teraz po prostu popraw kod JavaScript, który wcześniej dodałeś, aby usunąć parametr tekstowy i zamiast ustawić ikonę na false, nadaj mu niestandardową nazwę klasy.

(funkcja () {
tinymce.PluginManager.add ('my_mce_button', funkcja (edytor, adres URL) {
Editor.addButton („my_mce_button”, {
ikona: „my-mce-icon”,
onclick: function () {
Editor.insertContent („WPExplorer.com jest niesamowity!”);
}
});
});
}) ();

Dodawanie przycisku z podmenu

Wcześniej wspomniałem, że dodanie ton nowych ikon do paska TinyMCE jest złym pomysłem (i tak jest), więc sprawdź poniższy kod, aby zobaczyć, jak możesz edytować skrypt JavaScript, aby wyświetlić podmenu dla przycisku niestandardowego. Jeśli chcesz zobaczyć to w akcji, sprawdź moje Symple Shortcodes Video.

(funkcja () {
tinymce.PluginManager.add ('my_mce_button', funkcja (edytor, adres URL) {
Editor.addButton („my_mce_button”, {
tekst: „Przykładowe menu rozwijane”,
ikona: fałsz,
typ: „menubutton”,
menu: [
{
tekst: „pozycja 1”,
menu: [
{
tekst: „Pozycja 1”,
onclick: function () {
Editor.insertContent („WPExplorer.com jest niesamowity!”);
}
},
{
tekst: „Pozycja 2”,
onclick: function () {
Editor.insertContent („WPExplorer.com jest niesamowity!”);
}
}
]
},
{
tekst: „pozycja 2”,
menu: [
{
tekst: „Pozycja 1”,
onclick: function () {
Editor.insertContent („WPExplorer.com jest niesamowity!”);
}
},
{
tekst: „Pozycja 2”,
onclick: function () {
Editor.insertContent („WPExplorer.com jest niesamowity!”);
}
}
]
}
]
});
});
}) ();

Dodawanie wyskakującego okna do przycisku po kliknięciu

W powyższym przykładzie możesz zauważyć, że każdy przycisk po prostu wstawia tekst „WPExplorer.com jest niesamowity!” co jest fajne, ale co z tworzeniem wyskakującego okna, w którym użytkownik może zmieniać zawartość wstawianego tekstu? To byłoby słodkie! Jest to coś, co dodałem do wersji 1.6 moich skrótów Symple, dzięki czemu wtyczka jest o wiele bardziej przyjazna dla użytkownika.

(funkcja () {
tinymce.PluginManager.add ('my_mce_button', funkcja (edytor, adres URL) {
Editor.addButton („my_mce_button”, {
tekst: „Przykładowe menu rozwijane”,
ikona: fałsz,
typ: „menubutton”,
menu: [
{
tekst: „pozycja 1”,
menu: [
{
tekst: „Pop-Up”,
onclick: function () {
editor.windowManager.open ({
tytuł: „Wstaw losowy skrót”,
ciało: [
{
wpisz: „pole tekstowe”,
nazwa: „nazwa pola tekstowego”,
etykieta: „Pole tekstowe”,
wartość: „30”
},
{
wpisz: „pole tekstowe”,
nazwa: „multilineName”,
etykieta: „Wielowierszowe pole tekstowe”,
wartość: „Możesz tu powiedzieć wiele rzeczy”,
multiline: prawda,
minWidth: 300,
min Wysokość: 100
},
{
wpisz: „listbox”,
nazwa: „listboxName”,
etykieta: „Pole listy”,
„wartości”: [
{text: „Opcja 1”, wartość: „1”},
{text: „Opcja 2”, wartość: „2”},
{text: „Opcja 3”, wartość: „3”}
]
}
],
onsubmit: funkcja (e) {
Editor.insertContent ('[random_shortcode textbox = "' + e.data.textboxName + '" multiline = "' + e.data.multilineName + '" listbox = "' + e.data.listboxName + '"]');
}
});
}
}
]
}
]
});
});
}) ();

To jest fajne… Teraz co?

Dobre pytanie! Teraz nadszedł czas, abyś wziął te niesamowite poprawki i zaczął tworzyć coś niesamowitego lub zaktualizować wtyczki / motywy, aby były zgodne z nowym TinyMCE w WordPress 3.9. Daj mi znać, co wymyśliłeś w komentarzach poniżej!