A A A

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

 

Komentarze 1

Gość - Devi w środa, 23 sierpień 2017 10:47

Wielkie dzięki za ten artykuł! szukałam tego rozwiązania od 2dni

Wielkie dzięki za ten artykuł! szukałam tego rozwiązania od 2dni
Gość
sobota, 16 luty 2019

Zdjęcie captcha

Najnowsze komentarze

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...
Gość - Joanna Jak utworzyć własny szablon dla Joomla! nie dotykając kodu? EF4 cz.2
09 grudzień 2018
Czy jest jakaś możliwość, żeby zmienić układ top-bar i tej linii, w której jest logo? Tam niby są flexibloki ale nie można zmienić ich szerokości, a tego potrzebuję bardzo. Jak tego dokonać???
Gość - Informatyk Tworzenie bazy danych w CPanelu na Smarthost - instalacja Joomla!
19 listopad 2018
Dziękuje za ten wpis joomla zawsze była dla mnie problematyczna
Gość - Sławomir DJ Image Slider
04 listopad 2018
co robić? Zdjęcia wyświetlają się pionowo, jedno pod drugim. Żadna zmiana w opcjach, nic nie daje??? Pomożecie?