Servus, es gibt in Javascript entwickelte Editoren, die im Browser funktionieren, die u.a. auch Zeilen nummerieren und Marker für Fehler, Breakpoints usw. darstellen können. z.B.: https://github.com/scripted-editor/scripted (mit Eclipse Orion verwandt) https://codemirror.net/demo/marker.html Kann mir jemand erklären, wie diese Editoren es hinbekommen, die Zeilennummern und Marker in den "Guttern" (Balken am linken Rand) jeweils in der richtigen Höhe passend zur Textzeile anzuordnen? Basiert das ganze auf dem RichTextEditor der verschiedenen Browser, und die Gutter sind einfach zusätzlicher Text+Bildchen am Anfang jeder Zeile? Stelle ich mir sehr schwer vor, nach jedem Tastendruck wieder so schnell zurechtzurücken, dass der Benutzer es nicht mitbekommt. Oder ist es ein zusätzliches Element links neben einem RichTextEditor? Wie bekommt man es hin, so ein Element mit dem Editor zu synchronisieren und pixelgenau zu positionieren, so dass alle Zeilen auch bei variablen Texthöhen zusammenpassen? Oder werden soche Editoren "from scratch" implementiert? Heißt, man stapelt eine Anzahl Elemente übereinander, für jede Zeile eines, wobei jedes Element wiederum aus einem Gutterelement links und der Textzeile rechts besteht. Dann stelle ich mir das Verschieben von Text zwischen den Zeilen während des Tippens, Selektion über mehrere Zeilen uvm. äußerst kompliziert vor. Meine Versuche, etwas ähnliches zu schreiben, scheiterten daran, dass die Gutter-Spalte vertikal nicht mehr mit dem Text zusammenpasst, sobald ich den Text pixelweise scrolle, Textgröße oder Font ändere. Ich habe versucht, den Javascriptcode von CodeMirror und ScriptEd zu verstehen, doch er ist mir zu komplex, als dass ich mich zurechtfinden würde. Ich wäre euch sehr verbunden, wenn jemand einen Link zum konzeptionellen Aufbau solcher Editoren nennen kann. Danke!
Nimm doch einen beliebigen Browser und dessen Developertools und schau dir den HTML-Code an der dahinter steckt. Btw: Ein RichEditorKit wird von keinem Browser nativ geboten sondern wird immer per extra JS-Code geschrieben/eingebunden.
Tux schrieb: > Nimm doch einen beliebigen Browser und dessen Developertools und schau > dir den HTML-Code an der dahinter steckt. Habe ich versucht, ich steige da nicht durch :(
Bei Codemirror ist es sehr leicht ersichtlich, das andere hab ich mir nicht angesehen, wird es aber mit Sicherheit genauso handhaben: Einfach ein "div" je Zeile welches die gesamten Daten enthält, also Zeilennummer, Breakpoint und Text.
Tux schrieb: > Bei Codemirror ist es sehr leicht ersichtlich Dann kannst du sicherlich auch den Github-Link zur Datei (https://github.com/codemirror/CodeMirror/blob/master/lib/codemirror.js ?) angeben, wo dieses div erzeugt wird, sowie die Zeilennummer angeben? Das würde mir schon weiterhelfen. Wie funktioniert es, dass diese divs pixelgenau verschoben werden, wenn die Scrollbar des Texts verschoben oder wenn sich z.B. der Zeilenabstand ändert? Welches event wird dazu verwendet, und in welcher Codezeile ist dies implementiert? Danke!
Selbst ist der man. Da du nichtmal mit dem Devtool deinen Browsers umgehen kannst ist das imo eh eine Nummer zu groß für dich und vergebene liebesmüh... aber du hast ja das ganze WE Zeit es dir selbst raus zu suchen ;)
Man, man, man, Tux. Du lässt hier doch nur heiße Luft ab. Dass der Gutter div-Elemente enthält, ist mir auch klar, ohne den Code gesehen zu haben. Im Übrigen hast du nichts zu meiner Frage beigetragen. Ich habe gefragt, wer mir erklären kann, wie die genannten Editoren es lösen. Du kannst es jedenfalls nicht, also sei bitte so nett und mach den Kopf zu. Danke!
Auf deine Frage gibt es keine Antwort. Bei diesen Webprogrammen ist die interne Komplexität total aus dem Ruder gelaufen. HTML und Javascript wurden ja gar nicht für so etwas konzipiert. Sollte ursprünglich nur formatierte Texte anzeigen. Dazu ein Eingabefeld für eine Suchmaske. Dann wurde HTML für Sachen missbraucht, für die es überhaupt nicht gedacht war. Microsoft und Netscape frickelten für den Missbrauch tonnenweise mehr oder weniger sinnvolle Erweiterungen dran. Und jetzt ist ein Sammelsurium von Workarounds entstanden, mit dem sich so gerade eben ein Onlineeditor zusammen schustern lässt. Es gibt kein Konzept. Es gibt nur ein irrsinnig komplexes Gestrüpp von Tricksereien. Das kann dir niemand erklären. Die Erklärung wird mindestens so verworren, wie der Programmcode.
Diese Web-Editoren bestehen hauptsächlich aus einem div-Element mit contenteditable="true". Zumindest der Orion Editor fängt jeden Tastendruck, resize- und scroll-Event ab, um die Zeilennummern und Annotations exakt zu positionieren. Bei Bedarf kann ich dir gerne eine modifizierte Version schicken, die in diesen Eventhandlern z.B. einen Stacktrace anzeigt, um die Aufruffolge zu verstehen. Gib nichts auf "Tux" und "Noch einer". Das sind zwei, die sich gerne reden hören, wie du in 1000en anderen von ihren gehaltlosen Beträgen siehst.
Soweit klar. Hier geht es aber um eine Detailfrage. - Wie findet man die Baseline der Cursorzeile? - Wie bekommt das Programm mit, wenn sich die Cursorzeile ändert? Beantworte diese Frage mal für 2 Systeme. Für irgendein GUI-Framework, was mehr oder weniger direkt vom Smalltalk abstammt. Und für diese Single Page Webapplikationen. Dann siehst du selbst, wo das Problem liegt. In Smalltalk, Delphi... braucht man keinen Stacktrace. Da sieht man am Programmcode, wie die Teile zusammenarbeiten.
Thread beobachten
Seitenaufteilung abschaltenBitte melde dich an um einen Beitrag zu schreiben. Anmeldung ist kostenlos und dauert nur eine Minute.
Bestehender Account
Schon ein Account bei Google/GoogleMail? Keine Anmeldung erforderlich!
Mit Google-Account einloggen
Mit Google-Account einloggen
Noch kein Account? Hier anmelden.