Textfeld live vorschau

Fragz · 13. Mai 2010, 22:48

HiHo,

Für ein bestehendes Projekt suche ich eine Live Vorschau.
User gibs was ins Textfeld ein, und nutz noch BBCodes. Gibt es eine Möglichkeite eine Livevorschau einzubinden so das der User direkt sieht wie es mit den Codes aussieht?

Gruß
Fragz

X-Eon · 14. Mai 2010, 08:25

Es gibt eine Möglichkeit. Nein eigentlich sogar zwei. Entweder mit AJAX die geparste Seite holen und darstellen oder direkt mit JS parsen und dann darstellen.

Gruß,
X-Eon

Fragz · 14. Mai 2010, 08:31

Hättest du da evtl ein Beispiel, JS ist absolut nicht mein Gebiet

X-Eon · 14. Mai 2010, 10:49

Klar. Aber ein komplettes Script werde ich dir nicht schreiben.

Quellcode

var txt=document.getElementById('deineTextbox').value;
txt=txt.replace(/[b]/g, "<strong>");
txt=txt.replace(/[/b]/g, "</strong>");
document.getElementById('deinVorschauDiv').innerHTML=txt;

Das hat natürlich einige Schwächen, aber um das Grundprinzip zu verdeutlichen sollte es genügen. Bessere/echte Parser findest du aber ohnehin im Netz.

Fragz · 14. Mai 2010, 11:08

dankeschön, irch werd mal testen

Fragz · 10. Oktober 2010, 23:19

HiHo,

Hab mir da nun was gebastelt

Quellcode

function livesync() {
post_text = document.getElementById('post_text').value;
post_text = post_text.replace(/\n/g,"<br/>");
document.getElementById('previewBox').innerHTML = post_text;
}

Quellcode

<div id="previewBox">
</div>
<textarea name="post_text" id="post_text" onKeyUp="livesync();" style="min-height:300px; min-width:700px;" class="bbctxtarea" ></textarea>

Wenn ich jetzt allerdings teile deines Codes anpasse und einfüge

Quellcode

post_text=post_text.replace(/[b]/g, "<strong>");
post_text=post_text.replace(/[/b]/g, "</strong>");

und ich habe im textfeld stehen

test

erhalte ich als livevorschau folgende ausgabe

[]test[] <r>

Was läuft da schief?

wasserfall · 16. Oktober 2010, 17:42

Die eckigen Klammern haben in einem Regex-Ausdruck die Bedeutung einer Zeichenklasse. Daher musst du sie escapen:

Quellcode

post_text=post_text.replace(/\[b\]/g, "<strong>");
post_text=post_text.replace(/\[/b\]/g, "</strong>");

Torben Brodt · 17. Oktober 2010, 09:45

Alternativ kannst du das Update auch via AJAX machen.
Dann musst du die ganze Logik (BBCodes, etc) nämlich nur einmal in PHP machen.

Aber das ist natürlich etwas komplexer, dazu solltest du schon Muße haben dich mit dem Thema richtig zu beschäftigen.
Lg

Textfeld live vorschau

Textfeld live vorschau

Quellcode

Quellcode

Quellcode

Quellcode

Quellcode

Teilen

Benutzer online 1

Tags