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.