Javascript Code Editor mit live Syntax Highlighting

[Felix Riesterer]

Liebe Forumsgemeinde,

Neulich arbeitete ich an einer Lösung, die Cursorposition beim Ändern des Quelltextes in einem auf "designMode" geschalteten iFrame zu erhalten.

Mittlerweile bin ich (dank der aufmunternden und fachkundigen Unterstützung hier im Forum, besonders von Struppi) deutlich weiter gekommen und möchte nun meinen Javascript Code Editor zum Testen vorstellen. Er ist noch sehr fehlerbehaftet und kantig in der Bedienung. Aber ich bin so froh, dass er tatsächlich einigermaßen benutzbar ist!! Vor allem im Mozilla hakt es an manchen Stellen noch sehr... Dabei habe ich ihn bisher nur im FF1.5 getestet (und natürlich im IE ab 5.5+).

Natürlich freue ich mich über Verbesserungsvorschläge aller Art! Es ist das erste wirklich größere Projekt in Javascript, das ich in Angriff genommen habe.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[seth]

gudn tach!

[...] möchte nun meinen Javascript Code Editor zum Testen vorstellen. Er ist noch sehr fehlerbehaftet und kantig in der Bedienung. [...] Vor allem im Mozilla hakt es an manchen Stellen noch sehr.

ja. ich habe mal den quelltext derselben seite dort eingefuegt und wollte am anfang noch was einfuegen. pro zeichen wartete ich ca. 1 sekunde auf dessen erscheinen. copy&paste geht nicht. textareagroesse laesst sich nur ueber fenstergroesse steuern.
466 MHz, win2k, mozilla 1.7.12

prost
seth

[Felix Riesterer]

Lieber seth,

ja. ich habe mal den quelltext derselben seite dort eingefuegt und wollte am anfang noch was einfuegen. pro zeichen wartete ich ca. 1 sekunde auf dessen erscheinen. copy&paste geht nicht. textareagroesse laesst sich nur ueber fenstergroesse steuern.
466 MHz, win2k, mozilla 1.7.12

diese Beobachtung konnte ich an einem 300MHz-Rechner in der Schule nachvollziehen. Das Problem liegt darin begründet, dass ich eine korrekte Syntax nicht zeilenweise erkennen kann, da manche Sprachen Zeilenumbrüche ignorieren (HTML & CSS auf jeden Fall). Da ich aber die Zeilennummerierung gerne beibehalten möchte, muss ich den Code auf verschiedene HTML-Elemente verteilen (eben die Code-Zeilen), sodass ich bei einem Tastendruck nicht einfach nur die aktuelle Cursor-Zeile syntaktisch überprüfen kann. Daher wird bei jeder Tasteneingabe der komplette Code neu gehighlighted...

Ich bin für Vorschläge offen, wie man die syntaktische Überprüfung beschleunigen kann. Das sollte ganz bestimmt das Performance-Problem beseitigen.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Ashura]

Hallo Felix.

Mittlerweile bin ich (dank der aufmunternden und fachkundigen Unterstützung hier im Forum, besonders von Struppi) deutlich weiter gekommen und möchte nun meinen Javascript Code Editor zum Testen vorstellen.

Auf das Performanceproblem hat seth ja bereits hingewiesen; selbst bei mir (AMD Athlon 1,8 GHz, 1024GB RAM) geht die Eingabe noch nicht wirklich fließend von der Hand.

Funktionstüchtig ist es bei mir nur im Fx 1.5 und IE 6.0, im Konqueor 3.5.1 tut sich nach dem Anwählen des „Syntax Highlighting“-Kästchen nichts mehr (leeres Textfeld). Im Opera 9 TP2 werden nicht einmal dieses Kästchen und die Radiofelder angezeigt.

Warum springt der Cursor immer wieder in die nächste Zeile, wenn ich zwischen den Elementen Leerzeichen zur Code-Einrückung einfügen will? Ebenso springt der restliche Code nach oben, wenn ich den Cursor zwischen den Elementen platziere um Zeilenumbrüche einzufügen. Dies geschieht nicht, wenn der Cursor sich vor einem Tag befindet.

Da steckt offenbar eine Menge Arbeit drinnen.

Einen schönen Donnerstag noch.

Gruß, Ashura

[Felix Riesterer]

Lieber Ashura,

Funktionstüchtig ist es bei mir nur im Fx 1.5 und IE 6.0, im Konqueor 3.5.1 tut sich nach dem Anwählen des „Syntax Highlighting“-Kästchen nichts mehr (leeres Textfeld). Im Opera 9 TP2 werden nicht einmal dieses Kästchen und die Radiofelder angezeigt.

der Konqueror versteht nicht, wenn man eine Checkbox per DOM-Node hinzufügen will. Offensichtlich mag er aus einem per newInput = document.createElement("input"); erzeugten neuen Input-Element mit newInput.type = "checkbox"; keine Checkbox zaubern... Dass dann der Editor nicht aktiviert wird, leuchtet mir auch ein.

Zu Opera: Ich habe momentan nur die Version 8.5, die noch keinen designMode unterstützt.

Warum springt der Cursor immer wieder in die nächste Zeile, wenn ich zwischen den Elementen Leerzeichen zur Code-Einrückung einfügen will? Ebenso springt der restliche Code nach oben, wenn ich den Cursor zwischen den Elementen platziere um Zeilenumbrüche einzufügen. Dies geschieht nicht, wenn der Cursor sich vor einem Tag befindet.

Meine Funktionen zum Umwandeln von Code zu gehighlightetem Code und wieder zurück sind längst noch nicht perfekt... Ausserdem "springt" der Cursor auch beim Entfernen von Zeichen manchmal wie verrückt umher.

Das passiert vor allem im Mozilla, da diese Browserfamilie das selection-Objekt sehr umständlich (aber sinnvoll) handhabt, was ein korrektes Setzen des Cursors extrem erschwert. Wenn ich nun ein HTML-Element durch eine Löschung oder Überschreibung entferne, dann kann es sein, dass die Node, innerhalb derer sich der Cursor befinden soll, plötzlich eine hierarchisch weit höherstehende parentNode ist, als eigentlich von der Cursor-Position aus logisch wäre. Was ich damit meine? Probiere mal in einem CSS-Quelltext einen Doppelpunkt zwischen Eigenschaft und ihrem Wert zu entfernen. Der Cursor wird einen weiten Sprung in Richtung Zeilenanfang machen. Eine Debug-Ausgabe innerhalb des Scriptes hat mir diese unverständliche Reaktion des Browsers bestätigt.

Da steckt offenbar eine Menge Arbeit drinnen.

Das schreibst Du so unbekümmert dahin... ;-) Dabei stecken schon so viele Stunden in diesem Projekt, von dem ich nichteinmal weiß, ob es auf diese Weise überhaupt technisch zufriedenstellend fertiggestellt werden kann. :-/

Jedenfalls vielen Dank für die Rückmeldung.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Ashura]

Hallo Felix.

Zu Opera: Ich habe momentan nur die Version 8.5, die noch keinen designMode unterstützt.

Zumindest die Nutzung von RTF-Funktionen wird mit Version 9 möglich sein.
Ob der designMode irgendwann integriert wird, weiß ich leider nicht.

Probiere mal in einem CSS-Quelltext einen Doppelpunkt zwischen Eigenschaft und ihrem Wert zu entfernen. Der Cursor wird einen weiten Sprung in Richtung Zeilenanfang machen. Eine Debug-Ausgabe innerhalb des Scriptes hat mir diese unverständliche Reaktion des Browsers bestätigt.

Zudem ist die Sprungweite offenbar nicht gleich, sondern gänzlich beliebig.
Sehr merkwürdig.

Da steckt offenbar eine Menge Arbeit drinnen.

Das schreibst Du so unbekümmert dahin... ;-)

Ich meine es auch ernsthaft so. Ich habe mitbekommen, wie viel Arbeit du in dieses Projekt gesteckt hast.

BTW: Möchtest du für deine Site keine Textfarbe angeben? Bei mir ist der Text (gemäß meiner Browsereinstellung) im Fx rot.

Einen schönen Donnerstag noch.

Gruß, Ashura

[Felix Riesterer]

Lieber Ashura,

Da steckt offenbar eine Menge Arbeit drinnen.

Das schreibst Du so unbekümmert dahin... ;-)

Ich meine es auch ernsthaft so. Ich habe mitbekommen, wie viel Arbeit du in dieses Projekt gesteckt hast.

Danke. Anerkennung tut immer gut. :-)

BTW: Möchtest du für deine Site keine Textfarbe angeben? Bei mir ist der Text (gemäß meiner Browsereinstellung) im Fx rot.

Das macht sich auf dem Grün ganz wunderbar. Könnte ich mal darüber nachdenken. *g*

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Der Martin]

Hallo Ashura,

irgendwas hast du uns bisher immer verschwiegen. Das muss ja ein regelrechter Supercomputer sein, der dir zur Verfügung steht!

AMD Athlon 1,8 GHz, 1024GB RAM

Also mit Arbeitsspeicher im Terabyte-Bereich dürftest du zur Zeit wirklich noch Maßstäbe setzen. Boah...

*scnr*
 Martin

[Ashura]

Hallo Martin.

irgendwas hast du uns bisher immer verschwiegen. Das muss ja ein regelrechter Supercomputer sein, der dir zur Verfügung steht!

Schön wäre es.

AMD Athlon 1,8 GHz, 1024GB RAM

Also mit Arbeitsspeicher im Terabyte-Bereich dürftest du zur Zeit wirklich noch Maßstäbe setzen. Boah...

Immerhin brauche ich keine Festplatte mehr. Ich lasse mein(e) Betriebssystem(e) einfach im Arbeitsspeicher.

Einen schönen Donnerstag noch.

Gruß, Ash*jawohl, Fipptehler*ura

[Candid Dauth]

Heißa, Felix,

Mittlerweile bin ich (dank der aufmunternden und fachkundigen Unterstützung hier im Forum, besonders von Struppi) deutlich weiter gekommen und möchte nun meinen Javascript Code Editor zum Testen vorstellen. Er ist noch sehr fehlerbehaftet und kantig in der Bedienung. Aber ich bin so froh, dass er tatsächlich einigermaßen benutzbar ist!! Vor allem im Mozilla hakt es an manchen Stellen noch sehr... Dabei habe ich ihn bisher nur im FF1.5 getestet (und natürlich im IE ab 5.5+).

Ich verstehe nicht so ganz, wie man das eigentlich bedienen muss. Sowohl im Konqueror 3.5.1 als auch im Opera 8.51 als auch im Firefox 1.5.0.1 sehe ich eine Textarea mit einem Submitbutton. Darunter befindet sich Text, und wenn ich auf „HTML“ oder „CSS“ klicke, wird im Opera und im Konqueror etwas Code in die Textarea eingefügt. In allen drei Browsern ist JavaScript aktiviert und ich erhalte keine Fehlermeldungen. Wenn ich das Formular absende, ist die Textarea wieder leer und alles ist wie vorher.
Habe ich irgendetwas übersehen?

Gautera!
Grüße aus Biberach Riss,
Candid Dauth

[Felix Riesterer]

Lieber Candid,

Ich verstehe nicht so ganz, wie man das eigentlich bedienen muss.

über der Textarea gibt es (hoffentlich) eine Checkbox mit der Bezeichnung "Syntax Highlighting"... wenn Du Code eingefügt hast, dann kannst Du ihn über diese Checkbox einfärben.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Candid Dauth]

Heißa, Felix,

über der Textarea gibt es (hoffentlich) eine Checkbox mit der Bezeichnung "Syntax Highlighting"... wenn Du Code eingefügt hast, dann kannst Du ihn über diese Checkbox einfärben.

Nein, die erscheint bei mir nicht. Komischerweise zeigt die JavaScript-Konsole nur Warnungen zu scrollbar-Einfärbungen im CSS an, ansonsten keine Meldungen. JavaScript scheint aber zu funktionieren, denn mittlerweile fügt er den Code beim Klicken auf „HTML“ oder „CSS“ korrekt in die Textarea ein.

Gautera!
Grüße aus Biberach Riss,
Candid Dauth