Textfeld live vorschau

Fragz

Professional

Posts: 256

Thursday, May 13th 2010, 10:48pm

Textfeld live vorschau

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

Intermediate

Posts: 167

Friday, May 14th 2010, 8:25am

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

Professional

Posts: 256

Friday, May 14th 2010, 8:31am

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

X-Eon

Intermediate

Posts: 167

Friday, May 14th 2010, 10:49am

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

JavaScript Code

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

Professional

Posts: 256

Friday, May 14th 2010, 11:08am

dankeschön, irch werd mal testen

Fragz

Professional

Posts: 256

Sunday, October 10th 2010, 11:19pm

HiHo,

Hab mir da nun was gebastelt

JavaScript Code

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

HTML Code

<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

JavaScript Code

1
2

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

Trainee

Posts: 40

Saturday, October 16th 2010, 5:42pm

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

JavaScript Code

1
2

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

Torben Brodt

Administrator

Posts: 8,454

Sunday, October 17th 2010, 9:45am

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