TinyMCE – wprowadzenie

Jako programista i koder jestem zwolennikiem ręcznego pisania kodu. Co innego uzupełnianie składni czy podpowiadanie metod znane z profesjonalnych środowisk programistycznych, np. MS Visual Studio. Tak samo nie mam nic przeciwko wstawianiu gotowych bloków kodu, np. przez plugin QuickText dla edytora Notepad++.

Jednak korzystanie z edytorów WYSIWYG podczas tworzenia aplikacji internetowych to jedna z najgorszych praktyk. Edytory te prowadzą często do tworzenia nadmiarowego kodu. Bynajmniej nie chodzi tu tylko o przestarzałe znaczniki i inne wynalazki, które nie przechodzą poprawnie walidacji. Edytory WYSIWYG najzwyczajniej w świecie nie potrafią tworzyć w pełni semantycznego kodu XHTML. Jednak w pewnym stopniu mogą być przydatne.

Wprowadzenie

TinyMCE to niezależny internetowy edytor WYSIWYG napisany w Javascript. TinyMCE jest wydawany przez Moxiecode Systems AB jako Open Source na licencji LGPL. Główną zaletą tego produktu jest łatwa integracja z dowolnym systemem zarządzania treścią.

W jednym z projektów klient chciał formatować treść swoich wpisów. Oczywiście rozsądne było założenie, że klient nie zna znaczników HTML, składni BBCode czy Textile. Po krótkim namyśle, postanowiłem skorzystać z gotowego rozwiązania jakim jest TinyMCE.

Instalacja

Na początek musimy ściągnąć potrzebny TinyMCE, najlepiej w najnowszej wersji. Pozostaje nam wypakowanie archiwum w wybranej lokalizacji i podlinkowanie w kodzie naszej strony.

<script language="javascript" type="text/javascript" src="js/tiny_mce/tiny_mce.js"></script>

W moim przypadku był to katalog js/tiny_mce, w którym znajdował się właściwy plik tiny_mce.js. Uruchomienie edytora jest równie proste. Należy jedynie pamiętać o objęciu całości przez {literal} i {/literal}, jeżeli korzystamy z szablonów Smarty, ponieważ przy tworzeniu obiektu tinyMCE stosowane są klamry.

<script language="javascript" type="text/javascript">
  tinyMCE.init({
    mode : "textareas"
  });
</script>

Instalacja to dopiero początek. Cała magia skryptu kryje się w mnogości opcji konfiguracyjnych.

Konfiguracja

Kilkanaście kluczowych opcji pozwala na praktycznie dowolne ustawienie wyglądu i zachowania naszego edytora. Dokumentacja TinyMCE zawiera spis wszystkich parametrów konfiguracyjnych.

Opcja mode pozwala na ustawienie, jakie elementy naszej aplikacji będą edytorami. Wartość textareas powoduje przekształcenie wszystkich znaczników w edytory WYSIWYG.

tinyMCE.init({
  mode : "textareas"
});

Możliwe jest również przekształcenie w edytor dowolnego elementu na naszej stronie. W tym wypadku ustawiamy wartość exact oraz podajemy dodatkowy parametr elements, w celu powiadomienia, które elementy chcemy zmienić w edytor.

tinyMCE.init({
  mode : "exact",
  elements : "post-text"
});

Jeżeli potrzebujemy polskich podpowiedzi (hints) lub innych elementów to możliwy jest wybór języka. Jednak konieczne jest ściągnięcie odpowiednich plików z serwera TinyMCE i umieszczenie ich w naszych katalogach. Resztę załatwia opcja language z wartością danego języka. W naszym przypadku będzie to pl dla języka polskiego.

tinyMCE.init({
  ...
  language : "pl"
});

Następnie powinniśmy ustawić theme, który odpowiada za ilość funkcji, dostępnych w edytorze. Wartość advanced pozwala na dużą elastyczność, zarówno w doborze funkcji jak i innych ustawieniach. Druga możliwość to simple, która udostępnia edytor z podstawowymi funkcjami.

tinyMCE.init({
  ...
  theme : "advanced"
});

Wartość advanced jest domyślna, a nasz edytor może zawierać ponad 50 różnych funkcji! Zapewne większości użytkowników niepotrzebne są niektóre funkcje, dlatego możemy skorzystać z kolejnej opcji konfiguracyjnej.

Jeżeli potrzebujemy tylko wybrane funkcje i potrafimy zmieścić je w dwóch lub jednym pasku to wystarczy dodać kolejny fragment kodu.

tinyMCE.init({
  ...
  theme_advanced_buttons1 : "bold,italic,underline,separator,strikethrough",
  theme_advanced_buttons2 : "undo,redo,|,link,unlink",
  theme_advanced_buttons3 : ""
});

W pierwszym pasku mamy Pogrubienie, Pochylenie, Podkreślenie oraz Przekreślenie rozdzielone separatorem pionowym. W kolejnym pasku znajdują się Cofnij i Ponów oraz Dodaj link i Usuń link, także rozdzielone separatorem. Trzeci pasek jest zdefiniowany jako pusty. Dla krótszej notacji można stosować | zamiast separator.

Możemy również wybrać pozycję pasków oraz wyrównanie przycisków. Dopuszczalne wartości dla ustawienia pasków to top, bottom oraz external, przy czym druga jest domyślna, a trzecia wymaga dodatkowych opcji w celu ustawienia pasków w zewnętrznej warstwie. Jeśli chcemy wyrównać przyciski to możemy skorzystać z wartości left, right lub center, przy czym domyślnie przyciski umieszczone są na środku paska.

tinyMCE.init({
  ...
  theme_advanced_toolbar_location : "top",
  theme_advanced_toolbar_align : "left"
});

Podsumowanie

Artykuł przedstawia ogólne informacje na temat TinyMCE. Zdaję sobie sprawę, że omówiłem jedynie podstawowe opcje konfiguracyjne, ale w większości użytkowników jest to wystarczające. Więcej informacji możemy znaleźć w dokumentacji.

TinyMCE jest bardzo elastyczne i pozwala na praktycznie dowolną konfigurację. Nie należy jednak przesadzać, ponieważ czasem coś może nie działać tak jak tego oczekujemy.

7 odpowiedzi do “TinyMCE – wprowadzenie”

  1. Witam, nie działa mi ten cały tinymce, tzn wgrany jest OK gdyż się wyświetla, testuję sobie go wrzucajac cały jego wynik do zmiennej a nastepnie wyswietlam „echem” w PHP. Działa jedynie pogrubienie implementujące znaczniki w html, reszta przycisków jest pomijana a nawet nie występują „entery”, tzn wynik jest zapisany w jednym ciągu oddzielonym jedynie spacjami. Czy mogę liczyć na jakąś pomoc?

  2. Nie używałem TinyMCE od lat, bo dla mnie jest zbyt ociężałe. Poza tym TinyMCE działa po stronie przeglądarki, więc PHP raczej nie ma na to wpływu.

    Istotne jest używanie najnowszej wersji skryptu. Polecam dokładniejsze sprawdzenie dokumentacji. Prześlij przykładowy kod, bo inaczej trudno cokolwiek więcej powiedzieć.

  3. U mnie dokładnie to samo…
    dałem w pliku:

    tinyMCE.init({ mode : „textareas”, elements : „content”,theme :”advanced”,…

    w textarea
    … i wpisałem kolorowy i podkreślony ‚napis testowy’

    natomiast w podstronie zwrócił mi jako wynik:
    Array
    (
    [content] => napis testowy
    )
    najzwyklejszy niesformatowany napis testowy… co jest nie tak?

  4. Witam,
    U mnie działa nawet całkiem dobrze, ale mam inny problem. Mianowicie nie wiem, w jaki sposób odczytać aktualną wartość textarea (za pomocą JavaScript), gdyż polecenie document.getElementsByName(„content”).item(0).value zwraca jedynie domyślną wartość pola textarea (tą, jaka jest zaraz po załadowaniu się strony). Po przesłaniu jednak formularza wszystko jest ok, wartość pola textarea w tablicy $_POST jest poprawna, tzn taka jaką ją tinymce wyedytował. Z góry dziękuję za radę.

    Pozdrawiam.

  5. Poszperałem trochę w dokumentacji i chyba ta instrukcja to wykonuje (trochę na zasadzie prób i błędów, ale póki co działa):

    tinymce.activeEditor.getContent()

    Pozdrawiam.

  6. TinyMCE nie używam w nowych projektach. Aktualnie rolę graficznego edytora treści spełnia doskonale wmd – wysiwym markdown editor.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *