próbuję dodać różne style wewnątrz textarea np pogrubienie, różne kolory itpjaki sposób wyświetlania stylów w textarea HTML
WYSIWYG edytory (np tinyMCE) stosowane na stronach internetowych zazwyczaj to zrobić, ale mam problemy wypracowanie, jak to robią.
alt text http://www.yart.com.au/test/html.gif
Więc jak oni to osiągnąć:
Nie można to zrobić?
Owen ma właściwy pomysł. Te biblioteki zastępują obszar tekstowy ramką iframe, a następnie umieszczają dokument iframe w trybie designMode lub contentEditable. To dosłownie umożliwia edycję dokumentu html w elemencie iframe, gdy przeglądarka obsługuje wtedy kursor i wszystkie naciśnięcia klawiszy, a także api, które można wywoływać w celu zmiany stylu (pogrubienie, kursywa itd.). Następnie, gdy użytkownik przesyła formularz, kopiuje innerHTML z elementu iframe do oryginalnego obszaru tekstowego. Aby uzyskać więcej informacji o włączaniu tego trybu i o tym, co można z nim zrobić, zobacz: https://developer.mozilla.org/En/Rich-Text_Editing_in_Mozilla
Jednak moją propozycją jest użycie jednej z istniejących bibliotek kontroli tekstu sformatowanego, jeśli chcesz, aby ta funkcja była dostępna w Twojej witrynie. Zbudowałem go wcześniej i okazało się, że spędzasz mnóstwo czasu zajmując się niespójnościami przeglądarek, aby uzyskać coś, co działa dobrze. Oprócz różnic w sposobie włączania funkcji edycji, będziesz również chciał znormalizować tworzony html. Na przykład IE tworzy elementy <br>, gdy użytkownik naciśnie klawisz Enter, a FF utworzy znaczniki <p>. W przypadku zmian stylu IE używa <b>, <i> itp., Podczas gdy FF używa przęseł z atrybutami stylu.
Zwykle nakładają one tekst z użyciem ich własnego komponentu wyświetlania, np. Div. Gdy użytkownik pisze, javascript pobiera treść wpisaną i stosuje style w obszarze wyświetlania. Wartość textarea to tekst z tagami html potrzebnymi do renderowania go w określonym stylu. Widocznie użytkownik widzi stylizowany tekst.
To jest uproszczone wyjaśnienie.
Uważam, że tinymce specjalnie wykorzystuje tabelę/ramkę do celów wyświetlania (która zastępuje istniejące pole tekstowe). Gdy będziesz gotowy do zapisania, kopiuje wszystkie informacje z powrotem do obszaru tekstowego w celu przetworzenia.
Ma to sens, ale jak zobaczyłbyś kursor, gdyby na nim był element div? – Petras
W rzeczywistości kursor jest umieszczony na wyświetlaczu i zarządzany przez javascript. Użytkownik nie wchodzi w interakcję z tekstem. –