React-ace: Cursor ist nicht an der richtigen Stelle

Hallo
Ich habe das gleiche Problem
Ich habe ein Beispiel aus der Demo verwendet (http://securingsincity.github.io/react-ace/)
Mir hat das Entfernen von fontSize = {14} aus meinem Code geholfen

@huangjiatian @RTKSoftware Ich habe diesen Tweet gefunden, der Ihnen helfen könnte https://twitter.com/Maluen0/status/862636368857583616 Klingt nach dem genauen Problem mit der Soultion

Ich hatte dieses Problem, als die Schriftgröße in CSS einen anderen Wert hatte als den, den ich an die Editor-Requisiten übergeben hatte. Das Problem wurde behoben, indem die Schriftgröße aus dem CSS entfernt wurde.

Gleicher Fehler. Bitte repariere. Oder geben Sie eine Möglichkeit zur Behebung an.

@MaximusDesign Ich hatte auch dieses Problem und stellte fest, dass ace auf Monospace-Schriftarten angewiesen ist.
In meinem Fall wurde das Problem dadurch verursacht, dass die globalen Einstellungen der Schriftfamilie monaco überschreiben, die von Ass festgelegt werden.

Ich fand heraus, dass ich das Problem lösen konnte, indem ich entweder die Schriftart im Editor auf eine Monospace-Schriftart oder einfach inherit setzte

Wir verwenden Styled-Components, also sieht unsere Lösung so aus.

const Editor = styled(AceEditor)`
    * {
        font-family: inherit;
    }
`;

Ich habe ein ähnliches Problem beim Löschen oder Hinzufügen zum Editor verwendet, da der Cursor 4 Leerzeichen von der tatsächlichen Position entfernt ist. Ähnlich wie bei @MatthewLarner haben wir styled-components verwendet, aber stattdessen die Schriftfamilie auf Aces Standard consolas gesetzt und die Zeilenhöhe reduziert:

 const StyledEditor = styled.div`
      margin-top: 10px;
      * {
        font-family: consolas;
        line-height: 1;
      }
    `;

    return (
      <StyledEditor>
        <AceEditor
        mode="json"
        theme="solarized_dark"
        fontSize={14}
        value={''}
        setOptions={{
          showLineNumbers: false,
          tabSize: 2,
        }}
        editorProps={{ $blockScrolling: true }}
      />
      </StyledEditor>
    );

Ich habe das gleiche Problem, aber alles oben funktioniert nicht, dann suche ich die Lösung vom Ursprungsass,
Ich habe diese https://github.com/ajaxorg/ace/issues/2548 . Es ist sicher, dass die Schriftart das Cursorproblem verursacht. Ändern Sie die Schriftart in monospace hat bei mir funktioniert.
.ace_editor, .ace_editor div{ font-family:monospace }