Frage

Ich versuche, verschiedene Stile in einem Textfeld zB fett, verschiedene Farben etc

hinzufügen

WYSIWYG-Editoren (zB tinyMCE) in Webseiten verwendet normalerweise tun dies, aber ich habe Probleme, herauszufinden, wie sie es tun.

Sie können dies nicht tun:

alt text http://www.yart.com.au/test/html.gif

So wie sie es tun erreichen?

War es hilfreich?

Lösung

Owen hat die richtige Idee. Diese Bibliotheken den Textbereich mit einem Iframe ersetzen und dann das Dokument des iframe setzen in designMode oder contentEditable Modus. Dies wahrsten Sinne des Wortes können Sie das HTML-Dokument in der iframe bearbeiten, während der Browser dann den Cursor Griffe und alle Tastenanschläge für Sie und gibt Ihnen eine api, die Styling-Änderungen (fett, kursiv, usw.) aufgerufen werden kann zu machen. Dann, wenn der Benutzer das Formular abschickt kopieren sie die Innerhtml aus dem iframe in den ursprünglichen Textbereich. Für weitere Informationen darüber, wie Sie diesen Modus aktivieren, und was kann man damit machen sehen: https: // developer.mozilla.org/En/Rich-Text_Editing_in_Mozilla

Allerdings Sie mein Vorschlag ist eine der bestehenden Rich-Text-Control-Bibliotheken zu verwenden, wenn Sie diese Fähigkeit auf Ihrer Website mögen. Ich habe ein vor gebaut und festgestellt, dass Sie große Mengen an Zeit den Umgang mit Browser Inkonsistenzen, um verbringen, um etwas zu bekommen, das gut funktioniert. Über die Unterschiede, wie Sie Bearbeitungsfunktionen aktivieren, werden Sie auch die HTML normalisieren, die erstellt wird. Beispielsweise erstellt IE <br> Elemente, wenn der Benutzer die Eingabetaste drückt und FF erzeugt <p> Tags. Für Stil ändert IE verwendet <b>, <i> usw. während FF Spannweiten mit Stilattribute verwendet.

Andere Tipps

In der Regel werden sie das Textfeld mit ihrer eigenen Anzeigekomponente wie ein div überlagern. Da der Benutzer tippt, nehmen Sie Javascript um den Inhalt eingegeben und die Stile im Anzeigebereich anwenden. Der Wert des Textbereiches ist der Text mit den HTML-Tags benötigten es im angegebenen Stil zu machen. So sichtlich der Benutzer sieht den formatierten Text.

Dies ist eine vereinfachte Erklärung natürlich.

Ich glaube, tinymce speziell eine Tabelle / iframe für die Anzeige verwendet (die anstelle der bestehenden TextArea- substituiert ist). Sobald Sie bereit sind, sie speichern Kopien alle Informationen zu dem Text für die Verarbeitung zurück.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top