Na pewno każdy z Was chociaż raz w swoim życiu pracował z edytorem tekstu, takim jak MS Word, Open Office czy Google Docs. Ja osobiście na co dzień pracuję z Google Docs i Bear - zdecydowanie najprzyjemniejsze, według mnie, edytory tekstu.

Jakiś czas temu zastanawiałem się nad tym, jak w łatwy sposób przygotować prosty, ale funkcjonalny edytor tekstu. Swoje poszukiwania zacząłem oczywiście od technologii, w której pracuję codziennie, czyli Javascriptu, HTMLa i CSSa.

Okazało się to bardzo proste.

Moc atrybutów HTML

Pomimo, że pracuję już wiele lat z technologiami webowymi, to każdego dnia się uczę. I tak, niedoceniany przez wielu, HTML również skrywa swoje tajemnice. Jedną z nich jest bardzo ciekawy atrybut contenteditable.

Według informacji, które znalazłem, atrybut ten powoduje, że każdy element HTML może być edytowalny. Łącząc potęgę tego atrybutu z javascriptowymi zdarzeniami możemy otrzymać rozbudowany edytor tekstu w naszej przeglądarce lub zbudować aplikację desktopową do pisania treści, wykorzystując Electrona. Wszystko sprowadza się do jednej linijki:

Proste, prawda?

document.execCommand

Mamy już pole tekstowe, na którym możemy operować. Okazuje się, że wraz z dodaniem atrybutu contenteditable w obiekcie dokumentu została odblokowana do naszego użytku metoda execCommand. Dzięki tej funkcji możemy wykonywać różne operacje, które będą odpowiednio modyfikowały zaznaczony tekst , wstawiały dodatkowe elementy lub wpływały na bieżącą linię. Brzmi świetnie! To pozwoli nam sprawić, że nasz edytor tekstu stanie się w pełni funkcjonalny.

document.designMode

Edytowanie całego dokumentu możemy osiągnąć również poprzez zmianę wartości designMode w obiekcie document. designModeprzyjmuje dwie wartości on i off. Domyślną wartością jest off.

Opcje i wsparcie

Pytanie zatem, jakie opcje mamy do dyspozycji?

Pełną listę dostępnych poleceń znajdziesz tutaj. Ale żeby nie było za kolorowo spójrzmy na wsparcie przeglądarek. Zanim spojrzałem na stronę caniuse.comzakładałem, że IE nie będzie wspierać zbyt wielu operacji. I ku mojemu ogromnemu zdziwieniu IE, podobnie jak Chrome, Safari czy Firefox, wspiera całkiem dobrze execCommand. IE ma problem tylko z kilkoma poleceniami, takimi jak: insertBrOnReturn, defaultParagraphSeparator oraz poniżej wersji 9 z copy i cut. Poza tym, reszta wygląda całkiem dobrze.

Troszkę kodu

Przygotowanie struktury HTML dla naszego edytora nie jest zbyt wymagające. Potrzebujemy zaledwie dwóch rzeczy: miejsca, które będzie edytowalne oraz przycisków, które będą odpalać odpowiednie polecenia.

Zwróć uwagę, że dodałem kilka klas CSS, które odpowiednio ostylują nasz edytor. Dodatkowo wykorzystałem bibliotekę Font Awesome, aby dodać kilka ikonek, a co tam - zrobi się troszkę bardziej pro. :)

Troszkę magii JSa

Po ukończeniu struktury HTML i ostylowaniu projektu czas dodać kilka linijek JSa. Co nasz kod Javascript powinien robić? Przede wszystkim sprawdzać jaka komenda została kliknięta przez użytkownika i wykonać execCommand z odpowiednimi parametrami. A więc - zróbmy to.

Przypiszmy do naszych przycisków odpowiednie komendy. Ja wykorzystałem do tego data- atrybuty HTMLowe:

Następnie w pliku js, pobrałem wszystkie przyciski i utworzyłem z nich tablicę (ponieważ metoda querySelectorAll tak naprawdę nie zwraca nam tablicy, a obiekt tablicopodobny):

Pozostaje nam tylko przypisanie do każdego przycisku odpowiedniej metody, która będzie wywoływana po kliknięciu. Wykorzystajmy do tego jedną z metod tablicowych: forEach

Podsumowanie

I to właściwie koniec. Oczywiście można ten kod jeszcze rozbudować. Poprawić kilka błędów i zoptymalizować. Natomiast nasz cel został osiągnięty. Zachęcam Cię do dalszej pracy nad tym kodem. Spróbuj wykonać poniższe zadanie.