Eine Zeit lang war es ruhig um TinyMCE von Moxiecode, doch jetzt wurde die Version 3.0 des Javascript-basierenden WYSIWYG-Editor veröffentlicht.
Der Code wurde komplett neu implementiert sowie optimiert und ist somit um einiges schlanker geworden. Über Ajax kann Text direkt von der Festplatte geladen und eingebunden werden. Zahlreiche Fehler wurden behoben. Bisher wurden die Browser Firefox, Internet Explorer und Opera unterstützt, jetzt ist der Editor auch mit Safari von Apple kompatibel.
TinyMCE zeichnet sich durch folgende Fähigkeiten aus:
- er lässt sich mit nur 2 Zeilen Code integrieren
- über Themes und Plugins kann der Editor individuell angepasst werden
- anpassbare Ausgabe des Quelltextes im XHTML 1.0 Format
- Unterstützung von Mehrsprachigkeit
- Unterstützung der gängigsten Webbrowser
- Einsatz von Ajax zum Speichen und Laden von Inhalten
Der Editor ist bei Online-Redakteuren sehr beiliebt.
Er ist in Web-Conent-Management-Systemen wie Mambo oder Joomla der Standard-Editor und kann in anderen Systemen wie z.B. Typo3 über eine Extension integriert werden. Ich selbst nutzte schon seit geraumer Zeit ausschließlich diesen Editor. Unseren Blog haben wir um das TinyMCE Advanced Plugin für WordPress erweitert.
Hier ein Screenshot:
Auf dieser Beispielseite der Entwickler könnt ihr euch von den Fähigkeiten des Editors selbst überzeugen.
Die letzten beiden Wochen verbrachte ich unter anderen damit, mein Skript zur Darstellung mathematischer Funktionen mittels flot weiterzuentwickeln. Dabei entdeckte ich die fehlerhafte Darstellung gebrochener Zahlen in heutigen PC-Systemen und etliche andere Kleinigkeiten, auf die ich gleich eingehen werde. Insgesamt bin ich einen großen Schritt vorwärts gekommen.
Erfolgreich implementierte ich die Möglichkeit eine Kurvenschar (Funktionsschar) anzeigen zu lassen. Als zweiten Parameter entschied ich mich für die Variable z, da mir das für gewöhnlich genutze a größere Probleme beim Ersetzen des Parameters durch konkrete Werte bereitet hätte. So kommt beispielsweise ein a in Math.exp() beim Verwenden einer Exponentialfunktion vor.
Wie angekündigt habe ich die Möglichkeit eingebaut, sich über Scrollbuttons in der Grafik zu bewegen. Das erleichtet das Verfolgen eines Funktionsverlaufs erheblich. Mir ist es bisher nicht gelungen, das Zoomen mit dem Mausrad mittels des mousewheel-Plugins für jQuery 1.2.2 zu integrieren.
Alle Änderungen im Überblick:
- Einbau der numlib-Bibliothek zum Eingrenzen des Binärdarstellungsproblems von gebrochenen Zahlen
- Möglichkeit zur Darstellung von Kurvenscharen
- Integration einer Scrollfunktion in die Funktionsgrafik
- Möglichkeit die Schrittweite automatisch berechnen zu lassen
- Zulassen von gebrochenen Zahlen im Exponenten der Exponentialfunktion ( = Wurzelfunktion )
- Fehler bei negativen Zahlen behoben ( — gleich +)
- Potenzgesetze in einfacher Form eingebaut ( x[2][3] gleich x[6] )
Ich werde weiter am Ball bleiben und das Skript stetig ergänzen. Man sieht bereits, dass es vorgesehen ist, eine zweite selbstdefinierte Funktion parallel in der Grafik anzuzeigen.
Folgende Neuerungen plane ich bis zur nächsten Veröffentlichung zu realisieren:
- e-Funktion soll verwendet werden können
- ebenso trigonometrische Funktionen
- Optimierung der Scrollfunktion (nicht bei jeder Bewegung alle Werte neu berechnen)
- Mausrad-Zoom-Funktion
- Möglichkeit zwei unabhängige Funktionen darzustellen
- Verallgemeinerung der regulären Ausdrücke
- ausgeprägtere Gliederung in Funktionen oder Objekte
- Erweiterung der Potenzgesetze
Und nun viel Spaß beim Ausprobieren der aktuellen Version meiner flot-Anwendung.
Ich habe mich an den letzten beiden Tagen mit jQuery beschäftigt, mit dem Ziel einen einfachen Live-Ticker zu erstellen. Der Ticker sollte sich mittels Buttons steuern lassen und die auszugebenden Nachrichten in div-Containern ablegen.
Die Buttons zur Steuerung entstammen der Sweetie-Icon-Gallerie. Jeder Grafik wird nach dem vollständigen Laden der Seite über jQuery ein click-Event zugewiesen.
Die Klickereignisse bewirken im Einzelnen:
- eine Nachricht zurück,
- automatischen Wechsel pausieren/fortsetzen,
- nächste Nachricht anzeigen,
- zur ersten Nachricht und
- zur letzten Nachricht gehen.
Etliche Probleme bereiteten mir die Funktionen zum Durchschalten der Nachrichten-divs. Meine ersten Versuche einen Zähler zu integrieren, brachten nicht den erwünschten Erfolg. Ich beschloss dann anders an die Sache heranzugehen. Anstatt über eine Laufvariable festzulegen auf welches Container-div ich zugreifen will, ändere ich einfach die Reihenfolge der divs innerhalb des Containers.
Beim Vorwärtsgehen wird das erste Element ans Ende des div-Containers gehangen und das neue erste div (das ehemalige zweite) angezeigt. Beim Zurückschalten wird das letzte Element angezeigt und an die erste Stelle verschoben. Um die div-Elemente zu verschieben nutze ich die jQuery-Befehle clone() und remove().
function nextNews () {
$("#ticker_container").append( $("#ticker_container div:first").clone(true) );
$("#ticker_container div:first").remove();
$("#ticker").html($("#ticker_container div:first").html());
}
function preNews () {
$("#ticker").html($("#ticker_container div:last").html());
$("#ticker_container").prepend( $("#ticker_container div:last").clone(true) );
$("#ticker_container div:last").remove();
}
function stopNews () {
window.clearInterval( int_ticker );
$("#navi #navi_pause").attr("src", "24-arrow-next.png");
int_ticker = null;
}
Zum Aufruf des automatischen Vorwärtsgehens nutze ich die Javascript-Funktion window.setInterval(), deren Rückgabewert in der Variablen int_ticker gespeichert wird. Sobald der Ticker durch irgendein Ereignis gestoppt wird, wird int_ticker auf NULL gesetzt. Damit stelle ich sicher, dass das automatische Weiterschalten jederzeit fortgesetzt werden kann.
Das Skript in Aktion kann man in dieser Demo sehen.
In unserer Einführung zu jQuery kann man sich die Grundlagen im Umgang mit diesem Framework anschauen.
