Tekst źródłowy strony Porcje35:TinyMCE

<noinclude>{{SpisPoPrawej}}
Standardowym edytorem, udostępnianym podczas edycji tekstów zarówno na zapleczu, jak i stronie frontowej jest [[Szablon:Edytor wizualny|edytor wizualny]] '''TinyMCE'''.

'''TinyMCE''' jest to niewielki, ale zaawansowany edytor wizualny HTML typu WYSIWYG (czyli 'to, co widzisz, dostajesz'), przeznaczony do wykorzystania na stronach internetowych. Za pomocą TinyMCE  użytkownicy mogą bez trudu formatować redagowany tekst oraz osadzać w tekstach różne obiekty, posługując się narzędziami graficznymi znanymi z procesorów tekstu typu ''MS Word'' czy ''OO Writer''.

'''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:

TinyMCE można skonfigurować za pomocą trzech różnych zestawów przycisków paska narzędzi: Zestaw 0, Zestaw 1 i Zestaw 2. Konfiguracji dokonujesz na stronie zaplecza '''Dodatki {{rarr}} Edytor TinyMCE'''.

Najbardziej rozbudowany pasek narzędzi oferuje Zestaw 0. Jest on domyślnie przypisany do grup redaktorów, administratorów i superużytkowników. Zestaw 1 jest nieco uboższy i przypisany domyślnie do grupy operatorów. Natomiast najuboższy zestaw 2 jest przypisany do grupy Wszyscy.  

===Zestaw 0 ===
[[Plik:35_edytor-tinymce_zestaw0.png|700px|Pasek narzędziowy TinyMCE - Najbogatszy zestaw możliwości]]

*'''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).
**'''Formaty''': 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.
**'''Akapit''': 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.
**'''Krój czcionki''': 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.
**'''Rozmiar czcionki''': 
**'''Znajdź i zamień''': umożliwia wyszukanie i zastępowanie w tekście dowolnych ciągów znaków.

*'''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.
**'''Kotwica''': 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.
**'''Kod źródłowy''': otwiera w zwykłym edytorze tekstowym kod źródłowy HTML bieżącego tekstu.
**'''Kolor tekstu''': umożliwia zmianę barwy zaznaczonego tekstu.
**'''Kolor tła''': umożliwia zmianę barwy tła zaznaczonego tekstu.
**'''Pełny ekran''': umożliwia przełączanie się do trybu pełnoekranowego.
**'''Tabela''': umożliwia wstawianie tabeli i jej elementów
**'''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.
*'''Trzeci wiersz''':
**'''Znak specjalny''': umożliwia wstawienie znaków specjalnych - niedostępnych na klawiaturze.
**'''Emotikony''': wstawia wybraną ikonę emocji.
**'''Wstaw/Edytuj media''': umożiiwia wstawienie i dostosowanie wstawionych mediów.
**'''Linia pozioma''': umożliwia wstawienie poziomej linii rozdzielającej i zdefiniowanie jej właściwości.
**'''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.
**'''Wytnij''': 
**'''Kopiuj''': 
**'''Wklej''': 
**'''Wklej jako zwykly tekst''': 
**'''Pokaż niewidoczne znaki''': pokazuje znaki niewidoczne - znaki końca akapitu, spacji, itp. [Znaki niewidoczne].
**'''Pokaż niewidoczne bloki''': 
**'''Niełamliwa spacja''': umożliwia wstawianie spacji nierozdzielającej.
**'''Blok cytatu''': 
**'''Wstaw szablon''':
**'''Drukuj''': 
**'''Podgląd''': 
**'''Wstaw/Dostosuj przykład kodu''': 
**'''Blok cytatu''': 
**'''Wstaw datę/czas''': wstawia bieżącą datę i czas.
**'''Wyczyść formatowanie''': usuwa kod formatujący czcionki.
*'''Czwarty wiersz''':
**'''Moduł''': 
**'''Menu''': 
**'''Kontakt''':
**'''Pole dodatkowe''': 
**'''Artykuł''': 
**'''Grafika''':
**'''Podziel stronę''': 
**'''Więcej''':

===Zestaw 1 ===
[[Plik:35_edytor-tinymce_zestaw1.png|700px|Pasek narzędziowy TinyMCE - Wzbogacony zestaw opcji]]

===Zestaw 2 ===
Domyślna konfiguracji edytora TinyMCE dla wszystkich użytkowników udostępnia jedynie podstawowe opcje. 

[[Plik:35_edytor-tinymce_zestaw2.png|700px|Pasek narzędziowy TinyMCE - Zestaw opcji podstawowych]]

Przyciski dostepne w przyborniku umożliwiają:
* pogrubienie, pochylenie, podkreślenie i przekreślenie czcionki
* cofnięcie (CTRL+Z) i ponowienie operacji (CTRL+Y)
* wstawienie listy nieuporządkowanej i uporządkowanej
* wklejenie jako zwykłego tekstu skopiowanego z innych źródeł.<br>Często podczas kopiowania i wklejania tekstu z innych źródeł, takich jak pliki PDF, dokumenty Word lub strony internetowe, wybrany tekst zawiera niepotrzebne informacje o formatowaniu. Użycie opcji Wklej jako zwykły tekst spowoduje usunięcie całego formatowania z tekstu.
* wykonanie operacji specyficznych dla Joomla: wstawienie modułu, pozycji menu, kontaktu, pola dodatkowego, artykułu, obrazu, podzialu strony oraz podziału na wprowadzenie i tekst  główny.

===Dostępność===
TinyMCE jest kompatybilny z czytnikami ekranu, takimi jak JAWS i NVDA. Możesz go skutecznie używać, nawet jeśli nie używasz myszy. Aby użyć paska narzędzi edytora, użyj następujących skrótów klawiaturowych:

* '''ALT + F9''' - przenieś fokus i przejdź do paska menu
* '''ALT + F10''' - przenieś fokus i przejdź do paska narzędzi
* '''ALT + F11''' - przenieś fokus i przejdź do ścieżki elementów
* '''ESC''' - zamknij menu/podmenu/okno dialogowe (powoduje również powrót do obszaru edytora)
* '''Tab''' / '''Strzałka''' - nawiguj w lewo / w prawo przez menu / pasek narzędzi