[JS] Edytor WYSIWYG - wciśniety przycisk Opcje

[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)

Ten post edytował maniutek08 19.08.2011, 17:33:01

[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ć 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

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/