|
SEO Welten
Buchempfehlungen
|
|
Wysiwyg-Editor statt Formular mit Textarea
Kleines Tutorial: Wysiwyg-Editor / Einleitung
Übersicht / Seite:
- Wysiwyg-Editor (Ein kleines Tutorial, Einleitung)
- Erster Beispiel (mit einem Listing für einen kleinen Wysiwyg-Editor)
- Auswahllisten (für Schriftfamilie, Schriftgröße, Schriftfarbe und H...)
- Einfügen von Hyperlinks (und Einfügen von Listen)
- Einfügen von Fotos (und sonstigen Grafiken)
- Inhalt verarbeiten (Quelltext ausgeben oder senden und speichern)
- Fertiger Editor (Ansicht, Funktionen und Hinweise zum Download)
- HTML speichern (Beispiel-Listing zum Speichern von Hypertext)
- Farbpalette (nur als Demo oder zum Einbinden in Webseiten)
Vor- und Nachteile
Eine einfache Textarea hat sicherlich viele Vorteile. Ein Formular ist schnell
erstellt und, gleich ob der Versand per POST oder GET erfolgt, die übermittelten Daten lassen sich mit etwas
Erfahrung und mit Hilfe von regulären Ausdrücken verhältnismäßig leicht filtern. Dort, wo dem Nutzer die
Möglichkeit zur Formatierung der Eingaben ermöglicht werden soll, kann auf BBCode zurück-gegriffen werden.
Ein Wysiwyg-Editor ist hingegen benutzerfreundlicher, gestattet dieser doch, dass die Benutzer sich bei
der Formatierung ihrer Eingaben nicht auf BBCode umstellen müssen, sondern wie mit einem Schreibprogramm
den Text oder die Seite gestalten können. Der Nachteil liegt in der Sicherheit, da hier die Gefahr der Einschleusung
von unerwünschten HTML-Tags und von Schadcode wesentlich höher liegt und die Eingaben schlechter kontrollierbar
sind. Überall dort, wo die Eingabe von Text oder Daten und deren Bearbeitung nur wenigen registrierten Benutzern
ermöglicht wird und dadurch Sicherheitsrisiken minimiert werden, wie zum Beispiel bei Weblogs, haben sich
Wysiwyg-Editoren bestens bewährt.
Das Prinzip
Vom Prinzip ist es unkompliziert, einen kleinen Wysiwyg-Editor zu realisieren, vorausgesetzt Grundkenntnisse
in JavaScript und DOM (Document Object Model) sind vorhanden. Alles was ansonsten von Nöten ist,
das ist ein herkömmliches Webformular, bei dem die Textarea gegen einen iFrame ausgetauscht werden muss.
Weiterhin ist es wesentlich, dass der iFrame eine Id erhält. Um den iFrame bzw. das Dokument im iFrame editierbar
zu machen, muss die Eigenschaft designMode für den Bereich des iFrames bzw. für das im iFrame geöffnete
Dokument aktiviert werden.
Die erforderlichen Funktionen für den Designer-Modus wurden zuerst von Microsoft
für den Internet Explorer entwickelt, doch bereits im Jahre 2003 folgte Mozilla und im Jahre 2006 Opera.
Ab den Versionen IE 5.5, Mozilla 1,3 und Opera 9.0 ist die Eigenschaft designMode im Funktionsumfang der
jeweiligen Browser enthalten[1] und auch der Chrome von Google lässt sich in den Entwurfsmodus
versetzen.
Die Vorgehensweise, wie die Eigenschaft designMode auf "on" zu setzen
ist, unterscheidet sich von Browser zu Browser etwas (Stand: 2010). Gelegentlich sind hier Scriptbeispiele
mit Browserweichen zu finden. Die nachfolgende Vorgehensweise ohne Browserweiche führte beim neuen Internet
Explorer und Firefox zum Erfolg. Weitere Einzelheiten und Beispiele sind auf der Seite
Converting an app using document.designMode...
aufgeführt.
Vom Grundsatz wird im Beispiel der Reihenfolge nach im geöffneten Dokument zuerst mit Hilfe der Methode
getElementById() auf ein Element mit der id="meinEditor" und in Folge auf den Content im Fenster
des Elementes bzw. auf das Dokument im Fenster des Elementes zugegriffen und die Eigenschaft designMode
für dieses Dokumentenfenster bzw. für das Dokument im Fenster des iFrames aktiviert.
<html>
<head>
<script type="text/javascript">
function schalteEin() {
var derFrame, meinWert;
derFrame = document.getElementById("meinEditor").contentWindow.document;
meinWert = derFrame;
derFrame.designMode = "On";
}
</script>
</head>
Da designMode bisher nur in der Funktion schalteEIN() gekapselt ist, muss
diese Funktion noch angewendet werden. Dies kann mit Hilfe des onload EventHandlers im einleitenden body-Tag
geschehen. Der EventHandler onload ruft die Funktion schalteEIN() auf, so wie die Seite im Browser vollständig
geladen ist.
<body onload="schalteEIN()">
<iframe id="meinEditor" src="datei.html" width="540" height="220"></iframe>
</body>
</html>
Editierbar wäre die im iFrame geladene HTML-Seite bzw. der Inhalt des iFrames
bereits, doch könnte nach bisherigen Stand des Listings nur im iFrame geschrieben werden, ohne Möglichkeiten
die Schrift individuell zu formatieren. Um die Schrift formatieren zu können, fehlt noch ein Menü, welches
den Zugriff auf die wichtigsten stilistischen Utensilien erlaubt. Hierzu auf der nächsten Seite mehr.
weiterlesen » Erste Beispiel für einen kleinen Wysiwyg-Editor
zu 1.) Nach unterschiedlichen Quellen, wie:
Javascript-Wysiwyg-Editoren / Farbe für den Text
Erschienen im Linux-Magazin 2007/04
Irrtum jedoch vorbehalten!
|
|
Navigation
Finden und
gefunden werden ...
- Optimierung -
Webcoding
Übersicht
Web Services
Tutorials &
diverse Listings
und vieles mehr...
|
