¶ Edytor treści (WYSIWYG) - formatowanie bez HTML
Edytor treści WYSIWYG w Hummerce to wbudowany edytor tekstu sformatowanego (CKEditor), którym obsługa sklepu formatuje strony statyczne, zawartości, opisy towarów i kategorii oraz szablony maili - bez znajomości kodu HTML, z podglądem wyglądu na bieżąco.
Stan na wersję Hummerce 2.35, migracja na CKEditor od wersji 2.28.
¶ Korzyści i zastosowania
- Formatowanie treści bez znajomości HTML - pogrubienie, listy, wyrównanie, kolory, tabele, linki i obrazy, z podglądem wyglądu na bieżąco.
- Wstawianie obrazów wprost z menedżera plików sklepu, bez opuszczania edytora.
- Wklejanie gotowej treści z Worda - z zachowaniem podstawowego formatowania tekstu.
- Tryb "Źródło dokumentu" dla osób znających HTML - podgląd i ręczna edycja wygenerowanego kodu.
- Własne style gotowe do wyboru z listy (np. odznaki, przyciski, wyróżnione tło) - konfigurowane raz przez zespół wdrożeniowy i dostępne potem przy każdej edycji treści.
- Jeden edytor używany wszędzie tam, gdzie sklep pokazuje sformatowaną treść - strony statyczne, zawartości, opisy towarów i kategorii, szablony maili.
¶ Jak to wygląda
¶ Ustawienie własnych klas CSS w edytorze
¶ Zasady działania
¶ Gdzie działa edytor
Edytor WYSIWYG pojawia się wszędzie tam, gdzie pole tekstowe przyjmuje sformatowaną treść HTML - m.in. w treści strony statycznej, w zawartościach HTML (Obszary i zawartości), w opisach towarów i kategorii oraz w szablonach maili. Przełącznik Źródło dokumentu w pasku narzędzi pokazuje i pozwala edytować surowy kod HTML wygenerowany przez edytor - przydatne przy wklejaniu gotowej treści (np. regulaminu z pliku *.doc, zob. Regulamin sklepu) albo przy ręcznych poprawkach kodu.
¶ Własne style (klasy CSS)
Ustawienie Klasy css do wyboru w edytorze HTML (Konfiguracja -> Ustawienia, grupa Administracja) pozwala dodać własne klasy CSS szablonu do listy stylów w edytorze - wpisane po przecinku (np. badges,img-fluid,pi-over-layer). Po dodaniu klasy stają się wybieralne z listy Styl w pasku narzędzi edytora, wszędzie tam, gdzie edytor jest dostępny.
Oprócz własnych klas edytor ma wbudowany zestaw gotowych stylów (widoczność treści według urządzenia, wyrównanie do lewej/prawej, wyróżnione komunikaty, przycisk) - te wbudowane style odpowiadają klasom starszego Bootstrapa (np. visible-xs, hidden-md, pull-left) i nie pokrywają się z klasami użytkowymi szablonu Bootstrap 5 (np. d-none, float-start). Do stylowania treści w szablonie BS5 zalecane są własne klasy dodane w ustawieniu, a nie wbudowana lista.
¶ Wersja
- Edytor treści - funkcja podstawowa platformy, dostępna we wszystkich obecnych wersjach.
- Migracja na CKEditor (obecnie wersja 4.15) i ustawienie własnych klas CSS w edytorze - od wersji 2.28.
¶ Zależności
- Edytor jest częścią panelu administracyjnego - nie wymaga osobnej instalacji ani modułu.
- Wstawianie obrazów w edytorze korzysta z menedżera plików i obrazków sklepu.
- Własne klasy CSS dodane w ustawieniu działają tylko wtedy, gdy odpowiadające im style są zdefiniowane w szablonie sklepu - edytor tylko udostępnia klasy do wyboru, nie tworzy stylów.
¶ Wdrożenie
- Edytor działa od razu po instalacji sklepu - nie wymaga wdrożenia ani konfiguracji, żeby zacząć z niego korzystać.
- Dodanie własnych klas CSS do listy stylów w edytorze działa od razu po zapisaniu ustawienia; przygotowanie odpowiadających stylów w szablonie (jeśli jeszcze nie istnieją) wymaga wdrożenia.
- Czas wdrożenia nowych stylów w szablonie ustalamy indywidualnie po analizie zakresu.
¶ Ograniczenia
- Wbudowane, gotowe style edytora (widoczność według urządzenia, wyrównanie, komunikaty) odpowiadają starszym klasom Bootstrapa i nie są dopasowane do klas Bootstrapa 5 - w szablonie BS5 zalecamy korzystać z własnych klas dodanych w ustawieniu, a nie z wbudowanej listy.
- Edytor formatuje treść i wstawia obrazy, ale nie sprawdza, czy wynikowy wygląd pasuje do stylu graficznego sklepu - odpowiedzialność za wygląd końcowy pozostaje po stronie osoby edytującej treść.
- Nie weryfikujemy treści wprowadzanych w edytorze pod kątem zgodności z prawem - to sklep odpowiada za treść (np. regulaminu czy opisów towarów) publikowaną przez edytor.
¶ Potencjał rozwoju
- Gotowy zestaw stylów dopasowany do klas Bootstrapa 5, uzupełniający wbudowaną listę opartą dziś o starszego Bootstrapa.
¶ Najczęstsze pytania
Czy do edycji treści w Hummerce trzeba znać HTML?
Nie. Edytor WYSIWYG formatuje treść wizualnie, z podglądem wyglądu na bieżąco. Tryb źródła dokumentu jest dostępny opcjonalnie, dla osób znających HTML.
Czy mogę dodać własne style (np. wyróżnione tło albo odznakę) do listy w edytorze?
Tak. W ustawieniu Klasy css do wyboru w edytorze HTML można dopisać własne klasy CSS - stają się wybieralne z listy stylów w edytorze.
Czy edytor działa tak samo w szablonie Bootstrap 5 i Bootstrap 4?
Częściowo. Sam edytor działa tak samo w obu szablonach, ale wbudowane gotowe style (widoczność, wyrównanie) odpowiadają starszemu Bootstrapowi - w szablonie BS5 lepiej korzystać z własnych klas.
Czy mogę wkleić gotową treść z pliku Word?
Tak. Edytor ma opcję wklejania z Worda z zachowaniem podstawowego formatowania - warto sprawdzić i doczyścić wynik w trybie źródła dokumentu.
Ile trwa uruchomienie edytora WYSIWYG?
Edytor działa od razu, bez wdrożenia. Dodanie i przygotowanie w szablonie własnych stylów CSS wyceniamy indywidualnie po analizie zakresu.
Gdzie jeszcze w panelu korzystam z tego samego edytora?
Wszędzie tam, gdzie pole przyjmuje sformatowaną treść - strony statyczne, zawartości HTML, opisy towarów i kategorii, szablony maili.
¶ Powiązane
Chcesz zobaczyć, jak zarządzanie treścią może działać w Waszym sklepie? Umów bezpłatną prezentację.
¶ Szczegóły konfiguracji
¶ Dostęp w panelu
- Ustawienia: Konfiguracja -> Ustawienia, grupa Administracja: Edytor HTMLa (domyślna wartość "FCK Editor" - nazwa historyczna, silnik to CKEditor) i Klasy css do wyboru w edytorze HTML (klasy CSS po przecinku).
- Edytor pojawia się bez dodatkowej konfiguracji w polach: treść strony statycznej, treść zawartości HTML, opis towaru i kategorii, treść szablonu maila.
- Pasek narzędzi: cofnij/ponów, wklej (w tym z Worda), linki, obrazy, tabele, znaki specjalne, tryb pełnoekranowy, listy, wcięcia, cytat, wyrównanie, pogrubienie/kursywa/podkreślenie/przekreślenie, kolor tekstu i tła, styl/format/rozmiar czcionki, tryb źródła dokumentu.
¶ Parametry
| Symbol ustawienia | Nazwa w panelu | Znaczenie |
|---|---|---|
admin.html.editor |
Edytor HTMLa | Typ edytora HTML używany w opisach i stronach statycznych (silnik: CKEditor) |
admin.html.editorClass |
Klasy css do wyboru w edytorze HTML | Własne klasy CSS (po przecinku) dodawane do stylów wybieralnych w edytorze |