Edytor Joomla wycina puste znaczniki HTML

Edytor Joomla wycina puste znaczniki HTML

Kiedy w artykule lub module typu własny HTML próbujesz umieścić znacznik zawierający spację, aby na przykład wyświetlić grafikę (ikonkę) zdefiniowaną w plikach CSS zastosowanego szablonu, Twój edytor uparcie wycina ten fragment. To mocno wkurzające, zwłaszcza dla początkującego webmastera!

Załóżmy, że Twój szablon oparty jest na szablonach Joomla-Monster. Aby przykład był możliwy do sprawdzenia dla każdego, będę bazował na darmowym szablonie JM-Services i frameworku EF4. Jak za pomocą tego frameworka i szablonu bazowego tworzyć własne szablony dowiesz się z mojego ebooka: Kurs Joomla! Jak stworzyć własny szablon do Joomla! EF4.

Twórcy szablonu JM-Services utworzyli style dla trzech bardzo efektownie animowanych modułów (tzw. Color Boxes). W wersji demonstracyjnej znajdują się one zaraz pod sliderem.

Moduły Color Box w szablonie JM-Services

Aby je zastosować w swoim serwisie należy utworzyć nowy moduł typu Własny HTML (menu Rozszerzenia -> Moduły). W polu Tytuł wpisujesz tytuł swojego modułu, a następnie w edytorze klikasz przycisk Kod źródłowy.

Tworzenie nowego modułu Color Box w szablonie JM-Services

W oknie modalnym wklejasz kod pokazany poniżej, a następnie zmieniasz wpisy w odpowiednich miejscach:

<p style="margin: 0;">
<a class="jm-color-box1 text-center" href="/#">
<span class="jm-icon-title">
TIME MACHINE
</span>
<span class="jm-icon-image"> </span>
<span class="jm-icon-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
</span>
</a>
</p>

Po opublikowaniu i zapisaniu tego modułu, edytor wytnie ten fragment, który zawiera tylko spację.

Zobacz, jak wygląda kod przed zapisaniem:

Kod modułu Color Box przed zapisaniem

A tak po zapisaniu:

Kod modułu Color Box po zapisaniu

Efekt będzie taki, że na stronie w module nie pojawi się odpowiednia grafika:

Wygląd modułu Color Box po usunięciu przez edytor fragmentu kodu

Aby domyślny edytor TinyMCE nie wycinał znaczników HTML zawierających spacje należy rozszerzyć zestaw znaczników stosowanych przez ten edytor. To co trzeba zrobić jest niesamowicie proste!

Edytuj dodatek Edytor - TinyMCE (menu Rozszerzenia -> Dodatki), a następnie w polu Elementy rozszerzające wpisz: span[*]

Zmiana ustawień edytora TinyMCE w celu wyeliminowania usuwania znaczników zawierających spacje

Na koniec zapisz wprowadzone zmiany klikając przycisk Zapisz i zamknij a następnie sprawdź, czy edytor nie ucina znaczników span, które zawierają tylko spację. Teraz powinno być wszystko OK ;-)

Ważna uwaga!

Pamiętaj, że jeżeli w Twoim przypadku stosowany jest inny znacznik, np. div, to w polu Elementy rozszerzające wpisujesz: div[*]

Zamiast tego typu modyfikacji w ustawieniach dodatku Edytor - TinyMCE, możesz zamiast zwykłej spacji w kodzie wstawić znak specjalny (tzw. encję lub alias) w postaci: &nbsp; Jest to symbol niełamliwej spacji (tzw. twardej spacji).

W tym przypadku TinyMCE również nie usunie znaczników, jednak rozwiązanie takie ma to do siebie, że ikona zostanie przesunięta do lewej strony. W przypadku większych grafik, które są wycentrowane, może to być widoczny problem. Będzie po prostu widać, że grafika nie jest idealnie na środku.

Mam nadzieję, że tym krótkim artykulikiem pomogłem rozwiązać jeden mały problem, który spędzał Ci sen z powiek ;-)

Jeżeli tak, to w formie podziękowania udostępnij go w którymś z Twoich kanałów Social Media (Facebook, Twitter, Google+, itp.)

Acha, aby nie było tak, że jestem taki genialny! Ponieważ rozwiązania tego problemu poszukiwałem juz od jakiegoś czasu, w pewnym momencie natknąłem się na artykuł Joomla! 3, TinyMCE - Stop Removing Empty Tags i to właśnie on mnie oświecił :-)

Dodatkowo otrzymałem informację od Marcina Merchela z Joomla-Monster, który odpowiedzialny jest za tworzenie i rozwój szablonów. Marcin poleca, aby ustawienia TinyMCE (menu Rozszerzenia -> Dodatki -> Edytor - TinyMCE) były skonfigurowane w następujący sposób:

Dodatkowe ustawienia edytora TinyMCE

Wówczas nie powinno być jakichkolwiek niespodzianek z ucinaniem kodu przez edytor TinyMCE ;-)

 

Chcesz otrzymywać powiadomienia o moich kolejnych wpisach lub projektach?

JoomlaDay! Poland 2015 - musisz tam być!
Świętujemy 10 urodziny Joomla!

Podobne wpisy

 

    By accepting you will be accessing a service provided by a third-party external to https://www.slawop.net/

    Najnowsze komentarze

    Gość - Studio Jak wybrać hosting dla Joomla!?
    13 wrzesień 2019
    Warto jeszcze dopisać punkt, żeby przy wyborze wybrać panel między DirectAdmin/cPanel. Niektóre hostingi mają swoje własne rozwiązania - czasami bardzo specyficzne, co niekoniecznie jest dobrą rzeczą
    Gość - Marek Szyfrowanie symetryczne a niesymetryczne
    09 czerwiec 2019
    "Klucz przekazany do publicznej wiadomości, nazywany jest kluczem publicznym lub jawnym. Może on być stosowany do szyfrowania lub deszyfrowania informacji otrzymanych od osoby, która go wygenerowała. ...
    Gość - Marek Tworzenie szablonów dla Joomla! Helix Ultimate
    10 maj 2019
    Witam, napotkałem problem pojawiający się przy zmianie kolorów tła czy czcionek oraz importowaniem ustawień. W pierwszym przypadku, po zmianie kolorów i ich zapisaniem, panel podglądu strony przeładow...
    Gość - Andy SSL i Joomla! w Smarthost
    03 styczeń 2019
    Dzięki, jak zwykle dobra robota! Warto dodać, że instalacja certyfikatu SSL nie zapewnia bezpieczeństwa transmisji danych. To jest możliwe po wdrożeniu polityki bezpieczeństwa w firmie. Co do SSL - to...
    Gość - Henryk Jak utworzyć menu poziome w szablonie protostar?
    02 styczeń 2019
    Robię punkt po punkcie i nie wyświetla się poziome menu Nie wiem gdzie tkwi błąd i co robię źle?Jeśli to możliwe to proszę o pomocps. posiadam książkę "Joomla! 3x" i tu również niema pomocy Pozdrawiam...