ďťż

[HTML & JS] Edytor WYSIWYG online, jak to działa ? Jak zrobić coś w stylu openWYSIWYG, kilka pytań...

Podstrony

telcocafe

Od pewnego czasu kombinuję jak stworzyć edytor WYSIWYG na stronie. Przeglądałem kod openWYSIWYG jednak niewiele zrozumiałem (jakoś mi nie wychodziło nigdy rozgryzanie bardziej skomplikowanych skryptów JS ) :) I mam pewne pytania ,które mi się ostatnio nasunęły:

1. Jak działają edytory takie jak openWYSIWYG ? Wiem ,że jest tam ukryte pole textarea i ramka iframe jednak nie wiem jak przebiega komunikacja pomiędzy textarea i iframe (bo chyba cały wpisywany tekst na bieżąco pojawia się chyba w textarea i dopiero idzie do iframe tylko jak to zrobić (to ,że cały tekst pojawia się w ukrytym polu textarea) ;) ) ,i jak zrobić coś takiego ,że np. zaznaczony tekst po kliknięciu przycisku pogrubia się ,po wstawieniu kursora można pisać w danym miejscu itp. ?

Przy okazji tu małe wyjasnienie: oczywiście mógłbym się nie męczyć i po prostu wrzucić ten skrypt na stronę zamiast kombinować ale kod generowany przez ten edytor jest niezgodny z XHTML ,a mi na takiej zgodności zależy i wolę napisać własny edytor tylko właśnie potrzebuję wiedzy jak to działa ;)

2. Czy ma sens używanie takiego edytora na stronie / w panelu administracyjnym ? Bo nasunęło mi się inne rozwiązanie: edytor tekstowy zawierajacy pod sobą podgląd generowany na podstawie pierwszego pola edytora... Które rozwiązanie będzie lepsze ?

Generalnie zależy mi na tym aby edytor obsługiwał wszystko jako BBCODE i po prostu na bieżąco przetwarzał znaczniki BBCODE na odpowiedni wygląd elementów...

Z góry dzięki za wszelkie rady i informacje ;)

1. z tego co pamiętam to generalnie trzeba przełączyć textarea w tryb edycji czy jakos tak :P

2. a nie lepiej zmodyfikować istniejące cacka, żeby były valid? np edytorek z Word Pressa jest valid :-)

1. z tego co pamiętam to generalnie trzeba przełączyć textarea w tryb edycji czy jakos tak :P

2. a nie lepiej zmodyfikować istniejące cacka, żeby były valid? np edytorek z Word Pressa jest valid :-)

1. Znalazłem info ,że jak się wpisze w pasek adresu przeglądarki :
java script:document.body.contentEditable = 'true'; document.designMode='on'; void 0
to wtedy można edytować stronę ,która się aktualnie ogląda ]:-> Teraz chyba trzeba pokombinowac jak to zaimplementować w textarea i iframe bo widzę podobieństwo do tego edytorka openWYSIWYG tylko jeszcze ciagle się zastanawiam nad tą komunikacją textarea <=> iframe ;)

2. Teoretycznie to openWYSIWYG też mógłbym jakoś dostosować (np. przy wysyłaniu zamiana znaczników style na bbcode) ale to sporo roboty i wolę własny edytorek w ,którym będe wiedział co i jak ;] Nad tym edytorkiem Word Pressa się zastanowię jak będę zdesperowany ;)

ad1 imho to jest przejście w tryb edycji ale dla WebBrowsera :-)

ad1 imho to jest przejście w tryb edycji ale dla WebBrowsera :-)

No tak ,ale w tym edytorze openWYSIWYG jest taki kod:
var content = document.getElementById(n).value; var doc = document.getElementById("wysiwyg" + n).contentwindow.document; ... // Make the iframe editable in both Mozilla and IE doc.body.contentEditable = true; doc.designMode = "on";

gdzie n to to pole textarea...

Z tego kodu wynika ,że można można ustawic ten tryb dla tego iframe i w nim sobie edytować...
Tylko się zastanawiam jak sprawić ,żeby np. wstawić pogrubienia tekstu w tym iframe - czy da się to zrobić operując bezpośrednio na iframe czy raczej muszę zmienić zawartość textarea i wczytać ją do iframe ?

Bo przekazywanie do textarea to chyba wystarczy zrealizować tak by zawartość iframe była równa właściwości value w textarea ?

Sitedesign by AltusUmbrae.

Darmowy hosting zapewnia PRV.PL