A A A

Edytor Joomla wycina puste znaczniki HTML

przez w Webdesign
  • Przeczytano: 5035
  • 1 komentarz
  • Drukuj
5035
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?

Oceń ten wpis:

Nauczyciel przedmiotów informatycznych w szkole ponadgimnazjalnej.


Pierwszy Certyfikowany Administrator Joomla! w Polsce.


Autor książek i e-booków na temat Joomla!. Autor bloga: www.slawop.net, w którym porusza zagadnienia związane z CMS Joomla! i wykorzystaniu go, jako fantastycznego narzędzia, które ułatwia innym tworzenie ich własnego miejsca w sieci.


Prowadzi własną firmę świadczącą usługi związane z tworzeniem oraz administrowaniem serwisów opartych o CMS Joomla!


Współorganizator Joomla! User Group Jawor


Uwielbia ekstremalnie szybką jazdę na rolkach! Fan rozwoju osobistego i ciągłych zmian :-)


I love Joomla! Why?


Because Joomla! is Doing Great Things with Great People :-)


And My favourite sentence:



Don't Let Anybody Steal Your Dreams!


Komentarze

  • Gość
    Devi środa, 23 sierpień 2017

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

Zostaw komentarz

Gość
Gość środa, 19 grudzień 2018

Najnowsze komentarze

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ć???

Joanna

Dziękuje za ten wpis joomla zawsze była dla mnie problematyczna :)

Informatyk

co robić? Zdjęcia wyświetlają się pionowo, jedno pod drugim. Żadna zmiana w opcjach, nic nie daje??? Pomożecie?

Sławomir
05.11.2018 w DJ Image Slider

Właśnie, powinien się pojawić … . Oczywiście skorzystam z rady i zapytam u źródeł. Jeśli dowiem się czegoś mądrego, podzielę się wiedzą, może komuś się przyda. Dziękuję, pozdrawiam, Andrzej

Andrzej
Andrzeju, jeżeli w Ustawieniach podstawowych w zakładce Narzędzia na stronie w polu Powrót do góry masz aktywny przycisk Włączone, to taki przycisk powinien pojawić się u Ciebie na stronie już po prze...