Wie kann man eine Textvorschau programmieren?

... komplette Frage anzeigen

1 Antwort

Du bindest mittels JavaScript einfach eine Funktion an das keypress und keyup-Event deiner Textarea (keypress, damit du auch beim Gedrückthalten der Taste ein entsprechendes Update erhälst), in der du den Wert der Textarea als Inhalt für das jeweilige div übermittelst. Mit jQuery dürfte das wie folgt aussehen:

var livePreview = function() {
$("#previewContainer").text($(this).val());
}

$("#textinput").keypress(livePreview).keyup(livePreview);

(Ausgehend davon dass deine Vorschau-Div die ID "previewContainer" hat und deine Textarea die ID "textinput", ggf. Selektoren anpassen)

Solltest beachten, dass deine Vorschau-Div im CSS

white-space: pre-wrap; 

(bzw white-space: pre-line) gesetzt hat, da sonst Zeilenumbrüche nicht angezeigt werden.

Vorschau: http://jsfiddle.net/RZwmX/1/

Kommt natürlich drauf an, wie komplex du das ganze haben willst, der obige Code kann nur eine simple 1:1-Vorschau ohne Formatierung anzeigen, fragt sich wie hilfreich das Ganze ist. Wenn du eine komplexere Vorschau haben möchtest, solltest du nach einem Javascript-WYSIWYG-Editor suchen der deinen Wünschen entspricht und den du dann implementierst. (Gibt da allerdings genug Auswahl, dass ich da nicht weiterhelfen kann)

Antwort bewerten Vielen Dank für Deine Bewertung
Kommentar von Martengame
29.02.2016, 15:15

Danke erst mal, aber weißt du wirklich nicht wie man noch css darein bringen kann. Also ich habe schon so was programmiert, dass bei bestimmten Zeichen der Text anders wird, nun muss ich das auch noch so reinbringen, dass das in der Vorschau funktioniert

0