--=REKLAMA=--

Porcje35

TinyMCE

Z Joomla!WikiPL

Wersja Zwiastun (dyskusja | edycje) z dnia 13:59, 10 cze 2018

(różn.) ← poprzednia wersja | przejdź do aktualnej wersji (różn.) | następna wersja → (różn.)

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: