Wróć na Design Cart

Design Cart Tools

DC Cleaner

Edytuj treść po lewej — po prawej zobaczysz kod HTML. Opcje czyszczenia i zamiany są pod edytorem.

Edytor treści

0 słów

Kod źródłowy HTML

0 tagów 0 znaków

Opcje czyszczenia

Znajdź i zamień w kodzie HTML

Design Cart Tools

Czyszczenie tekstu online

Większość opisów produktów, artykułów i podstron w sklepach internetowych powstaje w Wordzie, LibreOffice albo przez skopiowanie treści z innej witryny. W edytorze wszystko wygląda ładnie — ale pod spodem kryje się HTML, który potrafi rozwalić układ strony.

Do czego służy to narzędzie?

DC Cleaner powstał dla właścicieli sklepów i osób, które edytują treści w panelu administracyjnym, ale nie chcą (i nie muszą) znać się na HTML. Po lewej stronie masz edytor wizualny — wklejasz tekst tak jak w Wordzie. Po prawej od razu widzisz prawdziwy kod, który trafi na stronę: style inline, klasy, setki pustych <span> i często niezamknięte tagi.

Jednym kliknięciem możesz wyczyścić ten kod, naprawić strukturę tagów, usunąć śmieci z programów biurowych i skopiować gotowy fragment do opisu produktu, artykułu na blogu czy strony CMS.

Dlaczego czyścić kod skopiowany z Worda, LibreOffice lub innej strony?

  • Word i LibreOffice zapisują formatowanie w setkach atrybutów style="" i klasach typu MsoNormal, których Twój sklep nie używa — ale i tak je ładuje.
  • Kopiowanie ze strony www ciągnie za sobą cudze klasy CSS, identyfikatory, a czasem skrypty i atrybuty data-* z obcego szablonu.
  • Brudny HTML jest cięższy — opis produktu z 40 KB zamiast 4 KB spowalnia ładowanie i utrudnia pozycjonowanie.
  • Panel sklepu ma własne style — wklejony „syf” z Worda nadpisuje je inline'owymi stylami i psuje wygląd list, nagłówków i tabel.

Niedomknięte tagi — jak psują stronę?

Przeglądarka próbuje „domyślić się”, gdzie kończy się akapit, lista czy tabela. Gdy w kodzie brakuje </p> albo jest źle zagnieżdżony <div>, reszta strony może wylądować wewnątrz tego akapitu. Efekt? Stopka w środku opisu produktu, przycisk „Dodaj do koszyka” w kolumnie tekstu, rozjechana siatka na mobile.

DC Cleaner przy włączonej opcji „Napraw niezamknięte i uszkodzone tagi” przepuszcza kod przez parser HTML przeglądarki, domyka brakujące elementy, usuwa tagi biurowe (<o:p> z Worda) i zwraca poprawną strukturę. Nad edytorem kodu zobaczysz też ostrzeżenie, jeśli wykryjemy niedopasowane tagi jeszcze przed czyszczeniem.

Przykład: co generuje Word lub LibreOffice

Taki fragment po wklejeniu z dokumentu .docx często wygląda niewinnie w edytorze, ale kod źródłowy to:

<p class="MsoNormal" style="margin:0cm;font-size:12.0pt;font-family:"Calibri",sans-serif">
  <span style="font-size:14.0pt;color:#1F4E79;mso-ansi-language:PL">
    <b>Opis produktu</b>
  <span style="color:red">— promocja!</p>
<p class="MsoNormal">&nbsp;</p>
<p class="MsoListParagraph" style="margin-left:36.0pt;text-indent:-18.0pt;
  mso-list:l0 level1 lfo1"><!--[if !supportLists]--><span>·<span>
  </span></span><!--[endif]-->Materiał: bawełna 100%</p>
<o:p></o:p>

Zwróć uwagę na:

  • niezamknięty <span> i <b> — zamknięty jest dopiero </p>,
  • dziesiątki atrybutów style i klas Mso*, których sklep nie zna,
  • komentarze warunkowe Worda <!--[if !supportLists]-->,
  • pusty akapit z &nbsp; i tag <o:p> — typowy „śmieć” Office.

Po użyciu DC Cleaner ten sam tekst może wyglądać tak:

<p>
  <strong>Opis produktu</strong>
  <span>— promocja!</span>
</p>
<p>Materiał: bawełna 100%</p>

Krótko, czytelnie, bez śmieci — i co najważniejsze: każdy tag jest domknięty, więc reszta szablonu sklepu nie „wpadnie” do środka opisu.

Jak korzystać?

  1. Wklej treść w lewy panel (edytor wizualny).
  2. Sprawdź kod po prawej — zobaczysz, co naprawdę trafi na stronę.
  3. Ustaw opcje czyszczenia i ewentualnie zamiany tekstu (np. usuń class="MsoNormal").
  4. Kliknij Wyczyść HTML i skopiuj gotowy kod do panelu sklepu.

Całe przetwarzanie odbywa się w Twojej przeglądarce — treść nie jest wysyłana na żaden serwer.