Edycja tekstów na stronach internetowych nigdy nie należała do przyjemności. Brakowało opcji pogrubienia, kursywy, możliwości wstawienia odnośnika. Tak powstały edytory WYSIWYG do użytku na stronach WWW, które wyglądem przypominają tradycyjny edytor tekstu.
Nazwa WYSIWYG pochodzi z języka angielskiego i oznacza: to, co widzisz, jest tym, co dostajesz. Nie ulega wątpliwości, że taka jest filozofia działania większości aplikacji komputerowych.
Tworząc w Wordzie dokument nie zastanawiamy się, w jaki sposób w pliku źródłowym zakodowana jest kursywa. Chcemy jedynie zobaczyć na ekranie żądany efekt i mieć pewność, że tak stworzony dokument będzie prezentował się na wszystkich komputerach jednakowo. Z tworzeniem stron WWW jest podobnie. Witryny nie oceniamy po tym, jak wygląda jej kod, lecz jak się prezentuje.
Choć stworzenie podstawowego zestawu funkcji to kwestia kilku godzin, to już przygotowanie profesjonalnego edytora nie należy do zadań łatwych. Najważniejszy problem to kwestia zgodności kodu z różnymi wersjami przeglądarek.
Na rynku dostępnych jest wiele edytorów. Przedstawimy cztery, które mają największą funkcjonalność i są bezpłatne. Wyłonienie najlepszego pozostawiamy Czytelnikom, bo o wyborze decydują indywidualne potrzeby.
HTMLArea
HTMLArea od początku wyznaczał trendy. Prace nad tym edytorem rozpoczęła firma InteractiveTools.com, która zrezygnowała w marcu 2005 roku z dalszego rozwoju tego oprogramowania. Schedę po niej przejął Dynarch.com, który nieustannie rozwija edytor. Wersja 3.0 została napisana od nowa.
Oprócz standardowych funkcji oferuje następujące udogodnienia:
- możliwość powiększenia edytora na całą stronę,
- sprawdzanie pisowni (istnieje możliwość rozszerzenia biblioteki Aspell o język polski),
- menu kontekstowe (po kliknięciu prawym przyciskiem myszy pojawiają się opcje),
- tekst w okienku może być sformatowany wg wskazanego stylu CSS (strona edytowana wygląda identycznie, jak gotowa strona),
- rozszerzona obsługa tabel (możliwość tworzenia zaawansowanych struktur),
- możliwość edycji całych dokumentów HTML, włącznie ze zmianą informacji w nagłówkach.
Wadą edytora HTMLArea jest słaby mechanizm dodawania obrazów. Umożliwia on wprowadzenie adresu URL z lokalizacją obrazu i wyświetlenie jego podglądu. Oznacza to, że wstawienie każdego zdjęcia wymaga połączenia z serwerem FTP. W dodatku nie każdy powinien mieć do niego dostęp. Problem można rozwiązać poprzez zewnętrzne rozszerzenie Image Manager (opis dalej).
Instalacja HTMLArea nie narzuca żadnych wymagań co do języka skryptowego. Jeżeli jednak chcemy korzystać ze sprawdzania pisowni, mechanizm wymaga obsługi skryptów CGI/Perl.
FCKeditor
W tym edytorze wprowadzono trochę więcej funkcjonalności:
- możliwość zapisu dokumentu w czasie rzeczywistym (tj. bez przeładowania strony), co wymaga przygotowania odpowiedniego skryptu PHP pracującego z JavaScripcie,
- podgląd tworzonego dokumentu w zewnętrznym oknie,
- szablony, czyli fragmenty kodu HTML, który możemy wstawić wprost do edytora (unikniemy tym sposobem różnic w wyglądzie poszczególnych podstron),
- problem wklejania tekstu ze schowka rozwiązano przy użyciu dwóch przycisków – wstaw jako czysty tekst i wstaw z Worda (dzięki tej opcji możemy się pozbyć uciążliwego formatowania, np. niezgodnych czcionek),
- opcja drukowania edytowanego tekstu,
- bardzo przydatne opcje szukaj oraz szukaj i zamień,
- wstawianie dokumentów Flash, profesjonalnie rozwiązane,
- zestaw emotikonek (pomocne, gdy prowadzimy bloga),
- tablica znaków,
- uniwersalna klawiatura, niezastąpiona, gdy wprowadzamy teksty w obcych językach,
- elementy potrzebne do utworzenia formularza (przydatne jedynie, gdy edytujemy strony zawierające formularze, co raczej nie powinno mieć miejsca w systemach CMS),
- wstawianie zdjęć z możliwością wgrywania ich na serwer, bez opcji zmiany rozmiaru czy kadrowania (pomniejszanie zdjęć za pomocą parametrów width i height).
Bardzo elegancko rozwiązano kwestię języka skryptowego do obsługi menedżera obrazów i ich wgrywania. Dostępnych jest aż 6 wersji oprogramowania na platformy: PHP, Perl (CGI), ASP, ASPX, CFM i LASSO. FCK może być uruchomiony na każdym serwerze pracującym w sieci, brakuje zaawansowanej obsługi tabel.
TinyMCE
Znajdziemy tu:
- wklejanie tekstu z Worda oraz wklejanie jako czysty tekst,
- narzędzie szukaj, znajdź i zamień,
- zapisz w czasie rzeczywistym,
- wprowadzanie znaku z tablicy znaków, emotikon,
- sprawdzanie pisowni,
- wstawianie dokumentu flash,
- wstawianie zdjęć (ekspresowo tylko w przypadku, gdy zapłacimy ok. 50 euro za licencję),
- zaawansowana obsługa tabel.
W TinyMCE nie ma klawiatury ekranowej, nie obsługuje ani formularzy, ani szablonów. Ciekawą funkcją natomiast jest możliwość dowolnego skalowania okna edytora poprzez uchwyt umieszczony w prawym dolnym rogu edytora, a także możliwość wstawiania aktualnego czasu i daty.
Xinha
Projekt Xinha powstał na bazie HTMLArea. Xinha to edytor bardzo rozbudowany, o czym świadczą oferowane opcje:
- HTML Tidy to praktyczne zastosowanie rozszerzenia PHP, które pozwala uporządkować kod HTML (np. zamknąć niedomknięte tagi),
- pasek stylów, który bazując na dostarczonym stylu CSS pozwala szybko sformatować edytowany dokument,
- licznik ilości znaków,
- tło w postaci grafiki (tekstury),
- równania matematyczne,
- możliwość wprowadzania notacji muzycznej,
- przycisk do usuwania formatowania tekstu,
- sprawdzanie pisowni,
- zapisywanie kopii edytowanego tekstu na dysk lokalny,
- specjalny edytor tagów, ułatwiający formatowanie tekstu,
- bardzo zaawansowany edytor formularzy,
- przesuwający się po ekranie tekst.
W podstawowej wersji Xinha, podobnie jak HTMLArea, ma słaby mechanizm do dodawania obrazów. Istnieje jednak możliwość instalacji bardzo dobrego rozszerzenia o nazwie Image Manager (o nim dalej). Ponieważ jest bardzo rozbudowanym edytorem, jego ładowanie trwa najdłużej.
Wspólne cechy
Każdy z prezentowanych edytorów obsługuje XHTML 1.0, umożliwiając konfigurację w bardzo szerokim zakresie i obsługę wielu języków. Wszystkie edytory przetłumaczono na język polski na dostatecznym poziomie. Niestety brak pełnych tłumaczeń większości dodatków (rozszerzeń). Możliwości wszystkich edytorów można rozszerzać poprzez instalację wtyczek.
Problemy
Wszystkie rozwiązania mają jakieś wady. Za taką można uznać również zbyt dużą ilość. Jeżeli edytor ma trafić na publiczną stronę WWW, lepszym pomysłem jest stworzenie prostego edytora z kilkoma funkcjami. Takie rozwiązanie załaduje się bardzo szybko i nie powinno znacząco wpłynąć na wzrost obciążenia serwisu.
Image Manager
Dobry edytor WYSIWYG musi być wyposażony w dobry menedżer obrazów. Taka aplikacja składa się z:
- narzędzia do ładowania nowych obrazów na serwer za pośrednictwem przeglądarki,
- menedżera plików pozwalającego przeglądać dodane zdjęcia (w postaci miniaturek) oraz organizować je w foldery,
- narzędzia do obróbki już dodanych zdjęć, który umożliwia ich przeskalowanie (zmianę wymiarów), kadrowanie i ewentualnie oferuje linijkę i funkcję obrotu obrazu.
Image Manager to bezpłatna aplikacja realizująca te trzy założenia. Może pracować samodzielnie lub jako rozszerzenie z edytorami HTMLArea oraz Xinha. Po edycji zdjęcia możliwe jest jego zapisanie w formatach PNG, GIF lub JPG (z ustaloną jakością).
IM został napisany w języku PHP i wymaga wersji 4.3+. Do pracy potrzebna jest również biblioteka graficzna. Może to być GD, NetPBM lub ImageMagick. IM nie wymaga osobnej instalacji.
Z oficjalnej strony możemy pobrać HTMLArea z już zainstalowanym rozszerzeniem Image Manager. W przypadku Xinha IM jest standardowo dostępny w oficjalnej dystrybucji tego edytora.
Instalacja i konfiguracja
Wdrożenie edytora WYSIWYG na stronę WWW nie jest trudne. Instalację prezentujemy na przykładzie HTMLArea z wbudowanym Image Managerem.
Pobieramy ze strony projektu dystrybucję i rozpakowujemy ją na serwerze, tak aby plik htmlarea.js znajdował się w katalogu htmlarea. Katalog htmlarea może być dowolnie zagłębiony w strukturze serwera. Następnie tworzymy katalog, do którego będą ładowane wszystkie zdjęcia dodane za pomocą Image Manager.
Najlepiej by był to katalog w głównej domenie, np. {stala}http://mojadomena.pl/zdjecia/{/stala}. Tak utworzonemu katalogowi musimy przyznać prawa dostępu, wprowadzając polecenie {stala}chmod 777{/stala} zdjecia.
Przystępujemy do konfiguracji Image Managera, edytując plik config.inc.php, znajdujący się w katalogu {stala}/htmlarea/plugins/Image Manager/{/stala}. Do zmiennej {stala}$IMConfig[\’base_dir\’]{/stala} wprowadzamy bezwzględną ścieżkę do katalogu ze zdjęciami, np.:
{stala}/home/users/mojastrona/public_html/zdjecia/{/stala}
Zmienna {stala}$IMConfig[\’base_url\’]{/stala} musi zawierać adres URL do katalogu, czyli: http://mojadomena.pl.
Edytor WYSIWYG zawsze tworzymy w polu typu TEXTAREA, czyli polu tekstowym formularza. Mając gotowy formularz pozbawiony edytora, musimy dokonać w nim drobną zmianę. Polu tekstowemu należy przypisać parametr ID, np.:
Po tej nazwie oprogramowanie edytora rozpozna, który element formularza chcemy zamienić w edytor i uruchomi go w tym miejscu.
Teraz musimy dokonać konfiguracji edytora. Konfiguracja ta zapisana jest w formie skryptów JavaScript, które muszą zostać umieszczone w sekcji head dokumentu HTML. Przykłady jak należy skonfigurować edytor znajdziemy w katalogu examples.
Nasza przykładowa konfiguracja będzie zawierała rozszerzenia: menu kontekstowe, zaawansowane operacje na tabelach oraz Image Manager. Zaimportujemy też szablon CSS, który sformatuje tekst w oknie edytora. W miejsce znacznika {html}
{/html} wprowadzamy:{html}
{/html}Następnie przechodzimy do sekcji head i zaraz po znacznikach meta umieszczamy informację o lokalizacji edytora oraz ładujemy go do pamięci:
Kolejnym krokiem jest załadowanie odpowiednich rozszerzeń. Wykorzystujemy do tego celu funkcję {stala}HTMLArea.loadPlugin{/stala}.
Pozostało już tylko skonfigurować edytor. Tworząc nową instancję klasy HTMLArea podajemy ID pola tekstowego, które ma się zamienić w edytor. Konieczna jest także rejestracja plug-inów. Nie dokonujemy rejestracji Image Manager, ponieważ jest to rozszerzenie zewnętrzne. Kolejno importujemy styl CSS. Pozostałe fragmenty kodu są wymagane do poprawnego działania edytora.
Tym sposobem dokonaliśmy podstawowej instalacji edytora HTMLArea. Przetworzenie formularza HTML przy użyciu PHP będzie odbywało się analogicznie do przypadku, gdy nie mieliśmy do czynienia z edytorem.
W zmiennej {stala}_POST[\’tekst\’]{/stala} znajdzie się kod HTML, który wyprodukuje nasz edytor. Wszystkie obrazy, które zostały wgrane na serwer, tam już pozostaną. W kodzie HTML znajdą się odnośniki do obrazów w postaci bezwzględnej, tj. {stala}http://mojadomena.pl/zdjecia/zdjecie1.jpg{/stala}.
Wady technologiczne
Nawet najlepszy edytor WYSIWYG ma ograniczone możliwości i czasami zawodzi. Język JavaScript nie oferuje pełnej kontroli nad realizowanymi zadaniami. Problemy wynikają głównie z niekompatybilności między przeglądarkami.
Ten sam fragment kodu jest interpretowany w różny sposób, co bardzo często nie jest zgodne z oficjalną specyfikacją. Microsoft bardzo często utrudnia pracę programistom, tworząc własną odmianę (tzw. dialekt) danego języka.
Bywa więc, że sporządzony w edytorze dokument wygląda nieco inaczej, niż po wyświetleniu go w przeglądarce. Problem dotyczy głównie zdjęć. Należy maksymalnie upraszczać strukturę tekstu i poprawnie zaczynać i kończyć bloki tekstu.
Edytory w sieci
http://www.fckeditor.net – FCK Editor
http://www.dynarch.com/projects/htmlarea/ – HTMLArea
http://xinha.python-hosting.com – Xinha
http://tinymce.moxiecode.com – TinyMCE
http://www.zhuo.org/htmlarea/ – Image Manager dla HTMLArea
