Standardowym edytorem, udostępnianym podczas edycji tekstów zarówno na zapleczu, jak i stronie frontowej jest edytor wizualny TinyMCE.
TinyMCE jest niewielkim, ale zaawansowanym wizualnym edytorem HTML, napisanym w JavaScript, przeznaczonym do wykorzystania na stronach internetowych za pomocą którego użytkownicy - posługując się narzędziami graficznymi znanymi z procesorów tekstu typu MS Word czy OO Writer - mogą bez trudu formatować redagowany tekst oraz osadzać w tekstach różne obiekty (łącza wewnętrzne i zewnętrzne, grafiki, inne media, uśmieszki). TinyMCE umożliwia pracę w dwóch trybach:
- wizualnym (WYSIWYG), w którym użytkownik widzi na ekranie tekst w kształcie zbliżonym lub identycznym do tego, jaki zobaczy w publikacji na witrynie.
- HTML, w którym doświadczeni użytkownicy mogą umieszczać treść kodowaną językiem HTML.
Pasek narzędziowy edytora dostarcza użytkownikom w trzech wierszach wszystkich niezbędnych przyborów:
- Górny wiersz:
- Kolejne przyciski od lewej strony umożliwiają wyróżnienie zaznaczonego tekstu:
- Pogrubienie (Ctrl+B): wytłuszcza zaznaczony tekst lub likwiduje wcześniej pogrubiony tekst.
- Pochylenie (Ctrl+I): nadaje zaznaczonemu tekstowi styl pochylony (kursywa) lub likwiduje pochylenie.
- Podkreślenie (Ctrl+U): podkreśla zaznaczony tekst jedną linią lub likwiduje podkreślenie.
- Przekreślenie: przekreśla zaznaczony tekst lub likwiduje przekreślenie.
- Za nimi znajdują się przyciski wyrównujące bloki tekstu:
- Do lewej: wyrównuje zaznaczony blok tekstu do lewego marginesu.
- Wyśrodkuj: rozmieszcza zaznaczony blok tekstu w środku między lewym i prawym marginesem.
- Do prawej: wyrównuje zaznaczony blok tekstu do prawego marginesu.
- Wyjustuj: wyrównuje zaznaczony blok tekstu do lewego i prawego marginesu).
- Style: ustalają dla zaznaczonego tekstu styl podpisu (Caption) albo tytułu nowej strony wyodrębnionej przyciskiem systemowym Podziel stronę. Zaznacz wybrany tekst, a następnie wybierz odpowiedni styl. Zaznaczony tekst zostanie sformatowany zgodnie z regułami określonymi w arkuszu stylów CSS.
- Formatowanie: ustala funkcję edytowanego bloku tekstu i formatuje zgodnie z regułami CSS określonymi wybranego typu: tekstu wstępnie sformatowanego, akapitu, adresu, nagłówka 1-6 poziomu i innych.
- Rodzina czcionek: zmienia krój czcionki zaznaczonego tekstu. Zaznacz wskaźnikiem myszki fragment, który chcesz wyróżnić czcionką odmiennego kroju i wybierz odpowiadającą Ci rodzinę czcionki.
- Drugi wiersz:
- Wypunktowanie: wstawia lub przekształca zaznaczony blok tekstu w listę nieuporządkowaną (z punktorami).
- Numerowanie: wstawia lub przekształca zaznaczony blok tekstu w listę numerowaną.
- Zmniejsz wcięcie: przesuwa blok tekstu w lewą stronę - zmniejsza wcięcie (przesunięcie w lewo).
- Zwiększ wcięcie: przesuwa blok tekstu w prawą stronę - zwiększa wcięcie (przesunięcie w prawo).
- Przywróć (Ctrl+Z): przywraca stan sprzed ostatnio wykonanej czynności (Cofnij).
- Ponów (Ctrl+Y): powtarza ostatnio wykonaną czynności.
- Wstaw odnośnik: wstawia odnośniki do innych stron, dokumentów lub zakładek wewnątrz redagowanego materiału. Aby wstawić odnośnik, zaznacz tekst, który ma być łączem, a następnie kliknij ikonę. Pojawi się okno dialogowe, w którym podasz szczegóły odnośnika.
- Usuń odnośnik: usuwa wszystkie połączenia (odnośniki) z zaznaczonej części tekstu. Aby usunąć odnośnik, zaznacz tekst łącza, a następnie kliknij ten przycisk.
- Wstaw zakładkę: oznacza w redagowanym materiale miejsce, do którego może prowadzić łącze wewnętrzne.
- Wstaw obrazek: wstawia w zaznaczone miejsce obrazka z dowolnej lokalizacji. Aby wstawić obrazek, umieść kursor w miejscu, w którym chcesz go wyświetlać, a następnie naciśnij ten przycisk. Pojawi się okno dialogowe, w którym podasz adres inne szczegóły prezentacji obrazka.
- Oczyść kod: usuwa kod HTML, np. z tekstów wklejanych z innych źródeł.
- Źródło HTML: otwiera w zwykłym edytorze tekstowym kod źródłowy HTML bieżącego tekstu.
- Znajdź: umożliwia przeszukiwanie tekstu.
- Znajdź i zamień: umożliwia wyszukanie i zastępowanie w tekście dowolnych ciągów znaków.
- Wstaw datę: wstawia bieżącą datę.
- Wstaw czas: wstawia aktualny czas.
- Buźki: wstawia wybraną ikonę emocji.
- Media: osadza media odtwarzane przez: QuickTime, ShockWave, RealPlayer i Windows Media Player. Aby osadzić jakiś obiekt, umieść kursor myszki w wybranym miejscu tekstu, a następnie naciśnij przycisk Media. Zostanie wyświetlone okno dialogowe, w którym dokonasz wyboru medium (podasz adres internetowy) i określenia parametrów prezentacji.
- Kierunek: od lewej do prawej: zmienia kierunek tekstu ustalony globalnie w parametrach edytora.
- Kierunek: od prawej do lewej: zmienia kierunek tekstu ustalony globalnie w parametrach edytora.
- Warstwy: umożliwia tworzenie warstw (dodawanie elementu layer).
- Na wierzch: przesuwa warstwę na górę,
- Pod spód: przemieszcza warstwę na dół,
- Zastosuj pozycjonowanie bezwzględne: umieszcza warstwę w miejscu, w które zostanie przeniesiona.
- Kolor tekstu: umożliwia zmianę barwy zaznaczonego tekstu.
- Trzeci wiersz:
- Linia pozioma: umożliwia wstawienie poziomej linii rozdzielającej.
- Usuń formatowanie: usuwa kod formatujący czcionki.
- Pokaż/Ukryj niewidoczne elementy: pokazuje znaki niewidoczne - znaki końca akapitu, spacji, itp. [Znaki niewidoczne].
- Indeks dolny: przesuwa zaznaczony tekst w dół lub przywraca normalną postać zaznaczonego tekstu.
- Indeks górny: przesuwa zaznaczony tekst w górę lub przywraca normalną postać zaznaczonego tekstu.
- Wstaw znak: umożliwia wstawienie znaków specjalnych - niedostępnych na klawiaturze.
- Linia pozioma: umożliwia wstawienie poziomej linii rozdzielającej i zdefiniowanie jej właściwości.
- Wstawianie tabeli i jej elementów:
- Wstaw tabelę: wstawia tabelę w miejscu kursora.
- Właściwości komórki: umożliwia zmianę właściwości zaznaczonej komórki.
- Właściwości wiersza: umożliwia zmianę właściwości zaznaczonego rzędu.
- Wstaw wiersz powyżej: wstawia rząd komórek ponad aktualnie zaznaczonym.
- Wstaw wiersz poniżej: wstawia rząd komórek poniżej aktualnie zaznaczonego.
- Usuń wiersz: usuwa bieżący wiersz.
- Wstaw kolumnę przed: wstawia kolumnę tabeli przed aktualnie zaznaczoną.
- Wstaw kolumnę za: wstawia kolumnę tabeli za aktualnie zaznaczoną.
- Usuń kolumnę: usuwa bieżącą kolumnę.
- Scal komórki: scala zaznaczone komórki.
- Podziel komórki: przywraca podział zaznaczonej komórki
- Usuń tabelę: usuwa zaznaczoną tabelę.
- Pełny ekran: umożliwia przełączanie się do trybu pełnoekranowego.
- Modyfikuj style CSS: umożliwia włączenie/wyłączenie edytora znacznika style,