--=REKLAMA=--

Porcje35

TinyMCE: Różnice pomiędzy wersjami

Z Joomla!WikiPL

(Uzupełnienie)
(Uzupełnienie)
 
Linia 4: Linia 4:
 
'''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''' 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''.
  
 +
=== Dwa tryby pracy ===
 
'''TinyMCE''' umożliwia pracę w dwóch trybach:
 
'''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.
 
* 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.
 
* 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'''.
+
===Dostępność===
 +
Twórcy edytora TinyMCE zadbali o jego dostępność, w tym kompatybilność z czytnikami ekranu, takimi jak NVDA i JAWS oraz innymi technologiami wspomagajacymi. Do wszystkim opcji edytora masz dostęp nie tylko za pomoca wskaźnika myszki czy dotyku, ale także wóczas, gdy poslugujesz się tylko klawiaturą.
 +
 
 +
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
 +
 
 +
=== Trzy wstępnie skonfigurowane zestawy opcji ===
 +
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 [[Pomoc35:Dodatek:_Edytor_-_TinyMCE| 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.   
 
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 ===
+
Dokładniejsze charakterystyki wszystkich opcji znajdziesz w opisie najbogatszego Zestawu 0 w dalszej części.
 +
 
 +
=== Zestaw podstawowy - Zestaw 2 ===
 +
Zestaw podstawowy przeznaczony jest domyślnie dla wszystkich użytkowników. Oczywiście, można go przypisać także innym grupom, np. użytkownikom zarejestrowanym, jeśli nie przypiszemy im innego zestawu.
 +
 
 +
[[Plik:35_edytor-tinymce_zestaw2.png|700px|Pasek narzędziowy TinyMCE - Zestaw opcji podstawowych]]
 +
 
 +
Przyciski dostepne w przyborniku podstawowego zestawu 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ł.
 +
* 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.
 +
 
 +
==== Zestaw wzbogacony - Zestaw 1 ====
 +
Zestaw 1 oferuje w pasku narzędziowym menu edytora i bogatszy zestaw przycisków przeznaczonych dla użytkowników zarejestrowanych (a więc także dla autorów i wydawców) oraz operatorów.
 +
 
 +
[[Plik:35_edytor-tinymce_zestaw1.png|700px|Pasek narzędziowy TinyMCE - Wzbogacony zestaw opcji]]
 +
 
 +
* w pierwszym wierszu znajduje się menu udostępniające polecenia pogrupowane pod pozycjami: '''Edycja''', '''Wstaw''', '''Widok''', '''Format''', '''Tabela''' i '''Narzędzia'''
 +
* poniżej mamy najpierw grupę przycisków formatujących znaki (Pogrubienie, Pochylenie, Podkreślenie, Przekreślenie), następnie opcje wyrównania tekstu (do lewej, do prawej, do środka, do lewej i prawej), potem opcje oznaczające bloki tekstu jako akapity, nagłówki, tekst sformatowany, listy nieuporządkowanej i uporządkowanej, przyciski zmniejszające i zwiększajace wcięcie tekstu,
 +
* potem mamy opcje '''Cofnij''' i '''Ponów''' operację, przyciski umożliwiajace wstawianie i dostosowanie odnośników, usuwanie odnośników, wstawianie identyfikatorów kotwic, wstawianie kodu źródłowego, poziomej linii, tabeli i jej elementów, przenoszenie tekstu do indeksu górnego lub dolnego, wstawianie znakow specjalnych, wklejanie skopiowanego tekstu jako zwykłego oraz przycisk '''Podgląd''',
 +
* ostanią jest grupa przycisków udostępniających opcje specjalne dla Joomla: stawianei modułu, pozycji menu, kontaktu, pola dodatkowego, artykułu, grafiki, podziału strony oraz podziału '''Czytaj więcej''' na tekst wprowadzajacy i tekst zasadniczy.
 +
 
 +
==== Zestaw kompletny -  Zestaw 0 ====
 +
Wszystkie opcje menu i przyciski edytora dostępne są w Zestawie 0 przeznaczonym dla superużytkowników, administratorów i redaktorów.
 
[[Plik:35_edytor-tinymce_zestaw0.png|700px|Pasek narzędziowy TinyMCE - Najbogatszy zestaw możliwości]]
 
[[Plik:35_edytor-tinymce_zestaw0.png|700px|Pasek narzędziowy TinyMCE - Najbogatszy zestaw możliwości]]
  
 
*'''Górny wiersz''':
 
*'''Górny wiersz''':
**Kolejne przyciski od lewej strony umożliwiają wyróżnienie zaznaczonego tekstu:
+
** Grupa 1. Przyciski w pierwszej grupie umożliwiają wyróżnienie zaznaczonego tekstu:
 
***'''Pogrubienie (Ctrl+B)''': wytłuszcza zaznaczony tekst lub likwiduje wcześniej pogrubiony tekst.
 
***'''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.
 
***'''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.
 
***'''Podkreślenie (Ctrl+U)''': podkreśla zaznaczony tekst jedną linią lub likwiduje podkreślenie.
 
***'''Przekreślenie''': przekreśla zaznaczony tekst lub likwiduje przekreślenie.
 
***'''Przekreślenie''': przekreśla zaznaczony tekst lub likwiduje przekreślenie.
**Za nimi znajdują się przyciski wyrównujące bloki tekstu:
+
**Grupa 2. Za nimi znajdują się przyciski wyrównujące bloki tekstu. Umieść kursor w bloku tekstu, który chcesz wyrównać i użyj odpowiedniego przycisku:
 
***'''Do lewej''': wyrównuje zaznaczony blok tekstu do lewego marginesu.
 
***'''Do lewej''': wyrównuje zaznaczony blok tekstu do lewego marginesu.
 
***'''Wyśrodkuj''': rozmieszcza zaznaczony blok tekstu w środku między lewym i prawym marginesem.
 
***'''Wyśrodkuj''': rozmieszcza zaznaczony blok tekstu w środku między lewym i prawym marginesem.
 
***'''Do prawej''': wyrównuje zaznaczony blok tekstu do prawego marginesu.
 
***'''Do prawej''': wyrównuje zaznaczony blok tekstu do prawego marginesu.
***'''Wyjustuj''': wyrównuje zaznaczony blok tekstu do lewego i prawego marginesu).
+
***'''Do lewej i prawej''': 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.
+
**Grupa 3. Znajdują się tutaj cztery rozwijane listy opcji:
**'''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.
+
***'''Formaty''': umożliwia ustalenie formatu zaznaczonego tekstu lub bloku tekstu: określenie poziomu nagłówka, oznaczenie bloku jako akapitu, cytatu, sformatowego tekstu, bloku ''div'', wyrównanie bloku tekstu oraz oznaczenie tekstu jako podpisu (opcja ''hr.system-pagebreak'' nie dziala). Zaznacz wybrany tekst lub blok tekstu, a następnie wybierz odpowiedni format. Zaznaczony tekst zostanie sformatowany zgodnie z regułami określonymi w arkuszu stylów CSS.
**'''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.
+
***'''Akapit''': ustala rolę edytowanego bloku tekstu (bloku, w którym aktualnie znajduje się kursor) i formatuje go zgodnie z regułami określonymi w arkuszach CSS: akapitu, nagłówka 1-6 poziomu, tekstu sformatowanego.  
**'''Rozmiar czcionki''':  
+
***'''Krój czcionki''': zmienia krój czcionki zaznaczonego tekstu. Zaznacz fragment, który chcesz wyróżnić czcionką odmiennego kroju i wybierz odpowiadającą Ci rodzinę czcionki.
**'''Znajdź i zamień''': umożliwia wyszukanie i zastępowanie w tekście dowolnych ciągów znaków.
+
***'''Rozmiar czcionki''': zmienia rozmiar zaznaczonego tekstu. . Zaznacz fragment, który chcesz wyróżnić czcionką o innym rozmiarze i wybierz odpowiadni rozmiar.
 
+
***'''Znajdź i zamień''': otwiera okno i umożliwia wyszukiwanie w tekście dowolnych ciągów znaków i zastępowanie ich innymi.
 
*'''Drugi wiersz''':
 
*'''Drugi wiersz''':
**'''Wypunktowanie''': wstawia lub przekształca zaznaczony blok tekstu w listę nieuporządkowaną (z punktorami).
+
**Grupa 4. Przyciski w tej grupie umożliwiają:
**'''Numerowanie''': wstawia lub przekształca zaznaczony blok tekstu w listę numerowaną.
+
***'''Wypunktowanie''': wstawia lub przekształca zaznaczony blok tekstu w listę nieuporządkowaną (z punktorami). Do wyboru mamy kólko, dysk i kwadrat.
**'''Zmniejsz wcięcie''': przesuwa blok tekstu w lewą stronę - zmniejsza wcięcie (przesunięcie w lewo).
+
***'''Numerowanie''': wstawia lub przekształca zaznaczony blok tekstu w listę numerowaną. Do wyboru mamy różne style porządkowania.
**'''Zwiększ wcięcie''': przesuwa blok tekstu w prawą stronę - zwiększa wcięcie (przesunięcie w prawo).
+
***'''Zmniejsz wcięcie''': przesuwa w lewą stronę blok tekstu, w którym znajduje się kursor - zmniejsza wcięcie (przesunięcie w lewo).
**'''Przywróć (Ctrl+Z)''': przywraca stan sprzed ostatnio wykonanej czynności (Cofnij).
+
***'''Zwiększ wcięcie''': przesuwa w prawą stronę blok tekstu, w którym znajduje się kursor - zwiększa wcięcie (przesunięcie w prawo).
**'''Ponów (Ctrl+Y)''': powtarza ostatnio wykonaną czynności.
+
**Grupa 5. Zawiera przyciski:
**'''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.
+
***'''Przywróć (Ctrl+Z)''': przywraca stan sprzed ostatnio wykonanej czynności (Cofnij).
**'''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.
+
***'''Ponów (Ctrl+Y)''': powtarza ostatnio wykonaną czynności.
**'''Kotwica''': oznacza w redagowanym materiale miejsce, do którego może prowadzić łącze wewnętrzne.
+
***'''Wstaw/Dostosuj 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 naciśnij ten przycisk. Pojawi się okno dialogowe, w którym podasz szczegóły odnośnika. Aby poprawić istniejacy odnośnik, zaznacz go i naciśnij ten przycisk.
**'''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.
+
***'''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.
**'''Kod źródłowy''': otwiera w zwykłym edytorze tekstowym kod źródłowy HTML bieżącego tekstu.
+
***'''Kotwica''': oznacza w redagowanym materiale miejsce, do którego może prowadzić łącze wewnętrzne. Ustaw kursor w wybranym miejscu i naciśnij ten przycisk. W oknie dialogowym wpisz identyfikator kotwicy - dowolny, unikalny ciąg znaków.
**'''Kolor tekstu''': umożliwia zmianę barwy zaznaczonego tekstu.
+
***'''Wstaw / Dostosuj obrazek''': wstawia w zaznaczone miejsce obrazek 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 oraz inne szczegóły prezentacji obrazka.
**'''Kolor tła''': umożliwia zmianę barwy tła zaznaczonego tekstu.
+
***'''Kod źródłowy''': umożliwia podgląd i skorygowanie kodu źródłowego HTML zaznacznego fragmentu.  
**'''Pełny ekran''': umożliwia przełączanie się do trybu pełnoekranowego.
+
***'''Kolor tekstu''': umożliwia zmianę barwy zaznaczonego tekstu. Zanzacz tekst i naciśnij przycisk, a następnie wybierz kolor z palety.
**'''Tabela''': umożliwia wstawianie tabeli i jej elementów
+
***'''Kolor tła''': umożliwia zmianę barwy tła zaznaczonego tekstu. Zanzacz tekst i naciśnij przycisk, a następnie wybierz kolor z palety.
**'''Indeks dolny''': przesuwa zaznaczony tekst w dół lub przywraca normalną postać zaznaczonego tekstu.
+
***'''Pełny ekran''': umożliwia przełączanie się do trybu pełnoekranowego.
**'''Indeks górny''': przesuwa zaznaczony tekst w górę lub przywraca normalną postać zaznaczonego tekstu.
+
***'''Tabela''': umożliwia wstawianie tabeli i jej elementów. Ustaw kursor w miejscu, w któym chcesz wstawić tabelę albo ją zmodyfikowac i posłuż się opcjami, które udostępnia przycisk.
 +
***'''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''':
 
*'''Trzeci wiersz''':
**'''Znak specjalny''': umożliwia wstawienie znaków specjalnych - niedostępnych na klawiaturze.
+
** Grupa 1. Zawiera następujące przyciski:
**'''Emotikony''': wstawia wybraną ikonę emocji.
+
***'''Znak specjalny''': umożliwia wstawienie znaków specjalnych - niedostępnych na klawiaturze.
**'''Wstaw/Edytuj media''': umożiiwia wstawienie i dostosowanie wstawionych mediów.
+
***'''Buźki''': wstawia wybraną ikonę emocji.
**'''Linia pozioma''': umożliwia wstawienie poziomej linii rozdzielającej i zdefiniowanie jej właściwości.
+
***'''Wstaw/Dostosuj 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.
 +
** Grupa 2. Przyciski udostępniają następujące możliwości:
 
**'''Kierunek: od lewej do prawej''': zmienia kierunek tekstu ustalony globalnie w parametrach edytora.
 
**'''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.
 
**'''Kierunek: od prawej do lewej''': zmienia kierunek tekstu ustalony globalnie w parametrach edytora.
**'''Wytnij''':  
+
**'''Wytnij''': usuwa zaznaczony tekst; usunięty tekst jest pzechowywany w schowku
**'''Kopiuj''':  
+
**'''Kopiuj''': kopiuje zaznaczony tekst; skopiowany tekst jest pzechowywany w schowku
**'''Wklej''':  
+
**'''Wklej''': wkleja w zaznaczone miejsce tekst przechowywany aktualnie w schowku
**'''Wklej jako zwykly tekst''':  
+
**'''Wklej jako zwykly tekst''': Podczas kopiowania i wklejania tekstu z innych źródeł, takich jak pliki PDF, dokumenty Word lub strony internetowe, wybrany tekst zawiera zwykle niepotrzebne informacje o formatowaniu. Informacje te mogą niekiedy zniszczyć wygląd strony. Użycie opcji '''Wklej jako zwykły tekst''' spowoduje usunięcie całego formatowania z tekstu.
**'''Pokaż niewidoczne znaki''': pokazuje znaki niewidoczne - znaki końca akapitu, spacji, itp. [Znaki niewidoczne].
+
**'''Pokaż niewidoczne znaki''': pokazuje znaki niewidoczne - znaki końca akapitu, spacji, itp.
 
**'''Pokaż niewidoczne bloki''':  
 
**'''Pokaż niewidoczne bloki''':  
 
**'''Niełamliwa spacja''': umożliwia wstawianie spacji nierozdzielającej.
 
**'''Niełamliwa spacja''': umożliwia wstawianie spacji nierozdzielającej.
Linia 82: Linia 123:
 
**'''Podziel stronę''':  
 
**'''Podziel stronę''':  
 
**'''Więcej''':
 
**'''Więcej''':
 
===Zestaw 1 ===
 
Wstępnie skonfigurowany Zestaw 1 oferuje w prasku narzędziowym menu edytora i bogatszy zestaw przycisków.
 
 
[[Plik:35_edytor-tinymce_zestaw1.png|700px|Pasek narzędziowy TinyMCE - Wzbogacony zestaw opcji]]
 
 
* w pierwszym wierszu znajduje się menu udostępniające polecenia pogrupowane pod pozycjami: '''Edycja''', '''Wstaw''', '''Widok''', '''Format''', '''Tabela''' i '''Narzędzia'''
 
* poniżej mamy najpierw grupę przycisków formatujących znaki (Pogrubienie, Pochylenie, Podkreślenie, Przekreślenie), następnie opcje wyrównania tekstu (do lewej, do prawej, do środka, do lewej i prawej), potem opcje oznaczające bloki tekstu jako akapity, nagłówki, tekst sformatowany, listy nieuporządkowanej i uporządkowanej, przyciski zmniejszające i zwiększajace wcięcie tekstu,
 
* potem mamy opcje '''Cofnij''' i '''Ponów''' operację, przyciski umożliwiajace wstawianie i dostosowanie odnośników, usuwanie odnośników, wstawianie identyfikatorów kotwic, wstawianie kodu źródłowego, poziomej linii, tabeli i jej elementów, przenoszenie tekstu do indeksu górnego lub dolnego, wstawianie znakow specjalnych, wklejanie skopiowanego tekstu jako zwykłego oraz przycisk '''Podgląd''',
 
* ostanią jest grupa przycisków udostępniających opcje specjalne dla Joomla: stawianei modułu, pozycji menu, kontaktu, pola dodatkowego, artykułu, grafiki, podziału strony oraz podziału '''Czytaj więcej''' na tekst wprowadzajacy i tekst zasadniczy.
 
 
===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
 

Aktualna wersja na dzień 13:59, 10 cze 2018

Standardowym edytorem, udostępnianym podczas edycji tekstów zarówno na zapleczu, jak i stronie frontowej jest 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.

Dwa tryby pracy

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.

Dostępność

Twórcy edytora TinyMCE zadbali o jego dostępność, w tym kompatybilność z czytnikami ekranu, takimi jak NVDA i JAWS oraz innymi technologiami wspomagajacymi. Do wszystkim opcji edytora masz dostęp nie tylko za pomoca wskaźnika myszki czy dotyku, ale także wóczas, gdy poslugujesz się tylko klawiaturą.

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

Trzy wstępnie skonfigurowane zestawy opcji

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    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.

Dokładniejsze charakterystyki wszystkich opcji znajdziesz w opisie najbogatszego Zestawu 0 w dalszej części.

Zestaw podstawowy - Zestaw 2

Zestaw podstawowy przeznaczony jest domyślnie dla wszystkich użytkowników. Oczywiście, można go przypisać także innym grupom, np. użytkownikom zarejestrowanym, jeśli nie przypiszemy im innego zestawu.

Pasek narzędziowy TinyMCE - Zestaw opcji podstawowych

Przyciski dostepne w przyborniku podstawowego zestawu 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ł.
  • 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.

Zestaw wzbogacony - Zestaw 1

Zestaw 1 oferuje w pasku narzędziowym menu edytora i bogatszy zestaw przycisków przeznaczonych dla użytkowników zarejestrowanych (a więc także dla autorów i wydawców) oraz operatorów.

Pasek narzędziowy TinyMCE - Wzbogacony zestaw opcji

  • w pierwszym wierszu znajduje się menu udostępniające polecenia pogrupowane pod pozycjami: Edycja, Wstaw, Widok, Format, Tabela i Narzędzia
  • poniżej mamy najpierw grupę przycisków formatujących znaki (Pogrubienie, Pochylenie, Podkreślenie, Przekreślenie), następnie opcje wyrównania tekstu (do lewej, do prawej, do środka, do lewej i prawej), potem opcje oznaczające bloki tekstu jako akapity, nagłówki, tekst sformatowany, listy nieuporządkowanej i uporządkowanej, przyciski zmniejszające i zwiększajace wcięcie tekstu,
  • potem mamy opcje Cofnij i Ponów operację, przyciski umożliwiajace wstawianie i dostosowanie odnośników, usuwanie odnośników, wstawianie identyfikatorów kotwic, wstawianie kodu źródłowego, poziomej linii, tabeli i jej elementów, przenoszenie tekstu do indeksu górnego lub dolnego, wstawianie znakow specjalnych, wklejanie skopiowanego tekstu jako zwykłego oraz przycisk Podgląd,
  • ostanią jest grupa przycisków udostępniających opcje specjalne dla Joomla: stawianei modułu, pozycji menu, kontaktu, pola dodatkowego, artykułu, grafiki, podziału strony oraz podziału Czytaj więcej na tekst wprowadzajacy i tekst zasadniczy.

Zestaw kompletny - Zestaw 0

Wszystkie opcje menu i przyciski edytora dostępne są w Zestawie 0 przeznaczonym dla superużytkowników, administratorów i redaktorów. Pasek narzędziowy TinyMCE - Najbogatszy zestaw możliwości

  • Górny wiersz:
    • Grupa 1. Przyciski w pierwszej grupie 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.
    • Grupa 2. Za nimi znajdują się przyciski wyrównujące bloki tekstu. Umieść kursor w bloku tekstu, który chcesz wyrównać i użyj odpowiedniego przycisku:
      • 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.
      • Do lewej i prawej: wyrównuje zaznaczony blok tekstu do lewego i prawego marginesu).
    • Grupa 3. Znajdują się tutaj cztery rozwijane listy opcji:
      • Formaty: umożliwia ustalenie formatu zaznaczonego tekstu lub bloku tekstu: określenie poziomu nagłówka, oznaczenie bloku jako akapitu, cytatu, sformatowego tekstu, bloku div, wyrównanie bloku tekstu oraz oznaczenie tekstu jako podpisu (opcja hr.system-pagebreak nie dziala). Zaznacz wybrany tekst lub blok tekstu, a następnie wybierz odpowiedni format. Zaznaczony tekst zostanie sformatowany zgodnie z regułami określonymi w arkuszu stylów CSS.
      • Akapit: ustala rolę edytowanego bloku tekstu (bloku, w którym aktualnie znajduje się kursor) i formatuje go zgodnie z regułami określonymi w arkuszach CSS: akapitu, nagłówka 1-6 poziomu, tekstu sformatowanego.
      • Krój czcionki: zmienia krój czcionki zaznaczonego tekstu. Zaznacz fragment, który chcesz wyróżnić czcionką odmiennego kroju i wybierz odpowiadającą Ci rodzinę czcionki.
      • Rozmiar czcionki: zmienia rozmiar zaznaczonego tekstu. . Zaznacz fragment, który chcesz wyróżnić czcionką o innym rozmiarze i wybierz odpowiadni rozmiar.
      • Znajdź i zamień: otwiera okno i umożliwia wyszukiwanie w tekście dowolnych ciągów znaków i zastępowanie ich innymi.
  • Drugi wiersz:
    • Grupa 4. Przyciski w tej grupie umożliwiają:
      • Wypunktowanie: wstawia lub przekształca zaznaczony blok tekstu w listę nieuporządkowaną (z punktorami). Do wyboru mamy kólko, dysk i kwadrat.
      • Numerowanie: wstawia lub przekształca zaznaczony blok tekstu w listę numerowaną. Do wyboru mamy różne style porządkowania.
      • Zmniejsz wcięcie: przesuwa w lewą stronę blok tekstu, w którym znajduje się kursor - zmniejsza wcięcie (przesunięcie w lewo).
      • Zwiększ wcięcie: przesuwa w prawą stronę blok tekstu, w którym znajduje się kursor - zwiększa wcięcie (przesunięcie w prawo).
    • Grupa 5. Zawiera przyciski:
      • Przywróć (Ctrl+Z): przywraca stan sprzed ostatnio wykonanej czynności (Cofnij).
      • Ponów (Ctrl+Y): powtarza ostatnio wykonaną czynności.
      • Wstaw/Dostosuj 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 naciśnij ten przycisk. Pojawi się okno dialogowe, w którym podasz szczegóły odnośnika. Aby poprawić istniejacy odnośnik, zaznacz go i naciśnij ten przycisk.
      • 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. Ustaw kursor w wybranym miejscu i naciśnij ten przycisk. W oknie dialogowym wpisz identyfikator kotwicy - dowolny, unikalny ciąg znaków.
      • Wstaw / Dostosuj obrazek: wstawia w zaznaczone miejsce obrazek 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 oraz inne szczegóły prezentacji obrazka.
      • Kod źródłowy: umożliwia podgląd i skorygowanie kodu źródłowego HTML zaznacznego fragmentu.
      • Kolor tekstu: umożliwia zmianę barwy zaznaczonego tekstu. Zanzacz tekst i naciśnij przycisk, a następnie wybierz kolor z palety.
      • Kolor tła: umożliwia zmianę barwy tła zaznaczonego tekstu. Zanzacz tekst i naciśnij przycisk, a następnie wybierz kolor z palety.
      • Pełny ekran: umożliwia przełączanie się do trybu pełnoekranowego.
      • Tabela: umożliwia wstawianie tabeli i jej elementów. Ustaw kursor w miejscu, w któym chcesz wstawić tabelę albo ją zmodyfikowac i posłuż się opcjami, które udostępnia przycisk.
      • 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:
    • Grupa 1. Zawiera następujące przyciski:
      • Znak specjalny: umożliwia wstawienie znaków specjalnych - niedostępnych na klawiaturze.
      • Buźki: wstawia wybraną ikonę emocji.
      • Wstaw/Dostosuj 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.
    • Grupa 2. Przyciski udostępniają następujące możliwoś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: usuwa zaznaczony tekst; usunięty tekst jest pzechowywany w schowku
    • Kopiuj: kopiuje zaznaczony tekst; skopiowany tekst jest pzechowywany w schowku
    • Wklej: wkleja w zaznaczone miejsce tekst przechowywany aktualnie w schowku
    • Wklej jako zwykly tekst: Podczas kopiowania i wklejania tekstu z innych źródeł, takich jak pliki PDF, dokumenty Word lub strony internetowe, wybrany tekst zawiera zwykle niepotrzebne informacje o formatowaniu. Informacje te mogą niekiedy zniszczyć wygląd strony. Użycie opcji Wklej jako zwykły tekst spowoduje usunięcie całego formatowania z tekstu.
    • Pokaż niewidoczne znaki: pokazuje znaki niewidoczne - znaki końca akapitu, spacji, itp.
    • 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: