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.
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.
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:
A tak po zapisaniu:
Efekt będzie taki, że na stronie w module nie pojawi się odpowiednia grafika:
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[*]
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: 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:
Wówczas nie powinno być jakichkolwiek niespodzianek z ucinaniem kodu przez edytor TinyMCE ;-)
Chcesz otrzymywać powiadomienia o moich kolejnych wpisach lub projektach?
Podobne wpisy
By accepting you will be accessing a service provided by a third-party external to https://www.slawop.net/