React-ace: 커서가 올바른 사이트에 없습니다.

안녕하세요
나는 같은 문제가있다
데모(http://securingsincity.github.io/react-ace/)의 예제를 사용했습니다.
내 코드에서 fontSize = {14} 를 제거하여 도움을 받았습니다.

@huangjiatian @RTKSoftware 당신을 도울 수 있는 이 트윗을 찾았습니다.

CSS의 font-size가 편집기 소품에 전달한 값과 다른 값일 때 이 문제가 발생했습니다. CSS에서 font-size를 제거하여 문제를 해결했습니다.

같은 문제입니다. 수정하세요. 또는 수정 방법을 제공합니다.

@MaximusDesign 나도이 문제가 있었고 ace가 고정 폭 글꼴에 의존하고 있음을 발견했습니다.
제 경우에는 ace가 설정한 monaco 를 재정의하는 전역 글꼴 모음 설정으로 인해 문제가 발생했습니다.

편집기에서 글꼴을 고정폭 글꼴로 설정하거나 단순히 inherit 로 해결할 수 있음을 발견했습니다.

우리는 styled-components를 사용하고 있으므로 솔루션은 다음과 같습니다.

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

편집기에 커서를 삭제하거나 추가할 때 비슷한 문제를 사용했는데 커서가 실제 위치에서 4칸 떨어져 있습니다. @MatthewLarner 와 유사하게 styled-components 했지만 대신 font-family를 Ace의 기본 consolas 하고 줄 높이를 줄였습니다.

 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>
    );

나는 같은 문제가 있지만 위의 모든 방법이 작동하지 않으면 Origin ace에서 솔루션을 검색합니다.
나는 이것을 얻었다 https://github.com/ajaxorg/ace/issues/2548 . 글꼴이 커서 문제를 일으키는 것은 확실합니다. 글꼴을 monospace 로 변경하면 저에게 효과적이었습니다.
.ace_editor, .ace_editor div{ font-family:monospace }