Ace is a standalone code editor written in JavaScript. Our goal is to create a browser based editor that matches and extends the features, usability and performance of existing native editors such as TextMate, Vim or Eclipse. It can be easily embedded in any web page or JavaScript application. Ace is developed as the primary editor for Cloud9 IDE and the successor of the Mozilla Skywriter (Bespin) Project.
- Syntax highlighting
- Automatic indent and outdent
- An optional command line
- Handles huge documents (100,000 lines and more are no problem)
- Fully customizable key bindings including VIM and Emacs modes
- Themes (TextMate themes can be imported)
- Search and replace with regular expressions
- Highlight matching parentheses
- Toggle between soft tabs and real tabs
- Displays hidden characters
- Drag and drop text using the mouse
- Line wrapping
- Code folding
- Multiple selections
- Live syntax checker (currently JavaScript/CoffeeScript/Css/XQuery)
Check out the Ace live demo or get a Cloud9 IDE account to experience Ace while editing one of your own GitHub projects.
If you want, you can use Ace as a textarea replacement thanks to the Ace Bookmarklet.
Ace is a community project. We actively encourage and support contributions. The Ace source code is hosted on GitHub. It is released under the Mozilla tri-license (MPL/GPL/LGPL), the same license used by Firefox. This license is friendly to all kinds of projects, whether open source or not. Take charge of your editor and add your favorite language highlighting and keybindings!
git clone git://github.com/ajaxorg/ace.gitAce can be easily embedded into any existing web page. You can either use one of pre-packaged versions of ace (just copy one of src* subdirectories somewhere into your project), or use requireJS to load contents of lib/ace as ace
The easiest version is simply:
<div id="editor">some text</div>
<script src="src/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor");
</script>With "editor" being the id of the DOM element, which should be converted to an editor. Note that this element must be explicitly sized and positioned absolute or relative for Ace to work. e.g.
#editor {
position: absolute;
width: 500px;
height: 400px;
}