To change font you can either add a css rule for #editor. or use editor.setOptions({ fontFamily: “tahoma”, fontSize: “10pt” }); But Ace only supports monospace fonts for now, and tahoma isn’t monospace, so cursor position will be wrong.
editor.focus(); //To focus the ace editor var n = editor.getSession().getValue().split(“\n”).length; // To count total no. of lines editor.gotoLine(n); //Go to end of document
Found it, you need to use this: editor.setShowPrintMargin(false); https://ace.c9.io/api/editor.html#Editor.setShowPrintMargin
As far as I’m aware, codemirror hasn’t had any performance issues for ages, so try to use that. Here’s your jsfiddle but with codemirror instead: https://jsfiddle.net/DerpMarine/j54gfecL/16/ <script src=”https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.39.2/codemirror.js”></script><link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.39.2/codemirror.min.css”> <script src=”https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.39.2/mode/css/css.js”></script> </body> <script> var myCodeMirror = CodeMirror(function(elt) { document.getElementById(‘editor’).parentNode.replaceChild(elt, document.getElementById(‘editor’)); },{ mode: “css”, theme: “custom”, // https://codemirror.net/doc/manual.html#option_theme and https://codemirror.net/theme/ value: document.getElementById(‘editor’).value }); </script> https://codemirror.net/doc/manual.html
Autocomplete is now an official part of the API. Enabling it takes 3 lines of code: ace.require(“ace/ext/language_tools”); var editor = ace.edit(“editor”); editor.setOptions({ enableBasicAutocompletion: true }); Depending on your setup with require-js, you may also need to include an additional javascript file in the html for your page: <script src=”https://stackoverflow.com/questions/13545433/ace/ext-language_tools.js”></script> You can find a demo at … Read more
(UPDATE: I’m not working with this at the moment, but my answer may be out of date. To try and incorporate what others have provided, I’ll echo their mention of the minLines and maxLines properties, e.g. editor.setOptions({ maxLines: Infinity }); Apparently infinity is “not a very good idea, since it will disable virtual viewport even … Read more
Per their API: Markup: <div id=”aceEditor” style=”height: 500px; width: 500px”>some text</div> Finding an instance: var editor = ace.edit(“aceEditor”); Getting/Setting Values: var code = editor.getValue(); editor.setValue(“new code here”); Based on my experience, Ace is the best code editor I’ve seen. There are few others such as CodeMirror etc. but I found them to be less useful … Read more
As far as I understood the idea of Ace, you shouldn’t make a textarea an Ace editor itself. You should create an additional div and update textarea using .getSession() function instead. html <textarea name=”description”/> <div id=”description”/> js var editor = ace.edit(“description”); var textarea = $(‘textarea[name=”description”]’).hide(); editor.getSession().setValue(textarea.val()); editor.getSession().on(‘change’, function(){ textarea.val(editor.getSession().getValue()); }); or just call textarea.val(editor.getSession().getValue()); only … Read more
You can use the second parameter to control cursor position after setValue editor.setValue(str, -1) // moves cursor to the start editor.setValue(str, 1) // moves cursor to the end