Autor Zpráva
Suta
Profil
Přemýšlel jsem, jakým způsobem by se dal vytvořit jednoduchý editor do webových stránek např. pro vkládání a formátování textů bez použití <textarea>.

(pro názornost viz http://www.fckeditor.net/demo, tento samozřejmě nepokládám za jednoduchý...)

Pokusy jsem na svých stránkách došel někam sem.

1. Pokud bych navíc ve zmíněném příkladu textareu skryl a při onclicku na div, který by textareu nahrazoval bych na ni pouze hodil focus, docílím toho, že můžu formátovat text, přidat vizuální ikony, používat šipky pro pohyb v textu, naprogramovat vlastní kurzor atd., takže uživatel na první pohled nepozná, že nepíše do textarey.

2. Zaseknu se však v bodě, kdy bych chtěl změnit kliknutím myši pozici kurzoru v textu (což u textarey jde, avšak v mém příkladě kdy je skrytá nikoliv). Jediné, jak by to ve zmíněném případě šlo by snad bylo každý znak obalit spanem s jedinečným id a onclickem, díky čemuž bych zjistil, o který znak se jedná a pak za něj nastavil vlastní kurzor. To je však, jak uznáte, cesta do pekel...

Nevím, jakým způsobem je naprogramován editor uvedený v prvním odkazu a daný kurzor. Napadlo mě snad ještě vypočítávání pozice podle polohy znaku a polohy myši, to ale zaprvé nevím, do jaké míry by to bylo použitelné, zadruhé mi to přijde taky hodně kostrbaté.

Závěrem, za co budu všem vděčný:
- jakékoliv rady a postřehy k danému tématu či a odkazy na případné techniky zvládnutí daného problému
- odkazy na jakékoliv články pojednávající o způsobu naprogramování takovéhoto editoru (ne tedy že bych někdy něco tak komplexního jako je fck editor zvládnul, jde mi o techniku...)
- odkazy na jakékoliv jednoduché editory, z jejichž kódu by se dalo inspirovat

Díky všem.
Chamurappi
Profil
Reaguji na Sutu:
bez použití <textarea>
FCKEditor a jemu podobné nepoužívají na psaní element <textarea>.

Viz:
wysiwyg v textarea-e
Jak fungují textové editory jako TinyMCE?
Názor na wysiwyg editor
Bubák
Profil
http://teststranek.kvalitne.cz/ Odkazy na HTML JS editory mám na konci, tak si to prober, zajímat tě budou asi TinyMCE a Whizzywig.
Suta
Profil
Díky moc! Nevěděl jsem, že něco takového existuje.

Mám tedy ještě pár otázek.
1. Jaká je podpora v dnešních prohlížečích? Je tento objekt podporován od IE 5, Firefoxu i Opeře?

2. Využívají dobré editory zabudované ve webech právě tohoto objektu?

3. Chápu správně techniku, kdy postup je nějak takto?
- označím text, vyberu operaci (tučný text), navážu událost, která vybraný text obalí patřičným kódem a tento kód vloží zpět do objektu a nastavení kurzoru na minulou pozici?

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: