Hi,
I have used Ace editor a few times in my previous projects. Never did I face this problem before of having my cursor misplaced in my Ace editor. Let me guide you step by step
Editor markup
Here is a markup where I want my Ace editor to show up.
1 |
<pre id="editor"></pre> |
Then I have this CSS that applies to the editor element
CSS
1 2 3 4 5 6 7 8 |
#editor { margin: 0; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } |
Above CSS allow my editor to take entire space within the document body or relatively positioned container.
Then comes the Javascript to do its magic
1 2 3 |
<script type="text/javascript"> var editor = ace.edit("editor"); </script> |
Now the editor will show up and I am able to do my thing. However I now have a unique issue where when I start to type the cursor position is a bit far from the text, so basically I have a gap between the expected and actual cursor position in my Ace Editor as shown below
It turned out that Ace editor must use monospace font and I was setting fonts on a not so recommended way as shown below
1 2 3 |
* { font-family: 'Open Sans', Arial,"Calibri", Helvetica, Arial, sans-serif; } |
Just to check things out and enforcing my editor to use monospace font fixed the issue instantly. This is what I changed my styles for my editor instance to which solved it.
1 2 3 |
#editor .ace_content *{ font-family: monospace, monospace; } |
I also ended up cleaning the way I was applying my fonts to all my elements by getting rid of * construct.
I hope this helps
Thanks, it helps me a lot!!!!!!
awesome! thanks. Works like charm.