Autor | Zpráva | ||
---|---|---|---|
sh00ter Profil |
#1 · Zasláno: 7. 8. 2011, 23:44:11
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 |
#2 · Zasláno: 8. 8. 2011, 00:22:47
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 |
#3 · Zasláno: 8. 8. 2011, 00:23:55 · Upravil/a: sh00ter
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 |
#4 · Zasláno: 8. 8. 2011, 01:59:57
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 |
#5 · Zasláno: 8. 8. 2011, 02:21:09
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 |
#6 · Zasláno: 8. 8. 2011, 09:24:42 · Upravil/a: peta
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 |
#7 · Zasláno: 8. 8. 2011, 13:55:17
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 |
#8 · Zasláno: 8. 8. 2011, 14:24:46
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 |
#9 · Zasláno: 8. 8. 2011, 14:29:27
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 |
#10 · Zasláno: 8. 8. 2011, 14:32:31
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 |
#11 · Zasláno: 8. 8. 2011, 18:44:25
Tak už jsem to pomocí insertBefore vyřešil díky moc :)
|
||
Časová prodleva: 14 let
|
0