Wysiwyg-Editor: Ansicht, Funktionen und Hinweise zum Download

JavaScript: Ein fertiger Wysiwyg-Editor zum Download

Übersicht / Seite:

1. Wysiwyg-Editor (Ein kleines Tutorial, Einleitung)
2. Erster Beispiel (mit einem Listing für einen kleinen Wysiwyg-Editor)
3. Auswahllisten (für Schriftfamilie, Schriftgröße, Schriftfarbe und H...)
4. Einfügen von Hyperlinks (und Einfügen von Listen)
5. Einfügen von Fotos (und sonstigen Grafiken)
6. Inhalt verarbeiten (Quelltext ausgeben oder senden und speichern)
7. Fertiger Editor (Ansicht, Funktionen und Hinweise zum Download)
8. HTML speichern (Beispiel-Listing zum Speichern von Hypertext)
9. Farbpalette (nur als Demo oder zum Einbinden in Webseiten)

Ansicht und Funktionen

Auf den vorausgehenden Seiten wurden unterschiedliche Methoden und Funktionen für den Entwurf eines kleinen, auf JavaScript basierenden Wysiwyg-Editors vorgestellt. Zu den Funktionen gehörten unterschiedliche Methoden zur Formatierung des Textes ebenso wie Möglichkeiten, um Links und Grafiken einzubinden. Werden nun all diese bisher vorgestellten Methoden und Funktionen in einem Listing kombiniert, erhält der Anwender einen fertigen Wysiwyg-Editor. Der auf dieser Seite vorgestellte Wysiwyg-Editor wurde darüber hinaus noch um einige nützliche Details und Futures ergänzt, die den nachfolgenden Ansichten zu entnehmen sind.

Die Ansicht des Editors unterscheidet sich beim ersten Aufruf nicht von einem kleinem Formular, wie es sich in jede beliebige HTML-Seite einbinden lässt:

Ansicht des kleinen Wysiwyg-Editors beim ersten Aufruf.

Erst bei Bedarf werden bei einem Klick zusätzliche Formulare eingeblendet, so unter anderem ein Formular zu Platzierung von Links und ein Formular zur Einbindung von Grafiken:

Ansicht des kleinen Wysiwyg-Editors mit eingeblendeten
Linkformular und Grafikformular.

Ebenso lässt sich bei Bedarf ein Formular mit Textarea zur Ansicht und Bearbeitung des Quelltextes einblenden. Der bearbeitete Quelltext kann anschließend per Klick zurück an den Wysiwyg geschickt werden:

Ansicht des kleinen Wysiwyg-Editors mit eingeblendetem Quelltexteditor.

Weiterhin lässt sich ein Formular für den Titel und für die gebräuchlichsten Metadaten von HTML-Seiten einblenden. Sollten einem Anwender diese Angaben noch nicht reichen, so lässt sich das Formular noch um weitere Elemente erweitern.

Ansicht des kleinen Wysiwyg-Editors mit eingeblendetem Formular
für den Titel und Metadaten.

Hinweis: Die Funktion zur farbigen Hinterlegung von einzelnen Textpassagen steht im Internet Explorer nicht zur Verfügung. Alle anderen Methoden, Befehle und Funktionen wurden sowohl im Internet Explorer als auch im Firefox ohne Probleme getestet.

Download: Beachten Sie vor einem Download auch unsere AGB.

AGB | Download

weiterlesen » Speichern von Hypertext