Autor Zpráva
mr.xik
Profil *
Zdravím Vás,
již nějakou dobu se snažím - nebo spíše pokouším se vytvořit vlastní WYSIWYG editor. Základní editor s použitím <iframe> mi jede a s použítím textarey mi nesedí , že se zobrazí pouze HTML. Proto se obracím na Vás.
Jde mi oto, že potřebuji vytahovat věci z DB ( PHP ), Zobrazit v EDITORU, upravit a zase odeslat zpět. ( PHP kod nechci ten mi funguje ). Jde mi oto, jak do <IFRAME> dostat tento výpis z DB. Nijak mi to tam nejde dostat ( do textarey nebo divu s contentEditable to jde ). Také se chci zeptat, jestli nemáte někdo nápad na řešení tohoto problému. Přemýšlel jsem to udělat přes již výše zmiňovaný div s vlastností contentEditable ale zase mi nechtějí fungovat funkce wysiwygu ( Ztučnění, podtržení a pod.). Předem děkuji za jakokoliv radu a prosím, NEODKAZUJTE MNE NA TINMCE A POD.! Na ukázku posílám ukázku kódu.
<script language='JavaScript'>
function Init() 
{ 
editor.document.designMode = 'On'; 
}
function tucne() 
{ 
editor.document.execCommand('bold', false, null); 
}
function italic() 
{ 
editor.document.execCommand('italic', false, null); 
}</script>

<iframe id="editor" ...></iframe>
<input type="button" onClick="tucne()" value="B"  ...>
<input type="button" onClick="italic()" value="I" ...>

Joker
Profil
mr.xik:
NEODKAZUJTE MNE NA TINMCE A POD.
Zajímalo by mě proč ne, když tam jsou všechny podobné problémy už vyřešené, je to funkční a vyzkoušené řešení.

K dotazu jak dostat kód do <iframe>, tak iframe je vlastně jiná stránka, takže se to dá vložit v ní.
Nevím teda jak to je udělané a proč se vlastně používá <iframe>.
Chamurappi
Profil
Reaguji na mr.xika:
Na ukázku posílám ukázku kódu.
Moc malou. Dodej odkaz na živou ukázku.


Reaguji na Jokera:
proč se vlastně používá <iframe>
Starší prohlížeče neuměly přímo contentEditable na elementech, ale dokázaly přepnout celý dokument do editovatelného režimu (pomocí uvedeného document.designMode = "on"), proto spousta WYSIWYGů staví na rámech. Také si tím zajišťují vlastní rybníček pro práci se styly (nic se nedědí ze stránky s editorem) a skripty (uvnitř můžou dělat psí kusy s globálním kontextem, s prototypy apod.).
mr.xik
Profil *
No kód dál asi nemá smysl dávat. Je to rozšířeno o více funkcí jako např. Barva textu, vložení linku a samotný PHP script který se stará o výpis a zápis do DB. Co se týče TInyMce a podobně, díval jsem se jak fungují a ony využívají textareu. Bohužel, pokud já v příkladu použiju místo <iframe> textareu, nezobrazí se mi již editovaný text ( např. zelený text různé velikosti ) ale HTML kód i přesto, že je desingmode na on.
Dále, také bych rád místo iframe použil buď textareu a nebo onen zmiňovaný div s použitím
contentEditable
. V tom mi editace samotného textu krásně funguje i s odesláním do DB,bohužel ony styly typu tučně,italic a pod. vůbec nereagují. Pokud by někdo věděl, jak to vyřešit budu rád...Stačilo by, pokud víte, jak v textarea zobrazit čistý text a né html.
Chamurappi
Profil
Reaguji na mr.xika:
No kód dál asi nemá smysl dávat.
V tom případě nemá smysl hádat, v čem by mohla být příčina problému. Nežádal jsem o kód, ale o živou ukázku.

díval jsem se jak fungují a ony využívají textareu
Nevyužívají. Respektive vycucnou si z ní obsah a pak vyrobí <iframe> a pracují s ním stejně, jako (asi) ty.
mr.xik
Profil *
No, berme to tak, že celý kód je ten co jsem poslal, protože i tak se dá problém vyřešit. Nevím jestli jsme si rozuměli, ale potřebuju vědět, buď jak do <iframe> nacpat kód který vytáhne data z db ( '.$rows["obsah"].' např. ) nebo jak přinutit textareu aby zobrazila html kód ( ne přikazy ale čistý výsledek ... ). A nebo řešení 3, jak v udělat ( tedy jestli to jde aby v <div contentEditable ="jmeno">...</div> ) se dalo editovat pomocí příkazů v js.
<script language='JavaScript'>
function Init() 
{ 
editor.document.designMode = 'On'; 
}
function tucne() 
{ 
editor.document.execCommand('bold', false, null); 
}
function italic() 
{ 
editor.document.execCommand('italic', false, null); 
}</script>
<body onload="Init()">
<div id="editor" contentEditable</div>

<input type="button" onClick="tucne()" value="B"  ...>
<input type="button" onClick="italic()" value="I" ...></body>


Celkově mi jde oto, který element zvolit a jak to dotáhnout, aby to pracovalo. Nejlepší řešení se mi zdá <div contentEditable> ale bohužel nevím, jak přinutit kód aby fungoval. Popř. kam přesně nacpat php kód který vycucne data z db a vloží do <iframe> ( nefunguje value,nefunguje vložení mezi elementy a nefunguje ani src="phpkod" - ten hlásí acces denied. )
Chamurappi
Profil
Reaguji na mr.xika:
buď jak do <iframe> nacpat kód který vytáhne data z db
Do <iframe> se vždy načítá nějaká stránka. Nějaká jiná než ta, ve které <iframe> je. Takže buď budou data v ní, nebo bude prázdná a data do ní napumpuje nějaký JavaScript přes editor.document.body.innerHTML. Upřednostnil bych spíš první postup.

nebo jak přinutit textareu aby zobrazila html kód ( ne přikazy ale čistý výsledek ... )
Nejde.

jak v udělat ( tedy jestli to jde aby v <div contentEditable ="jmeno">...</div> ) se dalo editovat pomocí příkazů v js
Stejně jako u rámu, akorát na stávajícím documentu a musíš zajistit, že ten <div> dostane před formátovacím příkazem focus.
mr.xik
Profil *
řešení načítat to, co chci editovat z jiné stránky se mi zdá zbytečné - zbytečně vytvořit stránku, kde budu vytahovat data a vypisovat do iframe. Mohu se zeptat, jak udělat tu poslední variantu tedy s div?:) Nějaký příklad nebo něco? :)
Chamurappi
Profil
Reaguji na mr.xika:
<script language='JavaScript'> 
function tucne()  
{
  document.getElementById("editor").focus();
  document.execCommand("bold", false, null);
}
</script>
<div id="editor" contenteditable></div>
<input type="button" onclick="tucne();" value="B">
Kdybys vynechal ten čtvrtý řádek, fungovalo by to také, ale ztučňovalo by se cokoliv, co je na stránce označeného, nehledě na to, zda to je v contentEditable.
mr.xik
Profil *
Chamurappi:
Super tohle přesně jsem potřeboval :) můžu se ještě zepat, jak udělat to , aby se například když zapnu tučně aby se zobrazilo místo B třeba /B - jakože na odtrhnutí a aby nepokračoval tučný text? :) Jinak mockrát děkuji!

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