Ace: Falsche Cursorposition

Versuchen Sie zu laufen

fm = editor.renderer.$textLayer.$fontMetrics;
"xiXbm".split("").map(fm.$measureCharWidth, fm)

Wenn dies unterschiedliche Zahlen ausgibt, ist die im Editor verwendete Schriftart nicht monospace.

Beachten Sie auch, dass das Hinzufügen einer Regel consolas !important eine schlechte Idee ist, da sie unter Linux und Mac nicht funktioniert.

Ich hatte ein ähnliches Problem und diese CSS-Erweiterung hat es behoben. Könnte helfen...

.ace_editor, .ace_editor div{
    font-family:monospace
}

(Grund: Wie @nightwing gesagt hat. Dieses Hinzufügen von CSS würde

Ich habe Benutzer, die dieses Problem unter Windows 10 / Chrome 41.0.2272.76 sehen.

@nightwing Als ich diesen Code

Dies scheint nur unter Windows zu passieren. Zuvor habe ich festgestellt, dass die Cursorposition unter Windows 8+ _immer_ falsch war, bis ich den Buchstabenabstand angepasst habe: https://github.com/ajaxorg/ace-builds/issues/58

Meine Benutzer sehen dies jedoch immer noch gelegentlich. Siehe Screenshots hier:
https://github.com/Crunch/Crunch-2/issues/39

Verwendet Ace beim Messen _alle_ CSS-Eigenschaften der angezeigten Linie? Wie Buchstabenabstand, Textschatten, Textrendering, -webkit-text-size-adjust und -webkit-font-smoothing? (Das heißt, verwendet es den berechneten Stil der aktuellen Schriftart, wie er auf den sichtbaren Editor angewendet wird?) Oder nur bestimmte?

@matthew-dean es erfordert, dass all diese Eigenschaften im Editor-Root-Element angepasst werden, sodass Stile, die von Ass-Linien geerbt werden, auch vom Measure-Div geerbt werden.
Text- Rendering:optimizeLesibility wird nicht unterstützt

@nightwing text-rendering: optimizeLegibility könnte tatsächlich der Täter sein. Es ist das einzige, was mir einfällt, um einen Monospace anders auszugleichen, was anscheinend ein Problem war, insbesondere in Chrome, _insbesondere Chrome für Windows_ seit Windows 7. Siehe: https://github.com/zub/foundation/issues/ 1827 (und andere verschiedene Fehler eingereicht).

Ich werde versuchen, diese Einstellung zumindest für den Editor zu entfernen, um zu sehen, ob sich das ändert. @vdzundza Da dies zeitweilig ist, würde mich interessieren, ob das für Sie funktioniert (und ob Sie diese Eigenschaft / diesen Wert angewendet haben).

Ich habe diese Einstellung in Text-Rendering geändert: Geometrische Präzision, die beim Rendern von Textzeichen noch genauer sein sollte. Unter Windows wird die Cursorposition jedoch immer noch ungenau gezeichnet. Weitere Screenshots finden Sie unter https://github.com/Crunch/Crunch-2/issues/39

Könnten Sie mir eine Demoseite geben, die dieses Problem reproduziert, oder vielleicht Crunch-2, damit ich es debuggen kann?

@nightwing Du kannst eine Kopie von Crunch 2 hier bekommen: https://github.com/Crunch/Crunch-2/releases

Dann schreib mir auf Twitter: https://twitter.com/matthewdeaners. Auf NWJS können Sie auf die Chrome-Entwicklertools zugreifen, aber für Crunch sind einige Schritte erforderlich.

@nightwing Irgendwelche Ideen? Wir haben immer noch Probleme mit Windows 10.

Ich konnte dies unter Windows 10 nicht reproduzieren, könnten Sie mir ein Bild senden, das das Problem zeigt?

@nightwing In diesem Thread gibt es mehrere Bilder, einige davon animiert, um zu zeigen, was passiert: https://github.com/Crunch/Crunch-2/issues/39

@nightwing Ich denke jetzt, dass dies die Hasklig-Schriftart (https://github.com/i-tu/Hasklig) + Chromium 41 + text-rendering entweder mit optimizeLesibilität oder geometrischer Präzision. Jede Einstellung, die Ligaturen aktiviert, führt zum Rendern mit inkonsistenten Zeichenbreiten. Ich habe es mit langen Ligaturen und durch Ein- und Ausschalten der Textwiedergabe getestet, und die Länge der Zeilen wurde geändert. In meinem Fall ist dies wahrscheinlich kein Ace-Problem, da Hasklig in dieser Umgebung technisch gesehen keine Monospace-Schriftart zu sein scheint. Entschuldigung für die wilde Gänsejagd; Ich wusste nicht, dass die Schriftart Nicht-Monospace rendert.

Ähm... Ich habe vielleicht zu früh gesprochen. Ich habe auch mit Source Code Pro Probleme mit der Cursorposition und text-rendering: optimizeLegibility ist deaktiviert. Allerdings scheint das Setzen/Deaktivieren von Text-Rendering die Cursor-Messung "zurückzusetzen", so dass Sie manchmal nach dem ersten Mal nicht reproduzieren können.

Okay. Also, ich kenne die Ursache nicht genau, aber ich habe eine Lösung, die für mich funktioniert. Ich setze text-indent: 0.1px und dann text-indent: 0.1px nach einem kurzen Timeout. Dies löst Layout / Paint / Composite aus, wie hier angegeben: http://csstriggers.com/

@nightwing Ein Grund, warum Sie dies noch nicht gefunden haben, könnte sein, dass das Festlegen eines Ass-Themas in den meisten Fällen wahrscheinlich ein Layout / Paint / Composite verursacht, wenn eine der "inhärenten" Schriftarteinstellungen des Browsers nicht mit den Schriftarteinstellungen des Thema, das wahrscheinlich erscheint. Chromes erster Anstrich einer Textzeile könnte ungenau sein, was bedeutet, dass die Messungen von Ace auch ungenau wären, aber solange jemand auch nur eine CSS-Eigenschaft festlegt, die ein Re-Layout auslöst, würde es niemand bemerken.

Wenn Sie also reproduzieren möchten, könnten Sie mit einigen Schriftarteinstellungen testen, die nur im CSS und nicht in einem Thema festgelegt sind, aber ich bin mir nicht sicher, welche magische Kombination es sein könnte, um den Fehler zu reproduzieren. Es ist auch möglich, dass Ace diesen Fehler erkennen kann, indem eine bestimmte Textzeile mit einem bestimmten CSS gemessen und mit einer bekannten Konstante verglichen wird (was das Ergebnis sein sollte) und dann, wenn sie nicht übereinstimmt, ein Repaint in der auslöst gleiches Verhalten. (Aber das würde natürlich in erster Linie bedeuten, den Fehler zu reproduzieren.)

Eine andere Sache, die Sie tun könnten, ist, Ace immer eine (späte) CSS-Eigenschaft setzen zu lassen, unabhängig davon, dass dies immer das Layout / Repaint auslösen würde. (Ich habe versucht, etwas herauszufinden, was nicht sichtbar ist, aber ich bin mir nicht sicher, was das sein könnte.) Soweit ich das beurteilen kann, gibt es keinen merklichen Leistungseinbruch, wenn Sie dies einmal tun, was alles ist, was Sie brauchen sollten .

Ich habe das genaue Problem festgestellt und es (für meinen Fall) behoben.

Ich habe eine Funktion für die Ausgabe von Ace ausgeführt, um YAML-Frontmaterie zu extrahieren. Diese Funktion läuft auf dem onChange-Ereignis von Ace. Als meine Funktion Fehler auswarf, begann der Cursor zu desynchronisieren. Im Gegensatz zu einem anderen ähnlichen Problem, bei dem die Cursor dauerhaft nicht mehr synchron sind, wird dieser hier "wiederhergestellt", denn wenn ich alles auswähle und alles lösche und mit dem Schreiben beginne, ohne dass die Funktion Fehler ausgibt, ist der Cursor richtig positioniert.

Ich bin mir nicht sicher, ob ich klar genug bin oder ob es in irgendeiner Weise hilft, aber ich vermute, dass jede Art von Unterbrechung des Codeflusses um Ace dazu führt, dass die Cursorposition nicht korrekt aktualisiert wird (ergo wird die Cursorposition _nach_ sicher aktualisiert .) Dinge ausgeführt werden, und wenn diese fehlschlagen, schlägt die Cursorpositionierung fehl?).

Wenn @kenlimmj einen Fehler von Ereignis-Listenern unterbrochen , da andere Listener nicht aufgerufen werden.
editor.on("input", könnte eine bessere Veranstaltung für das sein, was Sie tun.

Gleiches Problem.

Bildschirmfoto:

@AviralGarg1993 Sie müssen die Monospace-Schrift verwenden.

@nightwing Das schien nicht zu funktionieren.

https://github.com/AviralGarg1993/codeSirens/commit/edf539da1d752e5b7404a4fd7ae129f0f74a1d35

Für alle anderen, die dieses Problem haben, könnte dies helfen:

Wenn Sie eine Schriftgröße in rem haben (wie in Bootstrap 4), wäre Ihr Cursor verrückt.
Das Einstellen einer Schriftgröße von 12px hat mein Problem gelöst:

.ace_editor .ace_content {
  font-size: 12px !important;
}

Grundsätzlich kann Ace nur 'Monospace'-Schriften anzeigen, Sie können die Schriftart möglicherweise irgendwie ändern oder Sie haben den Schriftartnamen in der CSS zugewiesen.
Wenn Sie in Firefox arbeiten, gibt es eine Standardschriftart, die Ihre Monospace-Schriftart ändert. also sei dir dessen bewusst.

Der Rat von

Ich vermute, dass die Verwendung dieser Funktion in einem globalen Stylesheet alle Probleme unabhängig vom Framework beheben würde. Das Grundproblem bei der Verwendung der Schriftgröße in rem war jedoch das gleiche Kernproblem.

.ace_editor div, .ace_editor span { font-size: 12px !important; }

Ace Editor scheint nur mit Monospace-Schriftarten zu arbeiten. Wie von @skbly7 angegeben , kann die Lösung font-family:monospace anwenden, aber das Hinzufügen von !important verhindert das Überschreiben durch andere CSS, die nach Wörtern auf Elemente angewendet werden.

.ace_editor, .ace_text-input, .ace_editor div{
    font-family : monospace !important;
}

Ich baue eine neue Site mit Ace for Less.js und dies ist immer noch ein Problem, mit nichts anderem auf der Seite außer 2 Editoren. Werde meinen alten text-indent: 0.1px Hack ausprobieren.

Diesmal waren dies die Standardstile in einem Vue-Projekt, die der Übeltäter waren:

html {
  word-spacing: 1px;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

Die Standardstile von Ace sollten diese Einstellungen wahrscheinlich zurücksetzen.

Dies scheint ein altes Problem mit dem Ace-Editor zu sein, besonders offensichtlich, wenn Sie Text in Nicht-Englisch einfügen

Ich gehe davon aus, dass es hier durch einen verrückten Code verursacht wird
https://github.com/ajaxorg/ace/blob/902d1a02864479cfa7c47f46972ff53fb56924fc/lib/ace/virtual_renderer.js#L1221

Versuche es mit
Встре́ча с медве́дем мо́жет быть о́чень опа́сна. Ру́сские лю́ди лю́бят ходи́ть в лес и собира́ть грибы́ и я́годы. Они́ де́лают э́то с осторо́жностью, так как медве́ди то́же о́чень лю́бят я́годы и мо́гут напа́сть на челове́ка. Медве́дь ест всё: я́годы, ры́бу, мя́со и да́же насеко́мых. Осо́бенно он лю́бит мёд.

Anstatt seltsame Schriftarten auszuwählen, möchten Sie stattdessen die Ursache beheben? Dies ist kein Problem im Monaco-Editor

Sie haben das Cursorproblem noch nicht behoben. Es ist noch sehr viel drin und ich glaube nicht, dass das Problem das CSS ist. Es ist die verrückte Cursorlogik

https://github.com/ajaxorg/ace/blob/902d1a02864479cfa7c47f46972ff53fb56924fc/lib/ace/virtual_renderer.js#L1309

und speziell
https://github.com/ajaxorg/ace/blob/902d1a02864479cfa7c47f46972ff53fb56924fc/lib/ace/virtual_renderer.js#L1482
https://github.com/ajaxorg/ace/blob/902d1a02864479cfa7c47f46972ff53fb56924fc/lib/ace/virtual_renderer.js#L1509
die X-Koordinate ist aus!
Dies betrifft auch die Dachrinnen. Schriftbreite wird überhaupt nicht berücksichtigt

oder vielleicht
https://github.com/ajaxorg/ace/blob/7285dad33867771a688a96bbf2309f4e995a5b7d/lib/ace/layer/cursor.js#L174

Ich stehe kurz davor, meine App umzugestalten, um stattdessen Monaco zu verwenden, frage mich aber auch, ob dies behoben werden kann

selbst wenn ich auf russisch auf monospaced font setze, ist das problem immer noch da

Eine vorübergehende Lösung für diese Monospace-Schriftenhölle besteht darin, eine Monospace-Schrift mit dem ace-Editor hinzuzufügen, die alle Sprachen abdeckt, nicht nur Russisch

Ich denke, es gibt ein weiteres Problem beim Einfügen von formatiertem Text in den ace-Editor, das die Cursorposition durcheinander bringt. Ace reinigt es nicht

@blurymind Ich denke, der Algorithmus zum Schätzen der Cursorposition lang und kurz ist schrecklich naiv,

Sie können nicht wirklich wissen, wo das Ende eines gerenderten Textblocks ist, ohne seine tatsächlichen Metriken zu erhalten. Ich bin mir nicht sicher, was der richtige Algorithmus ist, aber es scheint, dass die Argumentation über die Cursorposition und die Textbreite grundlegend fehlerhaft ist, da dies so leicht zu brechen ist.

In meinem Fall passierte es erst nach der Eingabe von "ff" oder "fi" ... Bei mir hat das Deaktivieren von Ligaturen funktioniert.
Also einfach hinzufügen
.ace_editor, .ace_editor div { font-variant-ligatures: none !important; }
zum css.

Ich hoffe es hilft ;)

Hallo,
seltsame Situation hier, aber ich kann bestätigen, dass die Schriftart nicht das einzige Problem ist.
In meinem Projekt habe ich eine Komponente, die den Ace-Editor verwendet, um JSON einzugeben. Es erzwingt immer, dass die Schriftart "monospace" ist.
Wie auch immer, es funktioniert reibungslos auf Storybook, wenn es isoliert ist.
Wenn die Komponente von CSS erbt (bei Verwendung in der App, nicht in Storybook), habe ich immer noch das gleiche Problem mit einem fehlerhaften Cursor.
Es gibt viele geerbte Stile, aber die Schriftart ist monospace.

@Copainbig andere CSS-Regeln können ebenfalls stören, z. B. das Festlegen der Schriftgröße für alle div-Elemente

Ich verwende Mediawiki + Chrome und bin auf den gleichen Fehler gestoßen.

Problem gelöst durch Verwendung

.ace_editor, .ace_editor * { font-family: "Monaco", "Menlo", "Ubuntu Mono", "Droid Sans Mono", "Consolas", monospace !important; font-size: 12px !important; font-weight: 400 !important; letter-spacing: 0 !important; }

in Mediawiki:Common.css

@skbly7 Ich hatte dieses Problem, sieht aus wie in der vorherigen Version von Ace Editor, Ihre Lösung hat funktioniert, für mich jedoch nicht.

Hier ist die Lösung, nach der Sie gesucht haben,

.ace_editor * {
    font-family: monospace !important;
}

Alles was du wissen musst

Anscheinend können Sie mit einem Ace-Editor keine andere Schriftart verwenden. Es wird eine Menge UX für Ihren Code-Editor durcheinander bringen oder was auch immer Sie gerade arbeiten, wo Sie wahrscheinlich versuchen, den ace-Editor zu implementieren. Falls Sie also in Zukunft mit diesem Problem konfrontiert werden, können Sie den oben genannten Code verwenden, um dieses beschissene Problem loszuwerden, da es eine Schlampe ist, es zu lösen. Und nein, es war kein Javascript-Fehler, es war nur ein CSS-Fehler/Bug, aufgrund dessen es nicht so funktionierte, wie es sollte.

.ace_editor, .ace_editor * { font-family: "Monaco", "Menlo", "Ubuntu Mono", "Droid Sans Mono", "Consolas", monospace !important; font-size: 12px !important; font-weight: 400 !important; letter-spacing: 0 !important; }

Funktioniert bei mir gut, unter Windows10 mit dem React-Ace-Paket