--=REKLAMA=--

Porcje

TinyMCE

Z Joomla!WikiPL

Wersja Zwiastun (dyskusja | edycje) z dnia 16:19, 1 mar 2011

(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 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:
15 article tinymce buttons.png

  • 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,


Information.png Zobacz też: Edytor TinyMCE 2.0.