WYSIWYG Editor für Ihre Kontaktformulare mit dem jQuery Plugin CLEditor

Mit dem jQuery Plugin CLEditor können Sie Felder in Ihren Web- Formulare auf einfache Art und Weise zu einem WYSIWYG HTML Editor machen und verschafft somit Anwendern mehr Bedienkomfort in der Eingabe.

Ideal für Kontaktformulare, Foren, Gästebücher etc. .

Das Plugin ist in seiner minimierten Form ca. 8KB „klein“ und bietet Cross Browser Kompatibilität.
(Getestet in IE 6.0+, FF 1.5+, Safari 4+, Chrome 5+ and Opera 10+).

Besonders gut gefallen mir bei diesem Plugin die flexiblen Einstellungsmöglichkeiten und der fixe Aufbau des Editors.

Die Funktionen im Detail

CSS Unterstützung

Alle Bereiche des Editors können via CSS gestaltet werden.

So können Sie z.B. Ihre eigenen Icons einbinden oder die Hintergrundfarbe der Toolbar verändern.

Größe des Editors

Die Breite und Höhe des Editors kann über fixe Maße oder über Prozent- Werte definiert werden und kann somit an Ihre Design- Vorstellungen angepasst werden.

Parameter

Über einfache Plugin- Parameter können Sie entscheiden welche Funktions- Icons im jeweiligen Editor verwendet werden sollen. Max. Möglich sind die folgenden Funktionen:

• bold - Fettschrift
• italic – kursive Schrift
• underline - unterstreichen
• strikethrough -durchstreichen
• subscript - Text tiefstellen
• superscript – Text hochstellen
• font size - Schriftgröße
• style- Absatzformate/ Überschriften
• color - Textfarbe
• highlight - Hintergrundfarbe
• removeformat – Formatierung entfernen
• bullets – unsortiert Liste
• numbering - nummerierte Liste
• outdent - Text Abstand verringern (“ausrücken”)
• indent – Text einrücken
• alignleft - linksbündig
• center –zentriert
• alignright - rechtsbündig
• justify - Blocksatz
• undo - Rückgängig
• redo - Wiederherstellen
• rule – horizontale Linie
• image – Bild einfügen (von URL)
• link – Link einfügen
• unlink – Link entfernen
• cut - ausschneiden
• copy - kopieren
• paste - einfügen
• print - durcken
• html – in HTML Modus umschalten

Flexible Handhabung der Auswahllisten

Die Funktionen colors (Hintergrund- und Textfaber, fonts (Schriftart), sizes(Schrfitgrößen) und styles(Absatzformate, Überschriften etc.) werden über Auswahllisten gesteuert.

CLEditor bietet die Möglichkeit die Inhalte dieser Listen flexible zu handhaben und über weitere Parameter- Definitionen zu konfigurieren.

Möchten Sie z.B. dass Texte innerhalb des Editors nur in 3 Farben markiert werden können, verändern Sie einfach die Parameter- Liste zu den „colors“.

Methoden für JavaScript Aktionen

Haben Sie die Absicht den CLEditor z.B. für die Entwicklung Ihrer eigenen JavaScript Anwendung nutzen, stehen Ihnen hierzu zusätzlich die folgenden Methoden zur Verfügung:

.focus()
Mit der Methode .focus() können Sie den Fokus auf den Editor setzen. Das ermöglicht dem Anwender direkt im Editor schrieben zu können ohne ihn vorher anklicken zu müssen.

.htmlMode()
Möchten Sie ermitteln ob der Editor sich gerade im HTML oder WYSIWYG Modus befindet, verwenden Sie die Methode .htmlMode().  Rückgabewert true oder false.

.resize()
Mit Hilfe dieser Methode können Sie den Editor dazu veranlassen seine Größe anzupassen. Dies kann z.B. dann notwendig sein wenn der umschließende Container seiner Größe verändert oder das Browser- Fenster verkleinert bzw. vergrößert wird.

.select()
Über die Methode .select() können Sie alle Inhalte des Editors zur Auswahl markieren.

.selectedText()
Möchten Sie ermitteln welcher Text gerade innerhalb des Editors markiert ist, verwenden Sie die Methode .selectedText().

.updateFrame()
Um den Inhalt des Editor- Frames mit den Inhalten des textarea Feldes zu aktualisieren verwenden Sie die Methode updateFrame()

.updateTextArea()
Möchten Sie im umgekehrten Fall die textarea mit den Inhalten aus dem Editor- Frame aktualisieren, verwenden Sie die Methode updateTextArea()