Autor Zpráva
sh00ter
Profil
Zdravim,

chtěl bych si napsat buď jednoduchý wysiwyg editor, pro formátování vstupu na stránkách. O hotových editorech jako fckeditor vim, ale chci si to prostě napsat sám i kdyby to nemělo bejt tak dokonalý a propracovaný.

Neporadil by mi někdo kde/jak začít?

Díky.
janbarasek
Profil
Já bych začal studováním, jak ty editory jsou udělané, abys věděl jak na to.

Udělej si textareu a různě si s tím hraj, přidávej různé prvky (nejprve jenom vložení textu jako tady na djpw) a pak třeba i formátování písma.

Nejvíc se naučíš z hotových řešení.
sh00ter
Profil
Já právě měl dycky problém, že ačkoliv javascript s jQuery potažmo AJAXem aktivně používám, tak jsem se v tom kódu dycky ztratil.

Případně jestli bych moh dostat tip na nějakej jednoduchej(?)
Str4wberry
Profil
Začít můžeš tak, že si vytvoříš vložíš <iframe> s designMode = "on" a pomocí execCommand můžeš začít implementovat jednotlivé základní funkce.
Chamurappi
Profil
Reaguji na sh00tera:
ačkoliv javascript s jQuery potažmo AJAXem aktivně používám
To ti k výrobě editoru moc nepomůže, jQuery zkresluje pohled na DOM a stírá či neimplementuje detaily, které budeš k tvorbě WYSIWYGu potřebovat.

Neporadil by mi někdo kde/jak začít?
Přidej k něčemu atribut contenteditable. On je ten WYSIWYG editor v podstatě už implementovaný v prohlížečích (počínaje Explorerem 5 a Mozillou 1.3), akorát nemá žádné čudlíky na obsluhu (až na klávesové zkratky) a jeho výstup je samorost. Ber jako samozřejmost, že se různé prohlížeče můžou chovat (hodně) různě, průběžně testuj ve všem.


Reaguji na janabaraska:
Udělej si textareu a různě si s tím hraj, přidávej různé prvky (nejprve jenom vložení textu jako tady na djpw)
To by byl krok vedle. U WYSIWYG editorů se nepíše do <textarea>, potřebuje se seznámit s úplně jinými vlastnostmi, než které jsou použité v editoru na této diskusi.
peta
Profil
http://axpsu.fpf.slu.cz/~web/x/wys.htm
http://www.jakpsatweb.cz/editory.html
Wysiwyg editor na šest řádků (Yuhů)

Uz radu let premyslim nad vlastnim, ale zatim nemam predstavu, jak to udelat jednoduse. Posledni napad zatim byl udelat div/object-y a napozicovat je. Podobne, jak se dela stranka. Div s textem, div s obrazkem, ... drag/drop, div tabulka, div bunka. Vyhoda je, ze pak neni treba resit pres query ruzne chovani ruznych prvku a odlisne pojmenovani vlastnosti (value, text, href, src, data).
Ale zatim zustalo jen u napadu :)
Mimochodem, uzivatele je treba silne omezit. Cim vic mu nechas volnosti, tim vic ta stranka nevypada k svetu. Soucasne to chce pro kazdy typ stranky vyrobit sablonu, treba kontakty na pracovniky, kde staci jen zmenit udaje, pripade nejake polozky smazat.

http://www.strejda-google.cz/?q=jquery+wysiwyg+editor
http://www.strejda-google.cz/?q=javascript+wysiwyg+editor
sh00ter
Profil
Tak pomocí contenteditable a execCommand se mi to povedlo docela slušně vyřešit :).

Jediný co teďka řešim je, že chci pomocí new "nahradit" textareu, kterou předám konstruktoru pomocí id, divem. Textarea skryju, pomocí createElement si vytvořim div s požadovanejma vlastnostma, ale nevim si rady s tim jak to připojit za tu textareu?
Str4wberry
Profil
Je celkem jedno kam editor připojíš. Pokud chceš přímo za ni, tak si ji něčím obal a bude stačit obyčejný appendChild do obalu.
Chamurappi
Profil
Reaguji na sh00tera:
Třeba metodou insertBefore. To jsou základy DOMu, jestli v nich plaveš, daleko nedopluješ.


Reaguji na peta:
Mimochodem, uzivatele je treba silne omezit. Cim vic mu nechas volnosti, tim vic ta stranka nevypada k svetu.
Přesně tak, uživatel je to nejnebezpečnější, co může editor potkat.

Posledních pár let řídím vývoj jednoho WYSIWYG editoru, kde uživatel nemůže vložit skoro nic. Jakákoliv složitější věc je uvnitř contenteditable reprezentována průhledným obrázkem (takže ji jde přesouvat, mazat, případně roztahovat, kopírovat), její vzhled je vykreslený v nižší needitovatelné vrstvě a její nastavení se odehrává mimo, ve specializovaném dialogovém okénku. Cokoliv v <div contenteditable>, co není odstavec, tučnost, kurzíva, horní/dolní index, odkaz, zalomení řádku nebo zástupný obrázek, pak můžu snadno vyházet a ze zbytku pohodlně vygenerovat několik různých přizpůsobených výstupů (standardní, mobilní, pro Kindle…). V uživateli editoru přetrvává naivní pocit, že má nad vzhledem výsledku kontrolu (což je hlavní důvod, proč používá WYSIWYG), přestože jen vyplňuje obecná data.
sh00ter
Profil
No já bych chtěl tu textareu nahradit, tak jsem si řek že to udělám tak, že textareu skryju a nacpu tam ten editor. A aby se mi vlastní html kód nekomplikoval, tak to chci celý udělat pomocí JS a id, který dám tý textaree. Pak mi bude stačit zavolat new wysiwyg(id) a JS všechno zařídí.

On ten editor je jen na formátování textu, tučný, kurzíva, odkaz atp. nic velkýho.
sh00ter
Profil
Tak už jsem to pomocí insertBefore vyřešil díky moc :)

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0