Closed huangjiatian closed 6 years ago
Hello
I got same problem
I used an example from demo (http://securingsincity.github.io/react-ace/)
I was helped by the removal of fontSize = {14}
from my code
@huangjiatian @RTKSoftware i found this tweet that might help you https://twitter.com/Maluen0/status/862636368857583616 Sounds like the exact issue with the soultion
I had this issue when the font-size in CSS was a differing value than the one I passed to the editor props. Resolved the issue by removing the font-size from the CSS.
Same issue. Please fix. Or provide a way to fix.
@MaximusDesign I also had this issue and found that ace is relying on monospace fonts.
In my case the issue was caused because of global font-family settings overriding monaco
that ace sets.
I found I could resolve by either setting the font in the editor to a monospace font or simply inherit
We're using styled-components so our solution looks like this.
const Editor = styled(AceEditor)`
* {
font-family: inherit;
}
`;
I used a similar issue when deleting or adding to the editor the cursor is 4 spaces from the actual position. Similar to @MatthewLarner we used styled-components
but instead set the font-family to Ace's default consolas
and reduced the line height:
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>
);
i got the same issue,but all way above does not work,then i search the solution from the origin ace,
i got this https://github.com/ajaxorg/ace/issues/2548. it's certain the font cause the cursor problem. change the font to monospace
worked for me.
.ace_editor, .ace_editor div{ font-family:monospace }
Setting the font family half solved the issue for me. The quotation marks were still problematic. I used this for complete solution:
.ace_editor,
.ace_editor * {
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Droid Sans Mono', 'Consolas', monospace !important;
font-weight: 400 !important;
letter-spacing: 0 !important;
}
hamzatekin solution with addition of monospace fonts worked for me.
Setting the font family half solved the issue for me. The quotation marks were still problematic. I used this for complete solution:
.ace_editor, .ace_editor * { font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Droid Sans Mono', 'Consolas', monospace !important; font-weight: 400 !important; letter-spacing: 0 !important; }
this worked for me, that's great!
Hi,all I found the cursor is not all the right site how can i fix it