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.
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ą).
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).
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.
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.
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.
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.
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!
07.06.2020
WordPress 3.9+ TinyMCE 4 Tweaks: Dodawanie stylów, przycisków, czcionek, rozwijanych menu i wyskakujących okienek
Jeffrey Wilson Poradniki
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ć.
Contents
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).
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.
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.
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!
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 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ą).
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!
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).
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).
Twój niestandardowy CSS
To jest CSS, aby dodać załadowany wcześniej arkusz stylów.
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.
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.
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.
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!