Menu
I've found simmilar question: Ace Editor autocomplete and multiple languages
But the responses were that autocompletion is not supported by ACE, and according to Google group for Ace Editor "It is on my wishlish for Ace and we definitively need it for Cloud9".
This post is one year old and as you can see, the cloud9 supports autocompletion now: https://c9.io/site/features/
So is autocompletion available in Ace Editor by default? I cannot find any information about it.
981
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="ace/ext-language_tools.js"></script> You can find a demo at https://github.com/ajaxorg/ace/blob/master/demo/autocompletion.html
And here's the wiki page I just wrote on the topic:
https://github.com/ajaxorg/ace/wiki/How-to-enable-Autocomplete-in-the-Ace-editor
170
Since Autocomplete is now a part of the ACE api:
1) Include ace.js at the top of your html:
<script type="text/javascript" src="js/ace.js"></script> 2) Also include your mode (language type):
<script type="text/javascript" src="js/mode-yaml.js"></script> 3) Also include your theme:
<script type="text/javascript" src="js/theme-monokai.js"></script> 4) Also include ex-language_tools.js:
<script src="js/ext-language_tools.js"></script> 5) Add your div with id editor (this will become your IDE):
<div id="editor"></div> 6) Include the following script (see my comments to understand them) :
<script> var langTools = ace.require("ace/ext/language_tools"); Line below transforms your div with id="editor" into the editor
var editor = ace.edit("editor"); Line below sets the color theme. Other themes available here...try them here
editor.setTheme("ace/theme/monokai"); Line below sets the mode based on programming language...other modes here:
editor.getSession().setMode("ace/mode/yaml"); editor.setShowPrintMargin(false); Lines below turns ON autocompletion in real-time.
editor.setOptions({ enableBasicAutocompletion: true, enableSnippets: true, enableLiveAutocompletion: false }); Thus, the whole thing could be broken down into the following:
<!DOCTYPE html> <html> <head> <title>IDE AUTOCOMPLETE</title> <link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.min.css"> <script src="//code.jquery.com/jquery-1.11.2.min.js"></script> <script type="text/javascript" src="js/ace.js"></script> <script type="text/javascript" src="js/mode-yaml.js"></script> <script type="text/javascript" src="js/theme-monokai.js"></script> <script src="js/ext-language_tools.js"></script> </head> <body> <!-- EDITOR SECTION BELOW! --> <div id="editor"></div> <script> var langTools = ace.require("ace/ext/language_tools"); var editor = ace.edit("editor"); editor.setTheme("ace/theme/monokai"); editor.getSession().setMode("ace/mode/yaml"); editor.setShowPrintMargin(false); editor.setOptions({ enableBasicAutocompletion: true, enableSnippets: true, enableLiveAutocompletion: false }); </script> <!-- EDITOR SECTION ABOVE --> </body> </html> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
