Tento jednoduchý JavaScript vám dokáže zobrazit náhled textu i s formátováním, který pravě píšete do textarey v určeném divu a to v reálném čase.
Form bude vypadat úplně stejně jako při vkládání formátování akorát přidáme to texarey onkeyup, takže celý form a div ve kterém se bude zobrazovat náhled bude vypadat:
<form method="post" id="vzkaz" action=""> <textarea rows="6" cols="55" name="zprava" onkeyup="javascript:nahled();"></textarea> </form> <div id="nahled"></div>
A JavaScript, který nám zařídí náhled v reálném čase zase:
<script type="text/javascript"> function nahled() { var tmp = document.all.zprava.value while(tmp.indexOf('\n') > 0) tmp = tmp.replace("\n", "\<br /\>"); /* Formátování */ document.all.nahled.innerHTML = tmp; } </script>
Takhle by mohl vypadat celý script, ale jelikož do textarey píšeme i s formátováním, tak následující JavaScripty přijdou místo /* Formátování */. Jako první bych chtěl upozornit, že když vkládáte například smajlíka do textarey, tak v JavaScriptu musíte dat pod vložení do textarey nahled();, takže JavaScript pro vkládaní smajlíků, který je ve vkládání formátování bude vypadat následovně:
function smajlik(smajlik) { document.forms.vzkaz.zprava.focus(); document.forms.vzkaz.zprava.value= document.forms.vzkaz.zprava.value+smajlik nahled(); }
a takhle to bude vypadat i u dalších vkládání formátování. Je to k vůli tomu, že kdyby jste tak neučinili, tak by se vložil smajlík jen do textarey a v náhledů by se objevil, až by jste něco připsali do textarey.
A teď slibované formátování. Jako první budeme vkládat smajlíky, takže do JavaScriptu přidáme:
while(tmp.indexOf(":-)") > 0) tmp = tmp.replace(":-)", "\<img src=\"/1.gif\" />"); while(tmp.indexOf(":-(") > 0) tmp = tmp.replace(":-(", "\<img src=\"/2.gif\" />"); while(tmp.indexOf(":-D") > 0) tmp = tmp.replace(":-D", "\<img src=\"/4.gif\" />"); while(tmp.indexOf(";-)") > 0) tmp = tmp.replace(";-)", "\<img src=\"/5.gif\" />"); /* a další */
Další formátování bude tučný, kurzívý a přeškrtnutý text typu [b], [i] a [s]. Toto formátování bude vypadat následovně:
while(tmp.indexOf('[b]') > 0) tmp = tmp.replace("[b]", "\<b/\>"); while(tmp.indexOf('[/b]') > 0) tmp = tmp.replace("[/b]", "\</b/\>"); while(tmp.indexOf('[i]') > 0) tmp = tmp.replace("[i]", "\<i/\>"); while(tmp.indexOf('[/i]') > 0) tmp = tmp.replace("[/i]", "\</i/\>"); while(tmp.indexOf('[s]') > 0) tmp = tmp.replace("[s]", "\<s/\>"); while(tmp.indexOf('[/s]') > 0) tmp = tmp.replace("[/s]", "\</s/\>");
a další formátování podle vašeho uváženi. Tímto bych článek zakončil a náhled celého díla naleznete zde.
Štítky:
JavaScript,
tutoriál,
zobrazit všechny štítky
! Našli jste v článku gramatické či pravopisné chyby? Je to z důvodu autorovy nemoci zvané dysgrafie. Tudíž všem děkuji za pochopení a každý článek pokud možno nechávám projít korekturou. !
Jeden dotaz chcel by poradit nejaku knihu alebo najlepsie stranku s tematikou na PHP crazydog nemozes mi poradit..
Lolek: To ti asi nedokážu poradit, protože žádné weby o PHP nečtu a knihu… No nevím. Mám tady dvě a z ani jedné jsem se moc nenaučil. Spiš mě naučili různé příklady.
{1} no ok dik i tak, j aj ja si myslim ze to z prikladov naucim najlahsie.
ghgf: lol? Proč?
Dobrý den,
nejsem expert na javascript, ale tento scriptík se mi líbí. Bohužel nefunguje na stráce s DOCTYPE XHTML 1.0 Strict, který používám. Přesně řečeno, nefunguje ten div nahledu. Třeba by to šlo nějak jednoduše opravit, ale opravdu JavaScript moc neumím. Děkuju.
Tomas: Hledal jsem na internetu a možná by ti pomohlo to trochu předělat. Já na to teď bohužel nemám čas, ale tohle by ti mohlo pomoct
Děkuju za rychlou odpověd. Kdyby se mi to povedlo, tak to sem určitě dám.
Ahoj, pěkný script, také mi nefungoval, kvůli použití
var tmp = document.all.zprava.value document.all.nahled.innerHTML = tmp;který jsem nahradil
var tmp=document.forms.vzkaz.zprava.value;
document.getElementById("nahled").innerHTML=tmp;
,pak vše fungovalo jak má. Ovšem potřeboval bych do automatického tvoření tagů přidat náhled odkazu, tzn. [url=xxx][/url], extra moc JS neovládám, takže nevím jak do vašeho zápisu vložit nějaký regulérní výraz aby xxx mohlo být cokoli, nenapadá vás řešení?
předem díky za odpověď
Casper: Za getElementById ti děkuji a z regulárními výrazy jsem si v JS ještě moc nehrál. Jen pár základních, ale tohle nevím. Zkus se podívat na Interval. Tam jsou nějaké příklady. Snad ti to pomůže.
Jen jeden dotaz. Co když nemám znaky v HTML, ale v BBCode?
{91} Však to jsou BBcode. Ale můžeš si tam vymyslet cokoliv.
{1} Jo vlastně promiň, nevšiml jsem si toho posledního kousku kódu. Stejně mi není jasné jak to zkombinovat. To co jsem vytvořil já dle mne fungovat nebude. Vypadá takto:
<script type="text/javascript"> function nahled() { var tmp = document.all.zprava.value while(tmp.indexOf('') > 0) tmp = tmp.replace("", "<br />"); /* Formátování */ document.all.nahled.innerHTML = tmp; } while(tmp.indexOf('[b]') > 0) tmp = tmp.replace("[b]", "<b/>"); while(tmp.indexOf('[/b]') > 0) tmp = tmp.replace("[/b]", "</b/>"); while(tmp.indexOf('[i]') > 0) tmp = tmp.replace("[i]", "<i/>"); while(tmp.indexOf('[/i]') > 0) tmp = tmp.replace("[/i]", "</i/>"); while(tmp.indexOf('[s]') > 0) tmp = tmp.replace("[s]", "<s/>"); while(tmp.indexOf('[/s]') > 0) tmp = tmp.replace("[/s]", "</s/>"); function smajlik(smajlik) { document.forms.vzkaz.zprava.focus(); document.forms.vzkaz.zprava.value= document.forms.vzkaz.zprava.value+smajlik nahled(); } while(tmp.indexOf(":-)") > 0) tmp = tmp.replace(":-)", "<img src="/1.gif" />"); while(tmp.indexOf(":-(") > 0) tmp = tmp.replace(":-(", "<img src="/2.gif" />"); while(tmp.indexOf(":-D") > 0) tmp = tmp.replace(":-D", "<img src="/4.gif" />"); while(tmp.indexOf(";-)") > 0) tmp = tmp.replace(";-)", "<img src="/5.gif" />"); </script>
{91} Zde máš náhled, tak se zkopíruj zdroják.
{1} Teď mě tak napadlo nešlo by udělat aby byl náhled přímo v hlavním textarea, dle mě je to nepěkné psát text a vidět text pod textarea, mělo by to vypadat asi nějak takto <textarea><div id=„nahled“></div></textarea> nebo tak nějak jinak by to mělo asi vypadat, že? Teď jsem na to možná kápnul. Nestačilo by před textarea hodit div?
{1} Můžeš prosím tě jen poradit co mám tady špatně?
Byl bych ti moc vděčný.
<script type="text/javascript" src="nahled.js"></script> <div id="nahled"><textarea name="text" style="width:750px;height:550px;border:none;"readonly="readonly" onkeyup="javascript:nahled();"><?php include("inc/zmeny/jidelni_listek.txt") ?></textarea></div>
{91} Asi ti nerozumím. To chceš v jednom textarea psát a druhém vidět kopii?
{1} Ne. Prostě mám textarea pro text, a do textarea chci vkládat formátování. Vypadá to takhle: Ukázka textu v textarea
{91} Jo takhle… Na tohle se nepoužívá textarea, ale iFrame.
{1} Aha, no a stejně to potřebuji vědět. Protože potřebuji i aby bylo vidět formátování textu zároveň v textarea při psaní v administraci. Nevím zda si to co jsem napsal pochopil, proto to napíšu po lopatě. Chtěl bych bylo vidět formátování textu, přímo v textarea.
{91} Tak tohle já nedokážu, na to už potřebuje JavaScript odborníka.
{1} A nevěděl by si prosím tě kde bych takového odborníka sehnal? Jo a mimochodem, v iFrame se mi taky nezobrazuje formátování textu. Nevíš čím to je? Použil jsem tento zápis, ale nejde, zápis jak kód vypadá napíšu teď:
<iframe src="inc/zmeny/jidelni_listek.txt" style="width:750;height:550;border:none;"></iframe>
{91} Odborníka neznám, ale to co ty potřebuješ, tak se nazývá WYSIWYG textarea. Příklad textarey
A proč ti v iframe nejde formátování? Protože formátování jde pouze v souborech HTML a ne TXT.