Tworzenie wtyczek dla TinyMCE 4.* – moja prelekcja z WordUp Wrocław #4

Po raz drugi pojawiłem się we Wrocławiu na WordUpie jako prelegent i tym razem opowiadałem o tworzeniu wtyczek dla TinyMCE 4.*.  Prelekcję można znaleźć na SlideShare.

Aby prelekcja nie była zbyt długa i nużąca zdecydowałem się wydzielić trzy tematy i stworzyć na ich podstawie wpisy, które stanowią uzupełnienie samej prelekcji:

  1. TinyMCE – dodawanie przycisków w trybie fullscreen
  2. Edytor TinyMCE w sekcji komentarzy
  3. Kontrolka styleselect w TinyMCE

Mam już sporo wartościowego feedbacku oraz kilka pomysłów na ulepszenie tej prelekcji, zatem można się spodziewać, że na jednym z kolejnych WordUpów zaprezentuję ją w ulepszonej postaci.

Dziękuję też osobom, które stale zadają mi ciekawe pytania, dzięki którym mogę tworzyć kolejne wpisy o TinyMCE – kolejna porcja wpisów odnośnie zastosowań tego edytora pojawi się niebawem.

TinyMCE – dodawanie przycisków w trybie fullscreen

WordPress od dłuższego czasu posiada pełnoekranowy tryb tworzenia wpisów, pozwalający skupić się na pisaniu (w niektórych edytorach taki tryb nazywa się “Zen mode” lub po prostu “Distraction Free”). Warto zatem nauczyć się dodawać własne przyciski do edytora w tym trybie – warto od razu podkreślić, że dodawanie przycisków do edytora w wersji pełnoekranowej rządzi się trochę innymi prawami niż w wypadku zwykłego edytora TinyMCE.

Czytaj dalej TinyMCE – dodawanie przycisków w trybie fullscreen

Dodawanie własnych przycisków w edytorze TinyMCE 4.*

WordPress 3.9 zawiera aktualizację edytora wpisów TinyMCE do wersji 4.*. Oznacza to spore zmiany w API edytora – dlatego postanowiłem opisać dodawanie własnych przycisków do edytora z użyciem nowego API.

Spis treści

Kod z poniższych przykładów można znaleźć też na Githubie.

  1. Deklarowanie nowego przycisku TinyMCE
  2. Przycisk z etykietą tekstową
  3. Przycisk ze standardową ikonką
  4. Przycisk z niestandardową ikonką pochodzącą z Dashicons
  5. Własna grafika jako ikonka przycisku
  6. Dodajemy przyciskowi submenu
  7. Dodajemy też sub-submenu 😉
  8. Dodajemy popup po kliknięciu
  9. Rozbudowywujemy popup

Czytaj dalej Dodawanie własnych przycisków w edytorze TinyMCE 4.*