Content Editable
niedziela, 15 listopada 2009
Robiąc porządki natknąłem się na mały kawałek kodu. Pozostałość po eksperymentach, z czasów poprzedzających wydanie przeglądarki Firefox 3.0. Pomyślałem że skoro dawno nic nie pisałem to warto by go tu zamieścić? Może komuś się przyda…
Eksperyment miał na celu stworzenie możliwie najprostszego edytora, posiadającego możliwość zmiany kroju pisma.
Podany poniżej przykład będzie wymagał przeglądarki z obsługą JavaScript (Czytniki RSS nie spełniają tego wymagania).
Rozwiązanie jest zadziwiająco proste. Wystarczy dla dowolnego elementu ustawić właściwość contentEditable="true", by umożliwić użytkownikowi edycję znajdującego się tam tekstu.
W celu formatowania tekstu można dodać przyciski wykonujące polecenia takie jak to: document.execCommand("italic", null, null)
… i gotowe mamy działający edytor.
Co więcej, taki edytor będzie działał praktycznie w każdej przeglądarce.
Niestety, właściwość contentEditable skrywa jeden mały, ale bardzo brzydki sekret: Sposób formatowania tekstu jest ściśle zależny od implementacji.
Gdyby to był tylko problem sporu o wyższości znacznika em nad i, to był by to niewielki problem. Większość przeglądarek zachowuje się bardzo podobnie. Czarną owcą jest tu Mozilla – tutaj developerzy postanowili skorzystać z pozbawionych znaczenia elementów span z odpowiednim atrybutem style, jakoby w celu oddzielenia treści od formy. Nawet nie mam siły tego komentować, w takich okolicznościach można znienawidzić wszelkich purystów…
Etykiety: programowanie, R
Red 10:30
Prześlij komentarz