Czym jest WYSIWYG editor na stronie?

Strony internetowe, które odwiedzasz każdego dnia, powstają przy użyciu nie jednego, a trzech języków: HTML, CSS i JavaScript. Czy koniecznie trzeba je znać, aby móc stworzyć własną witrynę lub edytować już znajdujące się na niej treści? Odpowiedź brzmi: nie! Dowiedz się, czym jest WYSIWYG editor i w jaki sposób może Ci pomóc w pracach nad stroną — nawet jeśli nie potrafisz kodować.

WYSIWYG editor — co to jest?

Pojęciem WYSIWYG editor określa się wszystkie narzędzia, które działają według zasady What You See Is What You Get — co można przetłumaczyć jako „to, co widzisz jest tym, co dostajesz”. Edytory WYSIWYG prezentują edytowane treści w taki sposób, w jaki będą wyglądały w przeglądarce internetowej użytkownika. Innymi słowy — są to edytory wizualne, pozwalające pracować bezpośrednio z elementami znajdującymi się na stronie, a nie ze stojącym za nimi kodem.

Najprostszym przykładem edytora WYSIWYG jest… znany wszystkim Word. Dokument tekstowy, który w nim stworzymy będzie miał dokładnie taką samą formę po jego wydrukowaniu czy zapisaniu w formacie PDF i wysłaniu potencjalnemu klientowi. WYSIWYG editor dla stron internetowych działa analogicznie — jest jedynie bardziej zaawansowany.

W praktyce edytory WYSIWYG pozwalają zbudować cały szkielet strony internetowej przy pomocy najprostszych narzędzi — na przykład przeciągając i upuszczając kolejne elementy lub edytując bezpośrednio tekst, który ma się znaleźć na stronie.

Najpopularniejsze edytory WYSIWYG

• Adobe Dreamweaver — jeden z najstarszych programów do kompleksowej edycji stron internetowych; umożliwia zarówno pracę w wizualnym edytorze WYSIWYG, jak i edycję samego kodu.
• Bootstrap Studio — wiodący edytor stron dla początkujących; pozwala tworzyć responsywne, dynamiczne witryny przy pomocy gotowych szablonów i elementów.

Zdj 1. Proces budowy strony w Bootstrap Studio

Źródło: Building an Ecommerce Store – Bootstrap

• TinyMCE — bardzo popularny WYSIWYG editor, umożliwiający przede wszystkim edycję tekstu witryny; często używany jako plugin w systemach CMS (zarządzania treścią), takich jak WordPress czy Joomla.
• CKEditor — czyli bezpośredni konkurent TinyMCE, nie mniej od niego zaawansowany.

Zalety edytorów WYSIWYG

Zadanie edytorów wizualnych WYSIWYG jest jedno — uprościć proces edycji strony do minimum. Oto kilka powodów, dla którego mogą być one dobrym wyborem dla osób, które nie mają (jeszcze) doświadczenia w programowaniu: 

• szybkość edycji — dodawanie elementów metodą drag-and-drop („przeciągnij i upuść”) jest szybsze od pisania kodu;
• intuicyjność — edytory WYSIWYG posiadają stosunkowo proste i przejrzyste — nawet dla początkującego użytkownika — interfejsy;
• dostęp do podglądu w czasie rzeczywistym — w każdej chwili możemy ocenić wprowadzane modyfikacje;
• niskie koszty — nawet najbardziej zaawansowane edytory WYSIWYG nie są zbyt drogie; część z nich jest dostępna za darmo;
• możliwość integracji z innymi platformami — wiele edytorów można łatwo połączyć ze wspomnianymi już systemami zarządzania treścią czy platformami e-commerce.

Wady edytorów WYSIWYG

Trzeba jednak zaznaczyć, że choć edytory WYSIWYG mają wiele zalet z punktu widzenia osób nieznających HTML-a czy CSS-a, raczej nie są one używane w praktyce przez profesjonalnych web developerów. A to ze względu na:

• ograniczone funkcje — WYSIWYG editor ogranicza developera do wbudowanych szablonów i funkcjonalności; bez manualnej pracy z kodem wielu zaawansowanych rozwiązań po prostu nie da się wdrożyć na stronie;
• niezoptymalizowany kod źródłowy — kod witryny wygenerowanej przy pomocy edytora WYSIWYG rzadko osiąga choćby zbliżony poziom optymalizacji pod kątem wydajności strony do kodu napisanego przez profesjonalnego programistę; nie jest on także dostosowany do wymagań SEO. 
• problemy ze zgodnością kodu — automatycznie wygenerowany kod źródłowy może mieć problemy z prawidłowym wyświetlaniem strony na urządzeniach mobilnych lub w mniej popularnych przeglądarkach;

wielkość plików strony — co wiąże się z kwestią optymalizacji kodu. Pliki stron stworzonych w edytorach WYSIWYG są wyraźnie większe od tych, które są kodowane manualnie. Stanowi to dodatkowe obciążenie dla serwera strony i wydłuża czas jej ładowania, co w kontekście strategii SXO jest bardzo niekorzystne.

Genialne firmy mnożą
swój potencjał z

Sprawdź nasze Case Studies

Ocena Clutch

5.0

Ocena Google

4.8

Sprawdź, czy Twój
marketing działa.

Umów konsultację z Marcinem Stypułą, CEO Semcore i sprawdź swoją strategię digital marketingu.

Umów konsultację 299 zł/h