Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JS] Edytor WYSIWYG - wciśniety przycisk
Forum PHP.pl > Forum > Po stronie przeglądarki
maniutek08
Witam

Jestem w trakcie pisania prostego edytora HTML dla strony - taki tam na własne potrzeby(dobrze wiem że istnieje TinyMCE, FCKEditor i wiele wiele innych darmowych edytorów, które z powodzeniem można wykorzystywać na swojej stronie - tu chodzi o chęć sprawdzenia się)
Przeglądałem naprawdę wiele rożnych edytorów i zauważyłem pewną różnicę(pomijając liczbę funkcjonalności do wstawienia) że jedne obsługują jakby "wciśnięcie przycisku" a inne nie.. i oto właśnie mi chodzi jak uzyskać taki efekt(pomijając zagadnienie dotyczące wyglądu) że klikam "B" i jest ono wciśnięte w trakcie pisania.. co więcej przyciski te same się "wciskają" jeśli postawię kursor w sformatowanym tekście(np.: postawienie kursora w tym teksie : "to jest tekst pogrubiony i pochylony" zaowocuje wciśnięciem przycisku "B" i "I")

obrazek pokazujący o co mi chodzi (TinyMce)
mortus
Ten pogrubiony i pochylony tekst, to nic innego jak tekst objęty znacznikami <b><i></i></b>, który w ramce (zazwyczaj iframe) jest interpretowany jako zwykły html. Wciśnięcie przycisku B powoduje otwarcie znacznika <b>, ponowne jego wciśnięcie powoduje zamknięcie </b>. Wniosek jest taki, że edytor musi pamiętać stany przycisków. Jeśli chodzi o automatyczne wciskanie przycisków po zaznaczeniu sformatowanego tekstu, to można to zrealizować sprawdzając źródło dokumentu w ramce. Oczywiście trzeba odpowiednio przeliczyć ilość znaków, a następnie sprawdzić, czy znak przy którym jesteśmy znajduje się między określonymi znacznikami np. <b> i </b>.

Chyba inaczej się nie da.
maniutek08
No tak dokładnie tylko jak się do tego zabraćquestionmark.gif powiem szczerze że przestudiowałem kilka kodów js (np.: TinyMCE) ale szczerze mówiąc nawet nie wiem czego szukać i gdzie uderzyć że znaleźć choćby małą podpowiedź jak oni to zrobili wink.gif

Jest!! coś znalazłem... przynajmniej jestem bliżej.. jest jakaś właściwość "commonAncestorContainer" i "parentNode" które pozwalają na wyświetlenie tagów
Ogólnie jakby ktoś obracał się w tym temacie co ja polecam ten kod skryptu js do przestudiowania : http://www.themaninblue.com/experiment/widgEditor/
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.