Kurze Einführung

MySQL ist eine relationale Datenbank, bei der sozusagen mehrere Tabellen »in Beziehung« zueinander stehen. Wer sich nicht in diesem Metier auskennt wird jetzt vermutlich sagen: „Das freut mich für MySQL, aber ich verstehe nur Bahnhof!“ Das kann ich verstehen. Wer näheres wissen möchte, bei Wikipedia bekommt man erste Infos zum Verständnis.

OK, weiter im Text: Wer sich also eine größere Datenbank mit mehreren Tabellen aufgebaut hat, kennt das Problem bei der Dateneingabe über phpMyAdmin und fragte sich bestimmt des öfteren: „Wie war noch einmal die ID aus Tabelle X, die ich jetzt einfügen muss, um die Tabellen zu verknüpfen?“ Eine Eingabehilfe gab es bisher nicht. Ich selbst habe mir oft mittels PHP eine komfortablere Eingabemaske erstellt.

Jetzt gibt es den Designer

Nachdem man eine Datenbank ausgewählt hat, klickt man oben im Menü auf Designer. Zur Verdeutlichung habe ich ein kleines Adressbuch angelegt, die Relation wird mit der Tabelle Land verwirklicht. Alle weiteren Schritte zeigt folgendes Bild:

Ich hoffe, so konnte ich die einzelnen Schritte gut vermitteln. Mit dem Designer hat phpMyAdmin deutlich an Komfort gewonnen. Die Eingabe der Daten geht jetzt recht flott von der Hand.

Besteht vielleicht Interesse an einem kleinen MySQL-Tutorial? Dann lasst es mich wissen und ich schau mal, was ich machen kann.

Eclipse selbst lässt sich aus den Paketquellen von Ubuntu installieren. Aptana richtet sich speziell an die Webentwickler und kann von der entsprechenden Seite heruntergeladen werden. Man entpackt die Pakete in einen geeigneten Ordner, es kann sogar innerhalb des Home-Ordners sein. Alle Dateien und Abhängigkeiten, selbst die Java-Runtime, sind im Paket enthalten. So reicht dann auch das Löschen des Ordners, um das Programm eventuell wieder loszuwerden. Wer das zu schätzen weiß, kann auch auf die Installation des „großen“ Eclipse vorerst verzichten und es mit EasyEclipse versuchen. Auch dieses Eclipse-Paket enthält alle benötigten Dateien und Abhängigkeiten.

Positives

Dank Java läuft Eclipse auch unter Linux. Leider bin ich mir nicht sicher, ob das ein Fluch oder Segen ist (Erklärung folgt unter „Negatives“). Egal, welchen Fenstermanager man nutzt, Eclipse bringt sein eigenes Interface mit. Und ich muss sagen, das sieht gut aus!

Eclipse und seine Ableger arbeiten mit sogenannten Perspektiven. Das heißt, für jede denkbare Tätigkeit – die Arbeit mit Java, PHP, HTML, fürs Debuggen oder die Synchronisation im Team usw. – lässt sich die Programmoberfläche nach belieben anpassen bzw. vorgefertigte Perspektiven laden. Eine gute Idee, so etwas habe ich bisher nirgends gesehen.

Der Editor selbst bringt alles mit, was man sich wünscht. Für HTML, PHP, CSS und vor allem für Javascript und bekannte Frameworks wie jQuery, Dojo, Mootools, Prototype, … und andere Sprachen wie Python, Ruby, Adobe Air usw. lassen sich per Plugin die notwendigen Unterstützungen nachladen. Wer gern mit einer der Ajax-Bibliotheken arbeitet, für den ist Eclipse/Aptana unbedingt einen Blick wert. Ich glaube, kein anderes Programm ist so vielfältig.

Autocomplete-Funktion und Calltipps in PHP und HTML sind ausgezeichnet

Die Umsetzung der jeweiligen Unterstützung ist lobenswert. Autocomplete, Calltipps, Outline-Ansichten, u.v.m. ? da kann man nur sagen: „Herz, was willst Du mehr!“ Ja, wäre da nicht die negative Seite, auf die wir nun zu sprechen kommen.

Negatives

1. Der Start dauert länger als das ganze Betriebssystem unter Jaunty. Damit kann man leben, als Standardeditor für die schnelle Anzeige von HTML‑ oder PHP-Dateien fällt Eclipse/Aptana aber aus. Es sind eben Java-Programme.

2. Man wird „gezwungen“ mit sogenannten Workspaces zu arbeiten. Hier scheiterten schon frühere Versuche von mir, mich mit Eclipse/Aptana anzufreunden. Seit Jahren habe ich meine eigene Ordnerstruktur, mit der ich sehr gut zurecht komme. Das Programm bietet zwar an, Ordner zu importieren, dabei stellte ich zwei Mängel fest: Einmal werden die Dateien richtig importiert, bei einem anderen Versuch anscheinend nur verlinkt. Neue Dateien erstellt die aktuelle Version von Aptana aber im Workspace und nicht in meinem Projektordner. Das ist konfus – liese sich vielleicht durch die richtigen Einstellungen beheben (welche sind das?) – aber ich traue dem ganzen nicht, es bleibt immer ein unsicheres Gefühl. Denn das Letzte, was ich benötige, ist ein Chaos in meinen Projekten!

Dann importierte ich ein älteres Projekt mit vielen HTML/PHP-Dateien. Will ich diese öffnen, stürzt das Programm gnadenlos ab. Und auch das ist leider nicht annehmbar. Edit: Auch wenn diese nicht im UTF-8-Format, sondern unter Windows mit MS-ANSI und der Zeichencodierung ISO-8859–1 gespeichert wurden.

3. Apropos Abstürze: Die aktuell getestete Version von Aptana lief im Laufe dieses Tests stabil, EasyEclipse und frühere Tests zeigten mir aber, dass diese Programme recht absturzfreudig sind – den Grund kann ich nur auf die Java-Engine schieben.

4. Der Editor bietet wie erwähnt viel Unterstützung, geht aber auch zu Lasten der Geschwindigkeit. In größeren Dokumenten scrollen oder den Cursor bewegen – das geht dann etwas behäbig. Und ich habe einen recht schnellen PC mit DualCore-Prozessor und 4GB Speicher! Aber das Schlimmste: Lösche ich mit der Backspace-Taste; halte die Taste längere Zeit gedrückt und lasse sie dann los, löscht der Editor munter weiter. Ein eigenartiges Verhalten!

5. Die Vorschau von PHP-Dateien im Browser, geschweige denn das Debuggen im Programm selbst zu konfigurieren, hat mich schon einige Nerven gekostet. EasyEclipse verlangt den Pfad zur php.exe. Unter Linux? Bei Aptana habe ich es mit einem Testprojekt und einer einfachen Testdatei hinbekommen. Ich habe in den Projekteigenschaften mit den Einstellungen für PHP-Preview experimentiert und irgendwann ging es, als ich Use absolute URL wählte und die Adresse eingab. Dann versuchte ich es mit dem Projekt, welches ich in den Workspace importierte und stellte den korrekten Pfad über http://localhost/… ein. Die vorhandenen Dateien konnte ich nun aufrufen. Aber neue Dateien legte Aptana im Workspace an und dann erhalte ich eine 404-Fehlermeldung. Tut mir leid, ich habe es dann aufgegeben.

Fazit

Ich möchte niemandem die Benutzung von Eclipse oder Aptana ausreden. Das Programm ist ein mächtiges Werkzeug und gerade für jene interessant, die mit verschiedenen Sprachen arbeiten, im Team und Plattformübergreifend. Aber man muss sich darauf gefasst machen, einiges an Zeit in die Einarbeitung zu investieren. Ich erwähnte es schon einmal: Jedes Programm folgt einer Philosophie (meist der der Entwickler). Hat man diese Philosophie verstanden und lässt sich darauf ein (Stichwort Workspaces), kann man bestimmt gut damit arbeiten. Außerdem habe ich – was die Funktionen betrifft – nur an der Oberfläche gekratzt! Aber es gibt Alternativen, weshalb ich mir weitere Versuche erspare.

Es existieren weiterhin kostenpflichtige Angebote (z.B. Aptana Pro und Aptana Cloud) und auch in der Community ist einiges los. Wer sich mit Aptana beschäftigen möchte und gut Englisch kann, der sollte sich mal bei tv.aptana.com umsehen, da gibt es jede Menge Screencasts. Sowas wünscht man sich für viele andere Programme auch.

‹ironie› Aber anscheinend braucht man für das Programm so viele Videos, um es überhaupt zu verstehen?</ironie› Aptanafans mögen mir diesen kleinen Scherz auf Kosten ihrer heiligen Kuh bitte nachsehen. Vielleicht habt Ihr für die Leser ja noch den ein oder anderen Tipp?

Das war der 5. Teil dieser Reihe, es folgen noch Quanta und Kommodo Edit. Ich würde mich freuen, wenn ihr dann wieder vorbeischaut. Bis dann, Turicon.

Navigation

• Teil 1: Grundlegendes
• Teil 2: Gedit
• Teil 3: Geany
• Teil 4: Bluefish
• Teil 5: Eclipse/Aptana

1. Habari: Das Grundsystem läuft ganz anständig, enthält aber nur die wirklich elementaren Bestandteile eines Blogs und das ist zu wenig. Schon für Pingbacks muss man auf Plugins zurückgreifen. Ich habe einige Plugins installiert und da liegt der Hund leider begraben. Ich erhalte Fehlermeldungen am laufenden Band. Außerdem gibt es keine Kategorien, sondern nur Tags. Das ist kein Problem, wenn man ein neues Blog anfängt, Ubuntu-Center jedoch hat bald 200 Artikel und 600 Kommentare! Sorry, für den produktiven Einsatz ist es für das System leider noch zu früh.
2. Serendipity: Hinter jedem System steckt eine „Philosophie“. Und es tut mir leid, die habe ich bei Serendipity noch nicht verstanden. Das Templatesystem erfordert viel Einarbeitungszeit, hier bin ich noch am überlegen, ob ich mir das antue.
3. Textpattern: Das ist eher ein CMS, welches auch als Blog genutzt werden kann. Der Adminbereich ist aufgeräumt und logisch angeordnet, da könnte man sich reinarbeiten. Auch hier müsste ich mich recht intensiv mit den Templatetags usw. beschäftigen, das sieht aber einfacher als bei Serendipity aus. Leider scheiterte jeder Versuch, einen ordentlichen Transfer der Artikel, Kommentare und Links zu erreichen.

Letzteres funktionierte bis jetzt bei keinem der Systeme, wäre aber sehr wichtig. Ich würde gerne jedes der 3 Systeme verwenden, wenn ich ein neues Blog anfangen müsste. Aber so stehe ich jetzt ernsthaft vor der Frage: „In den sauren Apfel beißen und bei WordPress bleiben – oder selbst ein System programmieren?“ Letzteres wäre schon eine Herausforderung. Ich habe ja ein eigenes CMS, welches ich bei meinen Kunden einsetze. TinyMCE als Editor ist da schon eingebunden, eine Bildverwaltung, Dateiverwaltung, Bildergalerie, Feedgenerator (für News) und einiges mehr sind vorhanden.

Ein erster Blick auf die WP-Datenbankstruktur zeigt mir, dass ich hier einen Importfilter erstellen könnte. Was würde für ein Blog noch fehlen?

1. Kommentarfunktion (mit funktionierendem Spamfilter)
2. Feeds für Artikel, Kommentare allgemein und zu einzelnen Artikeln
3. Pingback/Trackback – Funktion
4. Videoverwaltung und Einbinden von Youtube-Videos
5. URL-Rewrite-Modul

Was vermisst Ihr denn in der Liste oder allgemein bei Blogsystemen? Desto mehr ich darüber nachdenke, desto besser gefällt mir die Idee für ein „Ubuntu-Blogsystem“. Einzig Punkt 2 bereitet mir ein wenig Kopfschmerzen, da habe ich noch keinen Plan. Muss mal sehen, wie das mit der XML-RPC-Schnittstelle funktioniert. Oder gibt es jemanden da draußen, der sich damit auskennt? Da sind Tipps und auch Hilfe gern willkommen.

Bluefish ist DER Gnome-Webeditor. Lange Zeit wurde an dem Editor gearbeitet und gefeilt, bis dann endlich 2005 die Version 1.0 erschien. Aktuell wird 1.0.7 mit Ubuntu ausgeliefert. Es wird weiterhin an Bluefish gearbeitet, aktuell ist man bei Version 1.3.5-unstable (Juni 2009).

Nun stellt sich die Frage, welchen Editor teste ich? Ich habe mich für die Unstable-Version entschieden, werde aber auch hier und da auf 1.0.7 eingehen. Bluefish war der erste Webeditor, den ich vor Jahren unter Linux testete und auch der Erste bei meinem Umstieg auf Ubuntu (Edgy). Nun ja, er verhielt sich damals recht behäbig, die Schrift sah grausam aus, Suchen und Ersetzen dauerte bei großen Dokumenten eine Ewigkeit und er stürzte auch gern ab. Mit gemischten Gefühlen ging ich dann an den Test für diese Serie. Was soll ich sagen – jetzt bin ich richtig baff und habe mich fast in ihn verliebt.

Installation der Unstable-Version

In den Ubuntupaketen ist die Version 1.0.7 vorhanden. Wer die Unstable-Version installieren möchte (bitte beachten, dass Ihr das auf eigene Gefahr macht!), kann die einzelnen Dateien als .deb-Pakete hier herunterladen (lasst Euch nicht von der Überschrift „Intrepid“ täuschen) oder bindet gleich die Quellen in /etc/apt/sources.list ein:

  deb     http://debian.wgdd.de/debian unstable main contrib non-free
  deb-src http://debian.wgdd.de/debian unstable main contrib non-free

Weiterhin wird der Archivschlüssel benötigt. Ladet diesen hier herunter, öffnet ein Terminal und bindet ihn mit folgender Anweisung ein, wenn die Datei auf dem Desktop liegt:

  sudo apt-key add Desktop/wgdd_archive_key.asc

Anschließend die Paketinfos updaten und Bluefish installieren:

  sudo apt-get update
  sudo apt-get install bluefish-unstable

Die Unstable-Version wird neben einer eventuell vorhanden Bluefish-Version aus den Ubuntupaketen installiert. Es lassen sich also beide nebeneinander nutzen! Ich weiß jetzt nicht, ob auf diese Art auch die Plugins gleich mitinstalliert werden, denn ich verwendete Synaptic. So sieht das dann aus:

Die 4 markierten Pakete sollten installiert sein.

Funktionen

Wie sieht es mit den Voraussetzungen aus? Erste Überraschung: Die neue Version erfüllt alle Vorgaben für den Test! Calltipp‑ und Autocomplete-Funktionen haben Einzug gehalten. Diese sind zwar etwas anders gelöst, die Projektverwaltung ist gegenüber der stabilen Version umständlicher anders zu handhaben und auch die komfortable Snippetverwaltung ist nun einem Plugin gewichen. Darüber kann man aber gern hinwegsehen, das ist reine Gewöhnung. Letzteres geschah wohl zu Gunsten eines übersichtlicheren und leichter zu wartenden Quellcodes des Hauptprogrammes. Was kann das Programm noch? Hier eine Zusammenfassung:

• Mehrere geöffnete Dateien möglich, mit Tabs zur Anwahl
• Blöcke können zusammengefaltet werden (neudeutsch: Code-Folding)
• komfortable Lesezeichen
• Sonderzeichen‑Übersicht
• Infobrowser (umfangreiche Dokumentationen zu PHP, CSS, (X)HTML u.v.a.)
• komfortabel anpassbare Shortcuts (siehe Tipps & Tricks)
• frei schwebende Menüs möglich (siehe Tipps & Tricks)
• unterschiedliche Zeichencodierungen werden unterstützt
• jede Menge Assistenten (im Menü Dialoge und in den Symbolleisten)
• Bilder einfügen mit automatischer Thumbnailerstellung
• umfangreiche Konvertierungen möglich
• Frei schwebende Fenster (siehe Tipps & Tricks)
• Zugriff über FTP
• Synchronisierung von ganzen Ordnern
• HTML‑ und CSS-Funktionen sind übersichtlich in Tabs organisiert
• Mit dem Tab „Schnellzugriff“ lassen sich die meist benötigten Funktionen individuell zusammenfassen
• u.v.m.

Projektverwaltung richtig konfigurieren

Widmen wir uns nun der Projektverwaltung und der Möglichkeit, PHP-Seiten über den Webserver zu starten (also über http://localhost/…). Früher konnte man die Pfade im Dialogfenster „Neues Projekt“ eingeben und es funktionierte sofort. So sah es noch in Version 1.0.7 aus:

In der neuen Version fehlen die Felder Basisverzeichnis und URL-Vorschau. Ich habe Olivier Sessink angeschrieben und gefragt, ob das ein Bug oder Feature ist. Er antwortete zum Glück sehr schnell ? die Funktion ist nur verschoben! Man muss jetzt im Filemanager (in der Sidebar) den Projektordner suchen, mit der rechten Maustaste darauf klicken und den Punkt Set as Documentroot wählen. Jetzt erreicht man die beiden Felder, die im Projektdialog entfallen sind. Etwas seltsam, ich vermute, so kann man in einer Session die Pfade festlegen, ohne gleich ein Projekt anlegen zu müssen. Edit: Olivier bestätigte mir diesen Grund in einer zweiten Mail!

Leider funktioniert die Vorschau von PHP-Dateien immer noch nicht. Wenn man auf den Browserknopf klickt, startet zwar Firefox, bietet die Datei aber zum Download an. Abhilfe fand ich dann in den Einstellungen unter Externe Befehle. Dort ändert man den Befehl für den Firefox in:

  firefox '%p'

Et Voila, jetzt klappt es mit dem Nachbarn. Die Einstellungen solltet Ihr Euch in Ruhe anschauen und Schritt für Schritt durchgehen. Das Programm ist äußerst flexibel. Wichtig! Wenn Ihr Änderungen vorgenommen habt, immer noch einmal den Menüpunkt Bearbeiten ? Einstellungen speichern wählen und wenn Ihr mit Projekten arbeitet, sicherheitshalber auch unter Projekt den Punkt Speichern wählen. Sicher ist sicher.

Arbeiten mit Snippets

Ich erwähnte schon, dass die Snippets in ein Plugin ausgelagert wurden. Schaut bitte in den Einstellungen nach, ob diese auch aktiviert sind. Es sollte in der Sidebar ein eigenes Fenster existieren. Und so funktioniert es:

1. Wie auf dem Bild links zu sehen ist, muss in der Sidebar die Snippetsübersicht gewählt werden. Beim ersten Start ist sie leer.
2. Über das Contextmenü (mit der rechten Maustaste) lassen sich diverse Aktionen aufrufen. Wählt als Erstes „Neuer Schnipsel“. Es erscheint ein Dialogfenster wie auf dem mittleren Bild. Da sich die Schnipsel auch ordentlich gruppieren lassen, wählt man zuerst den ersten Punkt „Gruppe“ und gibt im folgenden Dialog dieser einen Namen. Im Beispiel nenne ich sie „PHP“. Ist die Gruppe angelegt, klickt man (wieder mit der rechten Maustaste) darauf und wählt einen der nächsten Punkte. Die Bedeutung sollte klar sein. Ich nehme jetzt „Zeichenkette“.
3. Im darauf folgenden Dialog gibt man dem Schnipsel einen Namen und kann eine Beschreibung hinzufügen (erscheint später als Tooltipp). Danach erscheint das Fenster wie im Bild rechts. Jetzt gebt den Text für den Schnipsel ein. Der Umgang mit diesem Dialog ist gut beschrieben. Eine feine Sache sind die einfügbaren Platzhalter (%0, %1 … %9). Es lassen sich also 10 Abfragen für variable Einträge einfügen. Wie im Bild zu sehen, können diese auch mehrmals verwendet werden! An der gewünschten Stelle setzt man einfach den Platzhalter ein und in den 10 Feldern rechts formuliert man die Frage, die dazu gestellt werden soll.

Die Schnipsel von Bluefish bieten ein mächtiges Werkzeug, immer wiederkehrende Aktionen zu hinterlegen und über die 3. Funktion in der Auswahl (mittleres Bild) auch Suchen‑ und Ersetzen-Muster. Damit lassen sich sogar reguläre Ausdrücke speichern!

Die Krönung ist dann die neue Funktion Export/Import von Schnipseln. Ganze Gruppen lassen sich so im XML-Format speichern. Das ist gut für Backups und man kann interessante Gruppen auch anderen Usern zur Verfügung stellen. So wäre die Weitergabe ganzer API-Kataloge denkbar, z.B. für TemplateTags, JavaScript-Framworks, usw. Ich hoffe, dass aus der Community heraus nach und nach eine feine Sammlung entsteht.

Tipps & Tricks

Hier noch ein paar Tipps zum Umgang mit Bluefish:

• Anpassen der Shortcuts: Das ist ganz einfach gelöst. Einfach im Menü den gewünschten Punkt auswählen (nicht anklicken!) und den neuen Shortcut drücken. Dauerhaft speichern lassen sich diese über den Menüpunkt Bearbeiten ? Shortcuts speichern.
  Von meinem Editor war ich es gewohnt, den Zeilenumbruch mit Shift+Return, sowie ein geschütztes Leerzeichen mit Shift + Leertaste einzugeben. Im Menü Tags ? Formatierung allgemein konnte ich das einfach übernehmen.
• Frei schwebende Menüs: Das ist ein interessantes Feature, welches ich bei anderen Programmen vermisse. Jedes Menü und Untermenü hat als ersten Eintrag eine gestrichelte Linie. Klickt man darauf und zieht die Maus an einen freien Platz auf dem Desktop, wird das entsprechende Menü dort platziert. Momentan werden beim Programmende diese Einstellungen noch nicht gespeichert, ich habe das als Idee aber schon an Olivier weitergegeben und stieß zumindest nicht auf Ablehnung.
• Frei schwebende Fenster: Wer kennt das nicht. Oft benötigt man mehrere Dateien, um Code zu vergleichen oder Teile von der einen Datei in der anderen wieder zu verwenden. Das Umschalten über Tabs ist da nicht die beste Lösung. Deshalb können Fenster aus den Tabs „herausgenommen“ werden. Probiert es einfach mal aus. Fenster aktivieren und den Menüpunkt Dokument ? Freie Fenster anwählen.
• Der Dateibrowser in der Sidebar lässt sich auch vielseitig konfigurieren, geht einfach mal die Punkte im Contextmenü durch.
• Arbeitet man mit Projekten, empfiehl es sich – nachdem man den Projektordner gewählt hat – über das Contextmenü den Punkt Als Basisverzeichnis setzen anzuwählen und das Projekt noch einmal zu speichern. Nach erneutem Start und Auswahl des Projektes werden nur die Projektordner angezeigt, das ist viel übersichtlicher.
• Der Geschmack ist zwar individuell, in Bluefish macht sich als Schrift die Liberation Mono sehr gut. Diese kann über folgende Zeile im Terminal einfach installiert werden:

  sudo apt-get install ttf-liberation

Fazit

Bluefish hat mich wirklich überrascht. Das Programm ist schnell, stabil und sehr komfortabel geworden. Schon Version 1.0.7 bietet zumindest dem Hobbyprogrammierer einiges an Komfort und ausreichend Unterstützung. Wer auf die Autocomplete-Funktion verzichten kann, sollte diesen Editor nehmen, er ist in den Ubuntu-Paketen enthalten. Aber schon für die Erstellung von CSS-Dateien ist es eine enorme Hilfe.

Der Kontakt zu den Programmierern verlief auch schnell und sie haben ein offenes Ohr! Olivier hofft, dass die Version 2.0 Ende des Sommers fertig wird, vielleicht schafft sie es ja in den Karmic Koala?

Für mich hat die lange Suche nach einem guten Editor endlich ein Ende. Ich werde aber trotzdem noch die anderen besprechen, wenn vielleicht auch nicht so ausführlich. Im nächsten Teil schaue ich mir dann mal die Editoren aus der Eclipse-Ecke an (Eclipse, Aptana, Easy Eclipse).

Bis dahin, Turicon

Navigation

• Teil 1: Grundlegendes
• Teil 2: Gedit
• Teil 3: Geany
• Teil 4: Bluefish
• Teil 5: Eclipse/Aptana

Ich werde also zuerst die Eindrücke von dauerbaustelle wiedergeben, immerhin arbeitet er intensiv mit dem Programm und kennt die Eigenheiten. Anschließend werde ich noch ein paar Worte zu dem Editor verlieren. Los gehts:

Ein weiterer wichtiger Editor für GNU Linux/Ubuntu (welcher übrigens auch unter Windows läuft) ist Geany (http://geany.org). Von Haus aus unterstützt der schlanke, schnelle GTK-basierte Editor Syntaxhighlighting für viele Programmier‑ und Markup-Sprachen (C, C++, Java, Ruby, PHP, Python, HTML, CSS, XML, LaTeX, SQL, …), Quellcode-Folding (Codeteile ausblenden) und bietet vielfältige Einstellungsmöglichkeiten.

Ein integriertes, virtuelles Terminal, eine Anzeige für Compiler-Meldungen, sowie ein Notizbrett machen das Entwickeln von Software und Webseiten komfortabel; das Rangieren mit vielen offenen Dateien auf einmal funktioniert tadellos und wird bequem durch frei platzierbare Tabs gehandelt.

Besonders nützlich ist das Quellcode-Springen: Durch Gedrückt halten von „STRG“ und Klicken auf eine im Code verwendete Variable springt Geany automatisch an die Stelle im Sourcecode, an der diese Variable definiert wurde. Dies funktioniert gleichermaßen mit Klassen und Funktionen.

Code-Vervollständigung

Geanys Code-Vervollständigung kann durchaus mit anderen großen Entwicklungsumgebungen (IDEs) mithalten. Die Qualität, Vollständigkeit und „Intelligenz“ der Vorschläge ist jedoch stark von der verwendeten Programmier‑ bzw. Markupsprache abhängig (so ist die Unterstützung für PHP sehr zufriedenstellend und vollständig, beim Erstellen von HTML‑ und CSS-Code wird man allerdings nicht unterstützt). Unabhängig von der eingesetzten Sprache ist die Vervollständigung für vom Benutzer definierten Variablen, Funktionen und Klassen. Geany indexiert diese vollständig und verhindert somit überflüssige Tipparbeit und nervige Vertipper.

Unter anderem für PHP zeigt Geany auch erweiterte Informationen über Funktionen und Klassen während dem Tippen an (erwartete Parameter und ihre Typen).

Code-Templates

Ein bemerkenswertes Feature, welches Geany mitbringt, ist die automatische Ergänzung von Codeschnipseln (oder –templates, wenn man so möchte). Diese in der Datei „snippets.conf“ versteckten Vorlagen können viel Schreibarbeit sparen, so kann per Eingabe von class und anschließendem drücken der Tabulatortaste ein Code wie dieser ergänzt werden:

  /**
  * Documentation goes here
  */
  class <CURSOR> extends FooBar {
      /**
      * Construct the class
      * @param foo
      * @param bar
      */
      public function __construct($foo, $bar) {
           $this->foo = $foo;
           $this->bar = $bar;
      }
  }

wobei je nach Definition der Eingabecursor ans Ende oder an eine beliebige Stelle im Schnipsel springen kann (hier würde man den Cursor an die Stelle mit „<CURSOR>“ platzieren).

Weitere Features und Plugins

Ein eingebauter Klassen‑, Funktions‑ und Variablenbrowser, ein Dateibrowser, eine Projektverwaltung und viele weitere Plugins wie Version-Control-System-Unterstützung (SVN, GIT, VCS, …), Split-Screen-Ansicht, Unix-Diff-Unterstützung und ein kleiner aber feiner Farbwähler zur „Klicki-Bunti“-Wahl von Farben (welche als Hexadezimalwert zurückgegeben werden und z.B. sofort in CSS-Dokumenten weiterverwendet werden können) lassen keine Wünsche offen.

Die Installation der Plugins ist allerdings nicht immer ganz leicht, da einige nicht als Pakete in den Ubuntu-Paketquellen verfügbar sind und selbst gebaut (kompiliert) und installiert werden müssen. Zu guter Letzt hat Geany ein paar Templates für Quellcode-Dokumente und Lizenzen vordefiniert, besonders das Letztere erspart dem begeisterten Freie-Software-Entwickler einen Teil des qualvollen „Lizenz-einfügen-und-richtig-platzieren“-Gefummel.

Fazit

Geany ist eine empfehlenswerte IDE für Programmierer jeglicher Gesinnung, die schnell und hindernisfrei Quellcode niederschreiben, dabei aber durch Syntaxhighlighting, Autovervollständigung, Code-Templates und leichte Navigation durch umfangreiche Projekte und lange Dateien unterstützt werden möchten. Da die Codevervollständigung und die Anzeige von Funktionsparametern noch ausbaufähig sind, richtet sich Geany vor allem an Entwickler, die sich beim Programmieren nicht auf die Dokumentation der Entwicklungsumgebung verlassen – also an Programmierer mit Erfahrung. Oder solche, die es werden wollen.

[nggallery id=12]

Soweit der Beitrag von dauerbaustelle, nochmals:? Vielen Dank!!

Bei meinen eigenen Tests stand natürlich HTML, CSS, JavaScript und PHP im Vordergrund. Und wie oben schon erwähnt, wird HTML/CSS/JS doch etwas stiefmütterlich behandelt. Für alle drei gibt es KEINE Autocomplete‑ oder Call Tipp-Funktion. Für CSS und JavaScript konnte ich aber die Funktionsübersicht in dem Tab „Symbole“ nutzen. Gegenüber Gedit kann aber Geany wenigstens HTML-Tags vervollständigen.

Eine direkte Vorschaufunktion für HTML-Dokumente oder PHP-Dateien (die über den Webserver aufgerufen werden müssen) ist nicht integriert. Über einen Umweg kann man aber zumindest teilweise eine solche Funktion nutzen. Dazu lege ein Projekt an:

Ist es erstellt, ruf über das Menü Projekt die Eigenschaften auf:

Wichtig ist die letzte Zeile und am Ende des Pfades (über den Webserver) das %f. Klickt man nun in der Symbolleiste auf „Erstellen“, ruft es die aktuelle Datei im Firefox auf. Einziger Wermutstropfen: Sobald eine Datei in einem Unterverzeichnis liegt, erkennt das der Editor nicht und es kommt zu einem 404-Fehler.

Vor fast 2 Jahren habe ich mit einem der Entwickler per Mail Kontakt aufgenommen. Ich wollte wissen, ob es eine Snippet-Funktion gibt. Ⅾauerbaustelle erwähnte dieses „versteckte Feature“ ja schon, dieselbe Antwort bekam ich dann auch. Da ich diese Funktion recht intensiv nutze, finde ich es nicht gerade komfortabel, in einer Config-Datei zu hantieren. Deshalb hakte ich nach, ob denn eine komfortablere Bedienung über die Oberfläche in naher Zukunft zu erwarten sei. Als Antwort erhielt ich dann folgendes: „Nun, eine Textdatei zu bearbeiten, halte ich schon für sehr komfortabel. Andere User kommen damit bestens zurecht…“ Hmm, ok. Wenn man es so sieht?

Mein Fazit

Geany ist eine kleine, feine IDE für Programmierer (Python, Ⅽ und die, deren Sprache gut unterstützt wird). Als reiner Webeditor ist er wohl nicht die Nr. 1, außer vielleicht für die erst genannte Klientel wie dauerbaustelle, die eh schon mit Geany arbeitet und ab und zu mal eine Webseite erstellt. Trotzdem kann ich nur empfehlen, es mal mit Geany zu probieren, immerhin hat jeder User andere Prioritäten und wenn in Foren nach HTML-Editoren gefragt wird, taucht Geany immer wieder mit auf.

Als nächstes werde ich mich mit Bluefish beschäftigen, der sich ja als reiner HTML-Editor versteht. Das wird aber wohl noch etwas dauern, denn nächste Woche geht es erst einmal in den Urlaub. Oder findet sich noch jemand, der über Eclipse/Aptana, Bluefish, Quanta+ oder Kommodo schreiben möchte?

Navigation

• Teil 1: Grundlegendes
• Teil 2: Gedit
• Teil 3: Geany
• Teil 4: Bluefish
• Teil 5: Eclipse/Aptana

• wählbare Syntaxhervorhebung für eine Vielzahl an Sprachen
• mehrere Dokumente werden in Tabs dargestellt
• Zeilennummern und virtueller Zeilenumbruch
• Hervorhebung von zueinander gehörenden Klammern und der aktuellen Zeile
• Statusleiste mit Anzeige der Zeile und Spalte, unter Jaunty ist der Schnellzugriff auf die Tabulatorbreite und Syntaxhervorhebung möglich
• Plugin-System, dazu kommen wir noch
• sehr schnell und äußerst stabil, auch wenn mehrere und vor allem große Dokumente geöffnet sind

Während bei Ubuntu Hardy Gedit in der Version 2.22.3 vorliegt, arbeitet unter Jaunty die Version 2.26.1. Äußerlich sieht man keinen Unterschied, jedoch kann die neuere Version auch Dateien per FTP und SSH anzeigen und speichern. Nutzer von Hardy können noch nicht per FTP speichern! Den entsprechenden Dialog ruft man übrigens über Datei ? Ort öffnen auf (STRG+L).

Hier einige Features von Gedit in Wort und Bild:

[nggallery id=11]

Plugins für Gedit

Mit diversen Plugins lässt sich Gedit einfach und schnell aufwerten. Erste Anlaufzentrale ist Gnome.org. Viele Plugins sind schon in Gedit vorhanden, müssen also nur aktiviert werden. Wer sich weitere Plugins herunterlädt, muss diese nur in den eigenen Home-Ordner und dort in den (versteckten) Ordner gnome2/gedit/plugins kopieren. Schauen wir uns einmal einige Plugins an:

• Datum/Uhrzeit einfügen, Groß-/Kleinschreibung ändern, Externe Werkzeuge, Rechtschreibprüfung, Sortieren, Statistik zum Dokument und Zeileneinzug sind allgemein nützliche Tools, die in Gedit schon vorhanden sind, man muss diese nur aktivieren. Zugriff erhält man dann über die jeweils neuen Menüpunkte
• Dateiverwaltungsleiste (File Browser) ist ebenfalls an Bord und dieses Plugin sollte man aktivieren. Diese Dateiverwaltung ist wirklich gelungen, einfach und vor allem auch per Tastatur bedienbar (mit Tab, Leertaste, Return, Backspace und den Pfeiltasten). Dieses Feature ersetzt sogar eine einfache Projektverwaltung (manche Programme speichern eh nur den Pfad zum Ordner).

Tagliste auf Englisch:
Entpacke mit Rootrechten die Datei HTML.Tags.gz im Ordner /usr/share/gedit-2/taglist/. Lege eine Sicherheitskopie an! Die Datei HTML.tags mit Gedit öffnen und nach der Zeichenkette lang=“de“ suchen. Nun die ganze ‹TagGroup› bis ‹/TagGroup› entfernen. Jetzt noch einmal suchen und das Prozedere wiederholen (es sind 2 Listen, einmal HTML und einmal XHTML). Wer möchte, kann nun auch noch ein drittes Mal suchen, findet die Sonderzeichenliste, diese sollte erhalten bleiben.
Jetzt die Datei speichern, mit .gz packen und – wieder mit Rootrechten – die vorhandene Datei ersetzen. Nach einem Neustart von Gedit hat man die englischen Bezeichnungen in der Floskelliste.

• Ebenfalls von Haus aus dabei ist die Floskelliste (Tag list). Diese ist sogar ins Deutsche übersetzt, was ich eher verwirrend finde. Gerade die XHTML-Tags erkennt man am englischen Namen viel schneller. Tooltipps helfen zwar bei der Erkennung, wer das ändern möchte, in nebenstehendender Infobox beschreibe ich eine Lösung, um die Anzeige auf Englisch umzustellen. Schön ist auf alle Fälle, dass man Text markieren kann und die gewünschten Tags davor und dahinter gesetzt werden.
• Zu guter Letzt sei noch Schnipsel (Snippets) erwähnt. Damit lassen sich oft benötigte Textpassagen anlegen und mit einem Shortcut aufrufen. Es ist auch möglich, Platzhalter einzufügen, die man dann mit der Tab-Taste ansteuert. Ist das Plugin aktiviert, erreicht man den Einstelldialog über das Menü Werkzeuge ? Schnipsel verwalten. Es sind schon jede Menge Schnipsel für PHP und HTML enthalten, probiert es einfach mal aus. Eine Anleitung zum Einfügen von Platzhaltern ist hier zu finden.

Aus den Paketquellen können weitere Plugins installiert werden, sucht doch einmal nach „gedit-plugins“. Aus diesem Paket kann ich auf alle Fälle den Farbwähler, Klammern schließen, Sitzungsspeicherung und die Zeichentabelle empfehlen. Was die einzelnen Plugins machen, verrät ja schon der Name.

Weitere Plugins

Es gibt noch eine Unmenge an Plugins, ich möchte hier noch 5 vorstellen, die gerade bei der Webentwicklung hilfreich sind:

1. HTML-Tidy Wer das Tool mag, kann es auch in Gedit einbinden
2. Class Browser: Eine sehr nützliche Erweiterung für Javascripte und PHP. Klassen, Funktionen, Variablen und einiges mehr werden übersichtlich in einer Baumstruktur angezeigt, ein Klick darauf führt auch gleich an die richtige Stelle im Quelltext. Hinweis: Wer dieses Plugin nutzen möchte, muss das Paket exuberant-ctags aus den Ubuntuquellen installieren!
3. Die letzten drei Plugins stammen von Eckhard Ⅿ. Jäger von area42. Vielen Dank an dieser Selle für diese wirklich 1A-Erweiterungen! .daumenhoch:
   Als erstes wäre da die Browservorschau. Ist das Plugin installiert, erreicht man über Ansicht ? Ansehen in den Browser seiner Wahl. Sogar der IE wird angezeigt, wenn er über IE4Linux installiert wurde!
4. Dann gibt es das Template-Plugin: Folgt der Installationsanweisung, legt den Ordner „Templates“ an und speichert darin Eure Vorlagen. Diese sind dann über das Menü Datei ? Neu aus Vorlage abrufbar.
5. Und auch das Plugin Sprachreferenz sollte nicht fehlen: Schnell hat man dann über das Menü Hilfe ? Sprachreferenz den Zugriff auf die entsprechenden Dokumentationen.

Mein Fazit

Gedit ist ein toller Allrounder. Wer auch noch mit Python oder Latex arbeitet (dafür gibt es weitere Plugins); oder generell oft einen Texteditoren benötigt, hat hier einen guten und schnellen Editor, der auch noch von Haus aus dabei; und als Standardeditor überall eingetragen ist. Da ich für diesen Artikel noch einmal intensiv recherchiert habe und neue Plugins fand, werde ich auch des öfteren damit arbeiten. Vor allem dann, wenn es um schnelle Änderungen geht.

Für einen professionellen Webeditor fehlen auf alle Fälle die automatische Tagvervollständigung, sowie Call Tips und Autocomplete-Funktionen für HTML, CSS, JavaScript und PHP. Aber ich denke, das ist nicht das Ziel von Gedit, es ist eben der Standardeditor. Und dafür kann er eine Menge und gegenüber dem, was z.B. die Redmonder mitgeben, ist Gedit der pure Luxus! Wer nur gelegentlich mit Webseiten arbeitet und auch für ambitionierte Homepagebastler reichen die Funktionen allemal, da muss keine große IDE installiert werden. Und auch für Netbookbesitzer, die ja weniger Platz auf dem Monitor haben und eine kleinere CPU, ist Gedit eigentlich die beste Wahl.

Soviel zu Gedit, als nächstes werde ich mir BluefishGeany vornehmen. Mal schauen, ob ich das noch vor dem Urlaub schaffe.

Navigation

• Teil 1: Grundlegendes
• Teil 2: Gedit
• Teil 3: Geany
• Teil 4: Bluefish
• Teil 5: Eclipse/Aptana

Seit Februar 2007 bin ich Ubuntu-User; wie ich hier schon berichtete, nutze ich in einer VM für diverse Aufgaben noch Programme aus der Windowswelt. Dazu gehört momentan auch noch mein Lieblingseditor einer kleinen lettischen Softwarefirma. Denn wenn es auch Unmengen an Editoren für Linux gibt, in Sachen Komfort war die Auswahl recht dünn (aber es hat sich einiges getan!).

Ich weiß, dass dieses Thema sehr von den Vorlieben jedes Einzelnen abhängt. So gibt es geniale Programmierer, die für kein Geld der Welt auf vi(m) oder Emacs verzichten würden. Aber es gibt auch eine große Zahl an Entwicklern und Hobbyprogrammierern, die gern mit einer grafischen Oberfläche (IDE), arbeiten und so manches moderne Feature wie Syntaxhervorhebung, Autovervollständigung und Calltips nicht missen möchten. Oft kommt es vor, dass ich an einem Tag „Querbeet“ mit HTML, CSS, JavaScript und PHP zu tun habe. Jedesmal muss ich gedanklich auf die entsprechende Syntax „umschalten“ und weiß dann, was ich an einem guten Editor habe.

Aber zurück zum Thema. Da ich in den letzten 2 Jahren verschiedene Editoren getestet habe, möchte ich diese Erfahrungen gern weitergeben. Zu den getesteten Editoren gehören unter anderem Gedit, Geany, Netbeans, Aptana/Eclipse, Bluefish, Quanta+ und Kommodo Edit.

Testvorgaben

Ich weiß, manch einer macht einen Unterschied zwischen Editor und einer IDE. Hier fassen wir alles unter dem Begriff Editor zusammen! Die Tests werden unter Hardy und Jaunty erfolgen, mit den jeweils in den Paketen vorhandenen Versionen. Falls nötig oder nicht in den Ubuntuquellen vorhanden, werde ich auch neuere Versionen separat installieren und testen.

Folgende Features sehe ich als Grundvoraussetzung, an denen sich die Programme messen müssen:

• Syntaxhervorhebung
• automatische Tagvervollständigung
• schnelles und zuverlässiges Suchen und Ersetzen
• Call Tips und Autocomplete-Funktionen



• Projektverwaltung
• Snippet‑ oder eine Art Macroverwaltung
• mehrere gleichzeitig offene Dokumente (Tabs)
• einfache Vorschaufunktion (auch über Webserver)
• Anzeige von einfachen Syntaxfehlern bzw. sollten zusammengehörende Elemente (z.B. Anfangs‑ und Endtag oder geschweifte Klammern in PHP) hervorgehoben werden.
• Weiterhin sollte das Programm stabil laufen und schnell reagieren.

Soviel dazu, im nächsten Teil werde ich mit GEdit beginnen, dieser ist ja der Standardeditor unter Gnome, kann so einiges und ist durch Plugins erweiterbar. An dieser Selle noch ein paar Tipps zu Tools, die ich unter Ubuntu nicht missen möchte und bei der täglichen Arbeit hilfreich sind:

• Mit GColor2 kann man schnell und einfach Farben testen, sowie Farben aus einem Bild picken und auf Wunsch speichern. GColor2 ist in den Ubuntupaketen enthalten
• GRuler ist ein Screenlineal mit vielfältigen Einstellmöglichkeiten und ein unentbehrlicher Helfer. Erhältlich ist GRuler hier.
• Agave ist sehr nützlich, wenn man Farbkombinationen benötigt. Auch hier sind eine ganze Reihe von Einstellungen möglich. Agave ist in den Paketquellen zu finden.
• Ebenso hilfreich ist Screenie, damit habe ich das Bild zusammengestellt. Es erzeugt automatisch die Spiegelungen. Screenie ist ebenfalls in den Paketquellen (screenie-qt).

Also, bis zum nächsten Mal. Anregungen und Tipps sind gern Willkommen!

Navigation

• Teil 1: Grundlegendes
• Teil 2: Gedit
• Teil 3: Geany
• Teil 4: Bluefish
• Teil 5: Eclipse/Aptana

• Hosting
• Content Management
• Webgestaltung
• Ajax
• Flash und Silverlight
• PHP und Co.
• Recht

Wie ich finde, eine schöne und interessante Lektüre – genau richtig für die langen Feiertage. Wer die Ausgabe nicht bei seinem Zeitungshändler bekommt, kann sich das Sonderheft zusenden lassen. Einfach mal hier vorbeischauen. Übrigens, an dem Artikel ab Seite 66 „Stilspaltereien – Mehrspaltige Layouts mit CSS“ habe auch ich mitgearbeitet. Viel Spaß beim lesen!

Zu den neuen und am meisten gewünschten Möglichkeiten, die teilweise schon funktionieren, zählen z.B.:

• abgerundete Ecken (border-radius bzw. auch border‑[topleft][topright][bottomleft][bottomright]-radius)
• Mehrspaltiges Layout ([-moz][-webkit]-column‑[count][gap][rule]

Auch Opera kann schon einiges und die Norweger werden bestimmt schnell nachziehen, so dass in den 3 großen Engines – neben Microsofts IE – diese Elemente doch recht schnell verfügbar sein werden. Gespannt darf man auf den kommenden IE8 sein. Wenn der sich nicht endlich ohne Probleme an die bisherigen Standards hält und die neuen Standards nicht wenigstens zu einem guten Teil unterstützt, verliert Microsoft garantiert noch mehr Marktanteile (was ich nicht bedauern würde ).

Hier noch einige interessante Links für die, die sich gerne ausführlicher mit dem Thema CSS3 und zusätzliche Browserfunktionen auseinander setzen möchten:

1. Jonas Helwig hat in seinem außergewöhlich schön und originell gestaltetem Blog, mit dem ebenso originellen Namen „Kulturbanause.de“ einige CSS-Elemente unter die Lupe genommen. [anschauen]
2. Wer einen Blick auf die zusätzlichen Fähigkeiten des Firefox (Gecko) werfen möchte, ist auf der Developerseite gut aufgehoben. [anschauen]
3. Was geht in Opera 9? Auch dafür existiert eine schöne Übersichtsseite. [anschauen]
4. Apple bietet für den Safari (Webkit) eine CSS-Referenz als PDF an. Enthalten sind die unterstützten CSS-Elemente und auch die zusätzlichen Elemente, die man per -webkit‑… anspricht! [jetzt downloaden]

Und da gerade die Fußball-EM läuft, setzen wir noch eins drauf und geben für die Dauer der EM 20 % Rabatt! Und sollte Deutschland Meister werden, verlängern wir dieses Angebot bis 30. August 2008.

Interesse? Hier erfahrt Ihr weitere Details! Dieses Angebot gilt für Privatpersonen ebenso wie für Firmen, vor allem auch Agenturen mit dem Schwerpunkt Grafik.

Das Bundesamt für Sicherheit in der Informationstechnik veröffentlichte einen Leitfaden zur Sicherheit von Webanwendungen. Die Meldung fand ich bei heise.de, von deren Seite das PDF mit etwas über 100 Seiten heruntergeladen werden kann. Nach einigen Seiten „bürokratischem Vorgeplenkel“ geht es dann, mit vielen Beispielen gewürzt, fundiert und sehr ausführlich zur Sache und macht das Dokument zu einer Pflichtlektüre für jeden, der Anwendungen fürs Internet erstellt.

2. PHP-Fundgrube

Jede Menge Codeschnipsel für PHP fand ich letzte Woche bei Homepage-Total.de. Eine schöne Quelle, wenn man mal wieder auf dem Schlauch steht oder „den Wald vor lauter Bäumen nicht sieht“.
Und hier noch der originelle Link der Seite:

if (ahnung == 0) {
    read (Handbuch);
}
else {
    goto (www.homepage-total.de);
}

JavaScript DOM Ranges

Wer intensiv JavaScript einsetzt, benötigt irgendwann eine Funktion, um Text zu markieren. Wer sich schon einmal damit beschäftigt hat, kennt das Dilemma, was sich damit ergibt. Einen interessanten, englischsprachigen Artikel dazu fand ich bei Wrox.

Erläuterung

Es sollen nur Bilder im Format *.jpg, *.gif, *.png erlaubt werden. Zuerst prüfe ich, ob überhaupt etwas ausgewählt wurde, wenn nicht, gibts den ersten Alert.

Als nächstes zerlege ich mit split() den String in Teile, wobei der Punkt als Trenner angegeben wird. Das Ergebnis ist ein Array.
Um sicher zu sein, dass nicht irgendwo im Pfad noch ein Punkt vorkommt, frage ich die Anzahl Sätze im Array ab. Hier beginnt JavaScript aber mit 1 zu zählen. Wenn ich jedoch auf das Array zugreife, ist das erste Array [0]. Deshalb wähle ich das richtige Array aus, indem ich von der Anzahl eines abziehe.

Nun kann ich endlich prüfen und gebe wieder eine Alertbox aus, falls es sich nicht um eines der drei Dateiformate handelt. Die if-Schleife ist ok bei drei Argumenten. Sollten es mehr sein, kann man ebenfalls ein Array anlegen und dann die Dateiendungen in einer Schleife prüfen lassen.

Wer möchte, kann das Script gerne nutzen. Im Formular – am besten innerhalb des Submit-Buttons – muss dann noch das Script aufgerufen werden, ein Beispiel ist dabei.

<script type="text/javascript">
//<![CDATA[
<!--
function validateForm() {
var d=document.bilder;
var error="";
if (d.img1.value == 0) { alert ("Bitte wählen Sie ein Bild aus!"); return false; }
var Bildname = d.img1.value;
var Bildarray = Bildname.split(".");
var Anzahl = Bildarray.length;
var Endung = Bildarray[Anzahl-1];
if (Endung != "jpg" && Endung != "gif" && Endung != "png") { alert ("Die Datei hat leider keines der erlaubten Formate!"); return false; }

return true;
}
 // -->
 //]]>
</script>

// Beispiel für den Submit-Button:
<input type="submit" name="submit" value="Datei jetzt hochladen!"
 onclick="this.value='Bitte auf Bestätigung warten!'; return validateForm();" />

Trotz allem sollte dann bei der Weiterverarbeitung, zum Beispiel mit PHP, nochmals eine Prüfung vorgenommen werden, da einige Anwender JavaScript ausschalten.

• In einem Fenster können mehrere Instanzen des Editors aufgerufen werden
• WYMeditor nutzt nun die JavaScript-Bibliothek „jQuery“
• Funktioniert mit den Browsern MSIE 6.0+, Gecko-basierten Browsern (Firefox 1.5+, SeaMonkey) und nun auch mit Opera ab Version 9.0
• WYMeditor ist von Haus aus mehrsprachig, darunter auch Deutsch
• Plugin-Schnittstelle (mit tidy und hovertools sind zwei Beispiele dabei, eine einfache Beschreibung der Schnittstelle ist auch auf der Webseite abrufbar)

Installation

Die Installation ist sehr einfach. Gehe in den Ordner mit der Datei, die den Editor einbinden soll.

In den Ordner entpacke den kompletten Inhalt des TAR-Archives (Ordnerstruktur beibehalten!). Dann muss noch die jQuery Javascript library 1.1.3+ besorgt werden. Die Datei entpacke dann ins selbe Verzeichnis in einen Ordner namens jQuery. Falls Du andere Pfade benutzt, muss das entsprechend angepasst werden, behalte aber die Dateinamen bei, dann findet der Editor alle Dateien automatisch. Falls Du doch andere Namen vergeben musst, sind einige Variablen anzupassen. Genaueres steht in der Onlinedokumentation.

Jetzt können die einzelnen Komponenten in die gewünschte Seite eingebunden werden. Im Head-Bereich füge folgende Zeilen ein:

‹link rel="stylesheet" type="text/css" media="screen" href="wymeditor/skins/default/screen.css" /›
‹script type="text/javascript" src="jquery/jquery.js"›‹/script›
‹!-- Nächste Zeile nur, wenn die Oberfläche in dt. Sprache erscheinen soll --›
‹script type="text/javascript" src="wymeditor/lang/de.js"›‹/script›
‹script type="text/javascript" src="wymeditor/jquery.wymeditor.js"›‹/script›
‹script type="text/javascript"›

var $j = jQuery.noConflict();

$j(function() {
$j(".wymeditor").wymeditor();
});

‹/script›

Es gibt eine Option, die deutsche Sprache in der Function $j zu aktivieren, da ich aber keine andere Sprache benötige, habe ich das gleich in der Datei wymeditor/jquery.wymeditor.js geändert. In Version 0.4 ist in Zeile 350 die Einstellung für die Option „lang“. Hier ersetze das „en“ durch „de“.

Um nun den Editor einzublenden, muss noch das entsprechende Editorfeld (die textarea) angepasst werden und der Submit-Button. Und so sollte es aussehen:

‹textarea class="wymeditor" name="text"› ‹/textarea›
‹input type="submit" class="wymupdate" /›

Wichtig! WYMeditor hat mit der vorliegenden Version noch Probleme mit Framesets. Wenn Du also Dein CMS mit Frames aufgebaut hast, kann es sein, dass der WYMeditor nicht funktioniert!

CSS-Klassen integrieren

Die Integration eigener Klassen ist auf den ersten Blick etwas komplizierter als noch in Version 0.2, hat man sich aber einmal mit der Syntax angefreundet, geht es doch recht flott von der Hand und bietet neue Möglichkeiten. Die Anleitung auf der Webseite wymeditor.org ist leider etwas dürftig, darum hier eine (hoffentlich) leichter verständliche Erklärung. Zuerst der angepasste Quellcode:

‹script type="text/javascript"›

var $j = jQuery.noConflict();

$j(function() {
$j(".wymeditor").wymeditor({

classesItems: [
{'name': 'blocksatz', 'title': 'P: Blocksatz', 'expr': 'p, blockquote'},
{'name': 'zentriert', 'title': 'P: Zentriert', 'expr': 'p'},
{'name': 'hinweis',   'title': 'P: Hinweis', 'expr': 'p[@class!="blocksatz"]'}
],

editorStyles: [
{'name': '.blocksatz', 'css': 'background: #ffd url(bg-blocksatz.jpg) repeat;'},
{'name': '.zentriert', 'css': 'background: #ffd url(bg-zentriert.jpg) repeat;'},
{'name': '.hinweis',   'css': 'background: #ffa; border: 1px solid #800;'}
],

dialogStyles: [
{'name': '.blocksatz', 'css': 'text-align: justify;'},
{'name': '.zentriert', 'css': 'text-align: center;'},
{'name': '.hinweis',   'css': 'background: #ffa; border: 1px solid #800;'}
]

});
});
‹/script›

Ich habe drei Klassen integriert. Diese sollen Absätze als blocksatz, zentriert und als wichtigen Hinweis ausgeben. Im Beispiel habe ich die Vorgabe gesetzt, dass die Klasse hinweis nicht auf Absätze angewendet wird, welche schon als blocksatz formatiert wurden.

Im Beispiel sind die Anweisungen in 3 Teile untergliedert. Die Klassen selbst definiere im Abschnitt classesItems. Die Anweisung notiere im Format:

name: Name der Klasse, title: Angezeigter Name, expr: betroffner Tag

Soll nun wie vorgegeben eine Klasse sich nicht mit einer anderen überschneiden dürfen, so kann diese in eckigen Klammern angegeben werden (siehe Klasse hinweis).
Mehrere Klassen werden mit Kommas voneinander getrennt (siehe Klasse blocksatz).
Diese 4 Zeilen würden schon reichen, wir wollen es aber etwas komfortabler, auf einen Blick soll sichtbar sein, welcher Absatz mit welcher Klasse formatiert wurde. Also fügen wir den Abschnitt editorStyles hinzu. Die Syntax lautet hier:

name: Name der Klasse, css: CSS-Anweisung

Tipp: Um bei all den Farben und Rahmen nicht durcheinander zu kommen, habe ich ein Hintergrundbild erstellt, so sehe ich sofort, welche Klasse zugewiesen wurde. Das Bild muss im Ordner wymeditor/iframe/default gespeichert bzw. sollte der Pfad relativ zu diesem angelegt werden! So sieht es bei mir aus:

Einziger Nachteil bei Einsatz eines Hintergrundbildes: Der Containername links oben wird nicht mehr eingeblendet.
Auch an die Vorschau wurde gedacht und so können mittels dialogStyles die Styles der Vorschau vordefiniert werden, eine praktische Sache! Die Syntax ist dieselbe wie bei editorStyles.

Es ist doch nicht so schwer, wie es auf den ersten Blick aussieht, oder? Beachten muss man vor allem die richtige Reihenfolge der Klammern und das Setzen von Kommas und Semikolons. Hat man einen Fehler, zeigt die Seite nur eine einfache Textarea an.

Text einfügen

Um nun den zu bearbeitenden Text in den Editor zu laden, gibt es auch eine Option. Da aber oft CMS auf Basis von PHP und MySQL eingesetzt werden, reicht es, innerhalb von ‹textarea›‹/textarea › den Text ausgeben zu lassen. Beispiel:

‹textarea class="wymeditor" name="text"›
‹? echo $daten[meintext] ?›
‹/textarea›
‹input type="submit" class="wymupdate" /›

Vielleicht hilft Euch diese kurze Einführung, sich mit dem Editor vertraut zu machen und sich tiefer mit den Funktionen zu beschäftigen. Ich konnte hier nur einen winzigen Teil der Funktionen besprechen und muss den Rest auch noch erforschen.

Mein Fazit

Natürlich ist der Editor um ein vielfaches mächtiger als Version 0.2. Aber jetzt ist es auch wesentlich komplizierter und fehleranfälliger, einen Editor mit umfangreichen Optionen auszustatten. Jetzt muss wieder jeder für sich selbst entscheiden, ob man sich in das System einarbeitet, weiterhin die alte Version benutzt oder sich nach Aternativen umsieht.
Wer schon mit der JavaScript-Bibliothek jQuery arbeitet, ist da natürlich klar im Vorteil.

Wer (wie ich) nur ein kleines CMS einsetzt, keine Operaunterstützung benötigt und wem ein einziges Editorfeld pro Seite genügt, dem kann ich nach wie vor den Editor in der Version 0.2 wärmstens empfehlen. Hier ist die Anpassung wesentlich einfacher, das System hat man in kurzer Zeit im Griff. Siehe dazu auch meinen Workshop zum WYMeditor.

Zu hoffen bleibt, dass die Dokumentation generell überarbeitet und besser strukturiert, sowie eine ausführliche Doku zu den Funktionen integriert wird. Schön wären verschiedene, gut dokumentierte (und vor allem gut strukturierte!) Demos, bei denen unterschiedliche Szenarien vorgestellt werden. Denn ich gebe es zu, zuerst schaut man in den Code vor lauter runden, eckigen und geschweiften Klammern wie die „Sau ins Uhrwerk“
Gespannt darf man auf die ersten Plugins sein, vielleicht ermöglicht diese Schnittstelle ja, den Editor zur Nummer 1 zu machen?
Wie ich im Forum lesen konnte, scheint man über eine Implementierung in WordPress nachzudenken. Schön wäre es ja und würde WYMeditor sehr gut stehen!

WYMeditor in PHP-Umgebung integrieren

Schau dir bitte noch einmal den Quelltext der editor.htm an. Ab Zeile 155 der Originaldatei beginnt der Beispieltext mit ‹h1>WYMeditor</h1›. Den Text haben wir ja in Teil 1 beim testen im Editor gesehen.

Dieser endet in Zeile 168 mit einem abschließenden ‹/p›. Den Text brauchen wir nicht und können ihn löschen. Dafür gibst du später in PHP an dieser Stelle den zu bearbeitenden Text aus! Angenommen, dein Text liegt in der Variablen $content, notierst du an dieser Stelle eben:

<?php
echo $content;
?>

Das ist alles. Falls Du mit der Datei experimentierst, ändere die Endung von .htm in .php!

Nun hast du 2 Möglichkeiten. Entweder du erweiterst editor.htm um ein Formular oder du baust alles notwendige in dein System ein. Hast du ein eigenes System, sollte es dir nicht schwerfallen, deine Datei entsprechend anzupassen. Hier die notwendigen Schritte (die Zeilennummern beziehen sich auf die originale editor.htm !):

Im head-Bereich werden das Stylesheet und 4 JavaScripte geladen (Zeilen 25–29). Kopiere diese und füge Sie in den head-Bereich deiner Datei ein. Erweitere deinen body-Tag mit den Angaben im body des Editors. So sollte es aussehen:

<link rel="stylesheet" type="text/css" href="skins/editor-skin.css" />
<script type="text/javascript" src="browser.js"></script>
<script type="text/javascript" src="util.js"></script>
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript" src="wym.js"></script>
</head>

   <body id="main_body" class="editor" onload="init();"
onfocusout="bCleanPaste=false;displayPasteCleanup(true)">

Die Zeilen 33–153 fügst du nun in deine Datei ein. Meine Empfehlung: kopiere diese Zeilen in eine leere Datei und binde diese mittels include(); ein. So bleibt dein Quelltext schön übersichtlich. Vergiss nicht die letzten Zeilen einzufügen:

</div>
<!-- the editor -->
<iframe id="iframe_editor" src="iframe.htm"></iframe>
</div>

Damit es auch in deinem System funktioniert, erweitere den Submit-Button um folgenden Eintrag: onclick=“getCleanHTML()“. So sollte es ungefähr aussehen:

   <input type="submit" name="submitbt"
value="Eintragen" onclick="getCleanHTML()" />

Beim Absenden des Formulares enthält die Variable $_POST[‘txthtml‘] deinen Text! Das wars.
Tipp: Wenn du einen neuen Beitrag schreibst, hast Du ja noch keinen Text. Füge dann an der betreffenden Stelle einen Dummy ein, wie z.B. ‹p>Hier Text einfügen</p›. Der Firefox reagiert sonst auf keine Eingabe!

Eine komfortablere Bildauswahl

Um den Rahmen dieses Tutorials nicht zu sprengen, gehe ich davon aus, dass die Bilddateien schon auf dem Server in einem bestimmten Verzeichnis liegen. Wir ändern jetzt die vorhandene Dialogbox um ein Auswahlfeld, in dem alle vorhandenen Bilder mittels PHP eingetragen werden.

Vorbereitungen:
Zuerst erstelle eine Kopie der Datei image.htm im Ordner dialogs. Die Kopie benenne in bildwahl.php um.
Öffne im Hauptverzeichnis die Datei config.js. In Zeile 27 steht folgende Anweisung:

"image":    "image.htm",   //add or modify an image

Ersetze „image.htm“ durch „bildwahl.php“ und öffne diese Datei in deinem Editor. Suche dort nach folgenden Zeilen (in der Originaldatei die Zeilen 37–39):

   <p>
     <label>URL</label><input type="text" id="image_src"
value="" size="40" onchange="preview()" />
   </p>

Ersetze diese Zeilen mit folgendem Code:

<p>
<label>URL</label>
<select id="image_src" size="1" onchange="preview()">
<option value="">Bitte wählen Sie...</option>
<?php
$root = $_SERVER["DOCUMENT_ROOT"];
$bildordner = "/html/bilder";
$ordnerpfad = $root.$bildordner;
$bildadresse = "http://deine-domain.de/bilder";
$handle = opendir($ordnerpfad);
while ($datei = readdir ($handle)) {
    echo $datei;
if($datei != "." && $datei != "..") {
if(is_dir($ordnerpfad."/".$datei)) {
    echo "/".$datei."<br/>";
} else {
echo "<option value='".$bildadresse."/".$datei."'>";
echo $datei."</option>";
}
}
}
closedir($handle);
?>
 </select>
 </p>

Damit das Script auch bei dir funktioniert, musst du die beiden rot hervorgehobenen Variablen entsprechend anpassen. In $bildordner trage den Pfad ab deinem ftp-Hauptverzeichnis ein. Welcher Pfad das ist? Wenn ich mich per ftp einlogge, muss ich zuerst den Websiteordner „html“ öffnen und dann den Bildordner „Bilder“, ergibt „/html/bilder“. Alles klar?

Die 2. Variable, $bildadresse, enthält die URL zu deinem Bildordner. Das sollte einfach herauszufinden sein, oder?
Wenn du alles richtig gemacht hast, werden alle Bilder aus deinem Bildordner in der Auswahlliste angezeigt. Ich denke, damit kann man einfacher arbeiten als mit der Standard-Bildauswahl.

Das war der 2. Teil, im nächsten Teil zeige ich dir, wie du mit Tabellen und Templates arbeiten kannst. Feedbacks, Pingbacks und Trackbacks sind natürlich immer Willkommen. Bis zum nächsten Mal!

Das war der 2. Teil. Wie ich diese Woche erfahren habe, soll die Version 0.3 des WYMeditors vielleicht noch diesen Monat erscheinen. Sie bringt viel Neues und vereinfacht die Integration erheblich. Das Tutorial führe ich dann mit dieser Version weiter. Ich bitte also um ein wenig Geduld!

Der nachfolgende Screenshot zeigt den Editor im originalen Zustand. Wenn du dir den Editor hier heruntergeladen hast, kannst du das gleich mit der editor.htm testen. Nicht wundern, wenn im IE ein paar Buttons mehr erscheinen, die Tabellenleiste funktioniert nur dort (die Tabellenbearbeitung ist in Firefox anders und sogar komfortabler gelöst).

Zeichenerklärung:

1. die wichtigsten Textformate, Listen, Undo/Redo-Funktion, Link‑, Bild‑ und Tabellenassistent
2. Assistent zum Einfügen von Text aus Word, Quellcode-Ansicht und Vorschau
3. Die wichtigsten Blockformate
4. Hier kannst du eigene Klassen definieren. Die Formatierung, die dem aktuellen Absatz zugewiesen wurde, ist ganz praktisch hellblau hervorgehoben. Unter Specials kannst du komplette Vorlagen, z.B. häufig verwendete HTML-Konstrukte abrufen.
5. eine der Besonderheiten von WYM: man sieht sofort, welches Absatzformat zugewiesen wurde.

Probiere doch einmal die Funktionen aus. Die Arbeit mit WYM ist nicht viel anders als in herkömmlichen Editoren. Der Vorteil bei WYM: alle Befehle kannst du nach belieben anpassen! Das machen wir im nächsten Schritt. Öffne bitte die Datei editor.htm in deinem HTML-Editor, Notepad tuts natürlich auch. Es wäre schön, wenn dein Programm Zeilennummern anzeigt, das macht die weitere Vorgehensweise einfacher.

Blockelemente anpassen

Der Quellcode ist gut dokumentiert, interessant wird es für heute ab Zeile 96 (‹div id=“panels“›). Ab hier kannst du Blockelemente und Klassen Deinen Wünschen entsprechend anpassen. Schauen wir uns zuerst die Syntax der Container etwas genauer an:

<a id="m_paragraph" href="#" onclick="setContainer('P');
getCleanHTML();return false;">Paragraph</a>

Im onClick-Ereignis werden 2 Funktionen aufgerufen. setContainer enthält das gewünschte Blockelement, mit getCleanHTML werden die Änderungen im Quelltext eingetragen.
Jeder Link erhält eine ID. Achte darauf, dass keine ID doppelt vergeben wird! Dann noch dem Link einen Namen geben und fertig. Pass doch erst einmal die Container an Deine Wünsche an, übersetze vielleicht die Linktexte, so bekommst du schnell ein Gefühl für die Arbeit mit diesen speziellen Links.

So sieht das Ergebnis z.B. bei mir aus:

  <div id="m_containers">
  <h2>Blockelemente</h2>
  <a id="m_paragraph" href="#" onclick="setContainer('P');
getCleanHTML();return false;">Paragraph (Absatz)</a>

  <a id="m_h3" href="#" onclick="setContainer('H3');
getCleanHTML();return false;">Überschrift h3</a>

  <a id="m_h4" href="#" onclick="setContainer('H4');
getCleanHTML();return false;">Überschrift h4</a>

  <a id="m_pre" href="#" onclick="setContainer('PRE');
getCleanHTML();return false;">Unformatiert (pre)</a>

  <a id="m_blockquote" href="#" onclick="setContainer
('BLOCKQUOTE');getCleanHTML();return false;">Zitat</a>
  </div>

Klassen einfügen

Mit den Klassen wird es ein wenig komplizierter. Aber schauen wir uns den Aufbau erst einmal am Beispiel der Klasse date an (Zeile 120):

  <a href="#" name="date" onclick="
setClass('date','P,DIV','*');
getCleanHTML();return false;">date</a>

Entscheidend ist die Javascriptfunktion setClass(). Dieser Funktion müssen 3 Parameter mitgegeben werden.
Parameter 1 ist der Name der Klasse, die du in Deinem Stylesheet notiert hast.
Parameter 2 gibt an, in welchen Elementen die Klasse erlaubt ist. Mit ‚*‘ kann die Klasse überall eingesetzt werden.
In Parameter 3 werden die Klassen notiert, mit denen Konflikte auftreten können. Mit einem Stern gibst du an, dass die Klasse mit keiner anderen kombiniert werden darf.
Optional gibt es noch einen 4. Parameter. Mit diesem kannst du explizit festlegen, dass die Klasse mit den angegeben Klassen kombiniert werden kann. Im Editor wird der Parameter z.B. bei side block genutzt.

Willst du mehrere Klassen angeben, trenne diese mit einem Komma!

Probieren wir es aus:
Der 2. Absatz im Editor ist mit einem grauen Rahmen hervorgehoben. Setze den Cursor in diesen Absatz und du siehst, dass die Klasse side block hervorgehoben wird. Diese ist also schon zugewiesen. Was macht diese Klasse? Teste es doch einmal mit der Vorschau …

Aha, der Absatz wird in einem separaten Block rechts dargestellt. Schließe die Vorschau, klicke in den Absatz und wähle die Klasse date. Nichts passiert? Dann funktioniert es auch richtig, denn dem armen date ist es verboten, mit einer weiteren Klasse zusammenzuarbeiten. Probiere jetzt die Klasse important. Das funktioniert, zu sehen an der Hervorhebung der beiden Klassen. Wenn du nun noch einmal die Vorschau aufrufst, siehst du, dass der Block rechts einen doppelten Rahmen hat. Den hat er aus der Klasse important übernommen.

Klingt ein wenig kompliziert? Macht doch nichts. Erstelle dir im Stylesheet soviele Klassen wie du brauchst, dann benötigst du auch den 3. und 4. Parameter nicht. Notiere aber den 3. Parameter mit einem ‚*‘. Und wenn du die Klasse wechseln willst, klicke zuerst auf Remove Classes.

Definieren wir noch ein paar eigene Klassen. Ich notiere immer in meinen Stylesheets 4 Klassen für die Absatzformatierung linksbündig, rechtsbündig, zentriert und blocksatz und 2 Klassen für Bilder, einmal links und einmal rechts ausgerichtet. Bei diesen notiere ich noch einen Abstand zum Text von 10 Pixel. So sieht das in meinem Stylesheet aus:

.links 	{ text-align: left; }
.rechts { text-align: right; }
.blocksatz { text-align: justify; }
.zentriert { text-align: center; }
.bildlinks { float: left; margin-right: 10px; }
.bildrechts { float: right; margin-left: 10px; }

Die wollen wir nun in WYM einbauen. Und so sieht das dann aus:

  <a href="#" name="links"
onclick="setClass('links','P','');
getCleanHTML();return false;">Linksbündig</a>

  <a href="#" name="zentriert"
onclick="setClass('zentriert','P','');
getCleanHTML();return false;">Zentriert</a>

  <a href="#" name="rechts"
onclick="setClass('rechts','P','');
getCleanHTML();return false;">Rechtsbündig</a>

  <a href="#" name="blocksatz"
onclick="setClass('blocksatz','P','');
getCleanHTML();return false;">Blocksatz</a>

  <h3>Bilder</h3>
  <a href="#" name="bildlinks"
onclick="setClass('bildlinks','IMG','');
getCleanHTML();return false;">Bild links vom Text</a>

  <a href="#" name="bildrechts"
onclick="setClass('bildrechts','IMG','');
getCleanHTML();return false;">Bild rechts vom Text</a>

Ist doch nicht schwer, oder? Achte darauf, den Linknamen (name=““) entsprechend anzupassen. Die Bildformate habe ich durch die h3‑Überschrift vom Rest getrennt. Auf dem Bild siehst du meine (eingedeutschte) Formatierungsleiste.

Tipps:

Die Vorschau von WYM hat mehrere Stylesheets, die du oben mit switch skin nacheinander aufrufen kannst. Da sind deine Styleanweisungen wahrscheinlich nicht dabei. Mache doch folgendes. Lege dir ein Stylesheet mit deinen speziellen Formatanweisungen an. Öffne im Ordner dialogs die Datei preview.htm. Verlinke hier im head-Breich dein Style und ab sofort werden in den einzelnen Skins deine Anweisungen sichtbar.

Hast du Textbausteine, die du häufig benötigst? Dann schau dir die Zeile 129, im Container „Special“ mal genauer an. Mit dem Link „Insert WYMeditors description“ werden 2 Zeilen Text inklusive HTML-Code eingefügt.
Diese „Codeschnipsel“ kannst Du in die Datei config.js aus dem Hauptverzeichnis eintragen. Wie die Schleife var custom_values= (ganz unten ab Zeile 46) bindest du deine Textbausteine ein. Zum Beispiel so:

var mein_Text1=
{
  "test":  "Hier kommt der Text rein. Der kann auch
  sehr lang sein. Wichtig ist die Maskierung
  der \"Anführungszeichen\" mit einem
  vorangestellten Backslash!"
}

Beachte die Schreibweise! Zuerst die Variable festlegen, dann in Anführungszeichen dem „Schnipsel“ einen Namen geben und zum Schluss, ebenfalls in Anführungszeichen, den eigentlichen Text. Natürlich darfst Du auch die geschweiften Klammern nicht vergessen! Hier noch die Einbindung in den Editor:

  <a href="#" title="Testeintrag"
onclick="insertAtCursor(mein_Text1['test']);
getCleanHTML();return false;">
  Ich bin der Linktext</a>

Soviel für heute. Ihr dürft den Text gerne verlinken, eine Weiterverwendung ohne mein Einverständnis ist jedoch nicht erlaubt.
Wenn Interesse besteht, werde ich im nächsten Teil beschreiben, wie man den Editor in ein PHP/MySQL-Projekt einbindet und sich eine Menge Arbeit spart, falls neue Versionen herauskommen. Auch für eine komfortablere Bildauswahl habe ich eine Lösung, die ich vorstellen kann. Also hinterlasst doch bitte einen kurzen Kommentar, wenn ich weitermachen soll, ok?

Vielen Dank an das WYMeditor-Team für diesen tollen Editor!