2009-10-14 10 views
7

Ich versuche, einen Textarea-Inhalt bearbeitbar zu machen, und ich scheitere. Ich verwende diesen Code:Textarea contenteditable

<textarea id='' class='' name='notes' rows='12' cols='67' contenteditable='true' ></textarea> 

Ich bin ein Ergebnis wie http://html5demos.com/contenteditable

erwartet

Hat jemand eine Idee, warum es nicht funktioniert?

Edit:

Ich tue dies, weil ich eine oneliner zu tun versuche, ein Steuerelement zu einem Formular hinzufügen, in der (HTML) -Format Inhalt eingefügt werden kann und die Formatierung beibehalten. Ich versuche dies ohne viel Aufwand und ohne JavaScript-Code zu tun. Es scheint, dass dies nicht möglich ist. Ich werde diese Frage an einem Tag schließen, wenn keine weiteren Angaben zum Gegenteil hinzugefügt werden.

Antwort

1

Sie verwenden keine Textarea, Textareas sind bereits editierbar. Dies ist, was sie verwenden

+1

Ich hatte auf ein WYSIWYG gehofft, wo man fettem Text usw. einfügen kann. Der Grund dafür ist, dass ich dies in einem Formular posten muss, nachdem es bearbeitet wurde. –

+0

Ich brauche sowas auch. Ich habe gesehen, dass einige Leute ihren Inhalt tatsächlich in ein verstecktes Feld schreiben, aber Sie müssten dieses Update jedes Mal machen, wenn Sie eine Änderung vornehmen oder execCommand ausführen –

+0

Aber Abschnitt oder ähnliches Objekt unterstützt keine nativen Funktionen wie Platzhalter, Pflichtfelder usw. Das Textfeld kann keine Inhalte unterstützen, die im HTML-Format bearbeitet werden können. –

3

Haben Sie den richtigen Doctype oben auf Ihrer Seite eingestellt? Für HTML5 benötigen Sie folgenden Doctype:

<!DOCTYPE html> 

Auch warum ein Textarea? Textareas sind bereits editierbar.

+0

Wie auf Ben's Post, \t Ich hatte auf ein WYSIWYG gehofft, wo man Fetttext usw. einfügen und Formatierung beibehalten kann. Der Grund dafür ist, dass ich dies in einem Formular senden muss, nachdem es bearbeitet wurde. –

+2

Das Formular sendet die Formatierung nicht. Setzen Sie es stattdessen in ein div und verwenden Sie onSumbit, um das innerHTML des div zu lesen. – Marius

+0

Danke Marius. Ich hatte gehofft zu KISS, aber da gehen wir hin. –

0

Angesichts Ihrer Kommentare Antworten, würde ich jede der ausgezeichneten WYSIWYG-Editoren da draußen empfehlen. Keine Notwendigkeit, das Rad neu zu erfinden, und ich denke nicht contenteditable hätte Ihre Bedürfnisse sowieso nicht erfüllt.

Mein persönlicher Favorit ist CKEditor, aber es gibt viele, viele andere. TinyMCE ist auch sehr beliebt.

+3

Ich hatte gehofft, dass ein oneliner meine Probleme lösen würde (brauchte nur einen einfachen Textbereich, der formatierten Text enthalten konnte), aber das ist anscheinend nicht auf den Karten.Danke für den Vorschlag. –

1

Ich möchte nichts wiederholen, aber ich habe eine Demo zusammengestellt, die zeigt, was passiert.

http://gist.github.com/210327

Nur, dass ausführen, bearbeiten, was Sie wollen, und klicken Sie auf die ‚Output Formatierte Inhalt‘ Anweisung eine Warnmeldung mit einem Ausgang der eigentlichen HTML-formatierten Inhalte im contenteditable Elemente aufzunehmen. Zum Hinzufügen von Formatierungen usw. müssen Sie Schaltflächen erstellen, die eine Textänderungsfunktion für alle hervorgehobenen Elemente aufrufen. Ja, dieser Teil wird Spaß machen.

Nichtsdestotrotz hoffe ich, dass dies hilft.

+3

+1 für die Mühe, aber es ist nicht ganz das, was ich brauchte ... weil ich denke, was ich brauchte, ist nicht möglich. –