MP CMS - System Zarządzania Treścią

Prostota obsługi, wielkie możliwości

AUTORYZACJA!
Dostęp do instrukcji oraz poradników tylko po zalogowaniu. Jeśli jesteś naszym Klientem i nie masz jeszcze dostępu, skontaktuj się z Administratorem.

System Zarządzania Treścią MP CMS korzysta z ogólnodostępnej (darmowej) wersji edytora wizualnego TinyMCE 4.0 oraz kilku rozszerzających jego możliwości wtyczek. Dzięki temu  możliwe jest dostosowanie treści zarówno przez osoby początkujące jak i  przez znające np język HTML. Edytory tego typu umożliwiają  bowiem formatowanie zarówno treści na wzór edytorów komputerowych jak Word / Open Office jak i za pomocą kodu html.

Aby móc używać edytora wizualnego w przeglądarce musi być włączona obsługa Java Script. Edytor może nie działać poprawnie na starszych urządzeniach typu Smartfon / Tablet.

Okno edytora służy to wprowadzania w CMS:

  • Treści Stron (zakładek) umieszczana w Zarządzanie Stronami >> Strona >> Ustawienia Podstawowe
  • Treści Kategorii jeśli treść ta ma się pojawić się nad listą Stron
  • Zawartości Paneli i Modułów w trybie

Edytor

Po otwarciu  jednej z opisanych powyżej zakładek oczom Administratora ukazuje się okno Edytora służące do wprowadzania Treści oraz paski narzędzi z przyciskami i funkcjami odpowiedzialnymi za jej formatowanie. Okno edytora można więc podzielić na 4 części:

[obrazek]

  1. Nawigacja Górna i Paski Narzędzi
  2. Okno Główne
  3. Pasek Statusu Edytora
  4. Niewidocznym na powyższym obrazku elementem jest Menu Kontekstowe dostępne z poziomu prawego przycisku myszy (PPM)

1. Nawigacja Górna i Paski Narzędzi

Umożliwia dostęp do wszystkich funkcji Edytora. W zależności od upodobań piszącego, do funkcji można dostać się za pomocą rozwijanych menu lub też w szybszy sposób przy użyciu bezpośrednich przycisków danej funkcji. Większość użytkowników CMS'a z reguły i tak wykorzystuje tylko podstawowe przyciski i funkcje jak: pogrubienie, kursywa, format akapitu, wstawianie list, wstawianie obrazków. Cała reszta funkcji używana jest sporadycznie lub nawet wcale

Szczegółowy opis funkcji wraz z przykładami zastosowania ich, dostępny będzie w niniejszej instrukcji w sekcji Panel Administracyjny >> Zarządzanie Treścią >> Zarządzanie Stronami >> Edytor Wizualny

Na uwagę dodatkową zasługują jednak dodatkowe elementy dostępne za pomocą przycisku [Elementy], które umożliwiają tworzenie najpopularniejszych ale już bardziej skomplikowanych struktur jak zagnieżdżone kontenery, zagnieżdżone listy, boksy powiadomień czy też obrazki lightbox i generowane z shorttagów konstrukcje. Przycisk ten zawiera dwa typy elementów - podział ten wynika ze sposobu w jaki che się je osiągnąć.

  • Wstaw Element - jak sama nazwa wskazuje, wstawia w miejscu migającego kursora w oknie Edytora Element zdefiniowany i utworzony przy użyciu odpowiedniej funkcji:
    • Wyróżniony Nagłówek - należy go wstawiać poza akapitem, uzupełniając tekst nagłówka i wybierając jego typ. Wyróżniony nagłówek różni się od tradycyjnego tym że można mu od razu zdefiniować kotwicę do której skierujemy linkiem oraz przyjmie wygląd zgodnie z ustawieniami szablonu strony www.
    • Klikalny Telefon - po uzupełnieniu numeru telefonu, umieszczony zostanie on w elemencie liniowym span w określonym miejscu. numer telefonu będzie  klikalny czyli będzie można wybrać numer z poziomu przeglądanej streści.
    • E-mail z Antyspamem - podobnie jak w przypadku telefonu, w treści zostanie umieszczony element liniowy span o odpowiedniej klasie, który zamieni adres e-mail w mail klikalny i zabezpieczony przed spamem. Aby zabezpieczyc e-mail przed spamem należy go podać w formie nazwa[usun-to]domena.pl czyli np: kontakt[usun-to*]@projekty-www.com (bez gwiazdki) co zostanie zamienione na kontakt[usun-to]@projekty-www.com
    • Link Lightbox - link tekstowy do obrazka przechowywanego w danej domenie. Obrazek może być wywołany poprzez link np: Kliknij Tu
    • Obrazek Lightbox - link graficzny gdzie elementem klikalnym będzie inny obrazek. Stosowany często przy umieszczaniu na stronie miniatury obrazka, która po kliknięciu wywoła inny obrazek w innym rozmiarze na zasadzie zbliżonej do Galerii
  • Stylizuj Element - Funkcje kryjące się pod tym przyciskiem odnoszą się do wprowadzonego już tekstu. Dzięki temu wprowadzony już edytorem tekst lub jego elementy można w dowolnym czasie opatrzyć boksem lub dowolną frazę/słowo ze zdania zamienić w przycisk. Wystarczy zaznaczyć myszką fragment a następnie klikając przycisk [Elementy] >> [Stylizuj Zaznaczenie] wybrać interesującą opcję:
    • Kontener Zagnieżdżony - 
    • Lista Zagnieżdżona -
    • Klikalny Telefon -
    • Klikalny E-mail -
    • Link Lightbox -
    • Osadź w Boksie -
    • Zamień w Przycisk -
    Zamiana tekstu w link lub przycisk wymaga dodatkowego dostosowania adresu odnośnika który po utworzeniu dostosować należy za pomoca okna edycji linku  dostępnego w ikonce Wstaw / edytuj link

2. Okno Główne

Okno główne umożliwia wprowadzanie tekstu oraz innych elementów dodatkowych jak kody (ang. shortcodes), obrazki, filmy video, tabele itd. Treść tekstowa może być wpisywana bezpośrednio w oknie Edytora lub też wklejana w programu typu Notatnik czy Word.

 To co warto wiedzieć na temat Okna Edycji w TinyMCE 4 to:

  • Wprowadzamy tu zawartość w na zasadzie edytora tekstu typu Word / Open Office
  • Okno Edycji ma niezmienne wymiary jednak przy dłuższej zawartości Strony pojawia się boczny suwak
  • Przejście w tryb źródła html odbywa się w nowym oknie poprzez ikonkę "<>" Kod Źródłowy
  • Wszystkie elementy blokowe i sekcje html5 są wyróżnione  kropkowaną krawędzią
  • Po kliknięciu w danym miejscu w treści można korzystać ze skrótów klawiszowych m.in.
    • Enter
      • w punkcje listy tworzy nowy punkt lub dzieli istniejący na dwa
      • w akapicie lub kontenerze tworzy nowy wiersz
        Z pewnych względów zamiast oddzielać od siebie fragmentów tekstu w ten sposób, lepiej oddzielić je za pomocą bloków akapitu - każdy akapit "p" ma określone odstępy i marginesy dzięki temu ładnie stylizuje tekst na stronie.
    • 2 x Enter - zamyka tworzoną listę i ustawia kursor za nią. Aby wprowadzać dalej tekst trzeba utworzyć akapit, kontener lub nagłówek.
    • Shift + Enter 
      • w wierszu listy tworzy "twardy enter" czyli przechodzi do nowej linii bez tworzenia nowego punktu
      • w akapicie "p" lub bloku"div" tworzy nowy identyczny element o takiej samej klasie (klasa css)
      • w nagłówku (h) tworzy za nim nowy akapit
      • jeśli strona jest pusta (nowa bez treści) tworzy nowy pusty akapit
    • Ctrl + E - otwiera okno edytora i umieszcza w miejscu w którym znajduje się kursor, wybrany w menedżerze obraz / grafikę
    • Ctrl + F - pozwala wyszukać i zamienić zdefiniowane słowa w tekście
    • Ctrl + A - zaznacza całą treść w oknie Edytora
    • Ctrl + Z - cofa wprowadzoną zmianę
    • Ctrl + Shift + Z - przywraca cofnięta zmianę
  • Po umieszczeniu w treści obrazka można go modyfikować (rozmiar) za pomocą kontrolki przekształceń oraz ustawić za pomocą ikonek wyrównania.

3. Pasek Statusu

 Pasek statusu domyślnie umieszczony jest na dole Edytora. W przypadku obecnie używanej wersji aplikacji dostarcza on dwie przydatne informacje:

  • Po pierwsze z lewej strony znajduje się informacja o ścieżce (ang path) czyli strukturze nagłówków, akapitów i bloków. Dzięki temu piszący widzi czy pisany tekst  znajduje się w
    • nagłówku "h1", "h2", "h3" itd
    • akapicie "p"
    • kontenerze "div"
    • liście niesortowanej "ul"
    • element listy "li"
    • liście sortowanej (numerowanej) "ol"
    • stylu liniowym "span"
    • linku "a"
    • czy jest obrazkiem "img"
    • tabeli "table"
    • wierszu tabeli "tr"
    • komórce tabeli "td"
    Jeśli po kliknięciu w tekst pasek ścieżki jest pusty oznacza to że tekst lub kliknięty element nie znajduje się w żadnym elemencie blokowym czyli przyjmijmy to za poziom 0..
    Wymienione powyżej przypadki są najbardziej prostymi i z reguły najczęściej używanymi podczas tworzenia prostych zakładek (Stron). Może się jednak zdarzyć że konstrukcje które chce osiągnąć Administrator będą wymagały o wiele bardziej skomplikowanych zabiegów do których użyje się albo edytora HTML albo też wykorzysta opcję wstawiania elementów dostępną z poziomu paska narzędzi. Dzięki temu można utworzyć zagnieżdżone elementy (ang. nested) jak kontener "div" w jednym z punktów listy punktowej "ul li" czy też obrazek "img" będący elementem linku "a" umieszczony w jednej z komórek "td" w dużej tabeli "table".

    Każdy kolejny nadrzędny element będzie w pasku ścieżki oddzielony od umieszczonego w nim, za pomocą znaku ">" Tak więc klikając na jakiś fragment tekstu i widząc:
    • (nic) - Wiemy że jesteśmy poza jakimkolwiek elementem, blokiem, akapitem. W tym miejscu można swobodnie umieścić krótki kod (shortcodes) lub utworzyć dopiero akapit czy blok w którym wprowadzi się element tekstowy.
    • p - Wiemy że jesteśmy w akapicie na poziomie ścieżki 1. pisany tekst znajduje się w akapicie a akapit  nie podlega innemu elementowi. Aby teraz utworzyć kolejny akapit należy kliknąć na końcu zdania i skorzystać ze skrótu klawiszowego Shift+Enter, który utworzy nowy pusty akapit za obecnie używanym. Akapity zalecamy wykorzystywać tylko do osadzania w nich tekstu. Akapit nie może zawierać elementów zagnieżdżonych innych niż obrazki "img", linki "a" i elementy stylów liniowych "span".
    • div - Wiemy że jesteśmy w kontenerze które wykorzystywane są do bardziej zaawansowanych konstrukcji niż akapit. kontenerowi można w fazie projektu strony www nadać styl, kolor, ramkę itd. Kontenerem można utworzyć też struktury bardziej zaawansowane jak responsywne boksy czy stylizowane ramki wokół zdjęć - jednak te zabiegi wymagają już znajomości zasad html, css a nawet javascript.
    • div >> a >> img - Wiemy że kliknęliśmy obrazek, który jest częścią jakiegoś odnośnika (linku) a link ten znajduje się w kontenerze. Warto w tym momencie zwrócić uwagę na fakt że linki mogą być zarówno tekstowe jak i obrazkowe. W linku tekstowym odnośnikiem jest słowo/fraza/zdanie a w odnośniku obrazkowym zdjęcie. Sposoby ich tworzenia zostały opisane poniżej.
    • p >> span - Wiemy że kliknęliśmy element liniowy span który znajduje się bezpośrednio w akapicie "p". Elementem takim jest najczęściej fragment tekstu, któremu nadano inny wygląd niż dla całego akapitu  np: kolor, czcionka, nietypowe formatowanie (mail, telefon dostępne z poziomu przycisku [Elementy]).
    • div >> p >> strong - Wiemy że kliknęliśmy pogrubiony [B] tekst umieszczony w akapicie "p", a akapit ten sam lub z seria innych akapitów znajduje się w jakimś kontenerze "div".
    Jeśli tekst został w jakiś sposób wystylizowany np pogrubienie [B], kursywa [I], podkreślenie [U], to także zostanie to zaznaczone w pasku ścieżki.
    Informacja o tym w jakim miejscu ścieżki jest kliknięty element, jest o tyle istotna że pozwala od razu kontrolować czy podczas tworzenia treści Strony nie dopuściliśmy się błędów w składni języka HTML, oraz czy miejsce w którym planujemy coś wstawić jest do tego przystosowane. J
    ak będzie wspomniane poniżej, kodów (shortcodes) nie wolno umieszczać w akapicie "p" - tylko na poziomie 0 ścieżki, a z kolei akapit nie może zawierać zagnieżdżonej w nim listy czy kontenera - o czym tez będzie w dziale Uwagi poniżej.
  • Po drugie z prawej strony znajduje się licznik słów (domyślnie włączony). Jest to przydatne narzędzie zliczające w przypadku gdy zależy komuś by materiał tekstowy (np recenzja) była dłuższa niż 1000 słów. Zliczone zostają tylko słowa widoczne w oknie Edytora z wyłączeniem słów składających się na kod HTML (widoczne w źródle strony).

4. Menu Kontekstowe

 Menu kontekstowe podobnie jak górny pasek narzędzi pozwala w szybki sposób umieścić w miejscu kliknięcia jeden z przypisanych do niego elementów jak: link, obrazek, tabela. Wiersz lub kolumnę tabeli można wstawić tylko jeśli klikniemy prawym przyciskiem myszy (PPM) w obrębie tabeli na wybranej komórce "td".

Wybranie opcji Usuń Tabelę skasuje całą tabelę do której należy dana komórka, wraz ze wszystkimi danymi zawartymi w tej tabeli.

Menedżer Plików

Menedżer Plików nie jest elementem Edytora TinyMCE ale dzięki integracji tych dwóch skryptów rozszerza jego możliwości.

 

Źródło Strony

 

Uwagi

Korzystanie z Edytora Wizualnego mimo prostoty obsługi wymaga przestrzegania kilku zasad. Zasady te opisaliśmy poniżej w podziałem na dwa kolory. Zielone służące za podpowiedzi i czerwone mające zwrócić uwagę na to czego nie wolno robić gdyż może to wpłynąć negatywnie na konstrukcje nie tylko treści ale i całej zakładki.

Korzystając z edytora źródła proszę pamiętać aby domykać wszystkie tagi html. Niedomknięcie któregoś z tagów skutkować może nie utworzeniem elementu go wykorzystującego lub też uszkodzić szablon.
Nie należy umieszczać żadnych elementów blokowych wewnątrz akapitu. Akapit powinien zawierać tylko tekst w takimi elementami jak element liniowe "span", linki "a" oraz stylizowane teksty za pomocą pogrubienia,  kursywy czy podkreślenia
Nie należy umieszczać żadnych elementów z wyjątkiem linku tekstowego "a" w bloku nagłówka h1, h2 itd
Kody (ang. shortcodes) nie mogą być umieszczone w elemencie typu nagłówek czy akapit. Umieszczając je upewnić się należy że ścieżka w Pasku Statusu Edytora wskazuje poziom 0 (pusty) albo co najwyżej kontener "div".
Pisząc lub wstawiając Kody (shortcode) należy się upewnić że kod napisano prawidłowo bez spacji i odstępów wewnątrz nawiasów kwadratowych [ i ]
Tworząc linki w kodzie HTML lub poprzez funkcje Wstaw Link, linki do stron wewnątrz strony (nie zaczynające się od http://) zalecamy poprzedzać znakiem ukośnika "/" czyli adres z http podawać na zasadzie "http://domena.pl" ale adresy wewnętrzne już jako "/kontakt" czy "/adres-zakładki"
Za pomocą tradycyjnych funkcji tworzenia kontenera czy akapitu czyli Formaty > Bloki nie ma możliwości wstawiania tych elementów wewnątrz siebie. Kliknięcie na akapicie bloku kontenera zamienić akapit "p" w kontener "div" i odwrotnie.
Elementy typu kolorowy boks, przycisk czy link lightbox można tworzyć na kilka sposobów w zależności od kolejności w jakiej chcemy te elementy osiągnąć.
Powielenie danego bloku akapitu / kontenera skrótem Shift+Enter sprawi że nowy element utworzony za nim lub wynikający z podzielenia poprzedniego przyjmie klasę poprzedniego elementu oraz style formatowania - np wyrównanie, pogrubienie etc. Aby to zresetować należy powyłączać je za pomocą odpowiednich przycisków w pasku narzędzi
Tworząc element linku "a" należy zawsze podać wartość dla linku chociażby umieszczając w atrybucie href wartość "#" albo "javascript:void(0)". W przeciwnym razie link nie zostanie utworzony
Tworząc link za pomocą Elementy > Stylizuj zaznaczenie > Link Lightbox należy po utworzeniu linku kliknąć ikonę linku a następnie zastąpić "#" adresem www.
Wstawiając obrazki za pomocą funkcji "Wstaw / edytuj obrazek" nie ma możliwości zdefiniowania tylko jednego marginesu - czyli na przykład odstęp od tekstu w jednej strony. Aby to zrobić należy przełączyć się w tryb Źródła Strony.
Nie ma możliwości wstawienia listy wewnątrz innej listy za pomocą ikony Listy. Aby wpisany tekst zamienić na listę zagnieżdżoną w innej liście lub w innym kontenerze
Skorzystanie z Formaty > Nadaj Usuń klasę na elemencie mającym już  daną klasę - usunie ją z tego elementu.

Porady

Wymagana Autoryzacja

Dostęp do tej treści tylko dla zalogowanych użytkowników