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 VI 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
- Unstructured / user code folding
- Live syntax checker (currently JavaScript/CoffeeScript)
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.
Previously known as “Bespin” and “Skywriter” it’s now known as Ace (Ajax.org Cloud9 Editor)! Bespin and Ace started as two independent projects, both aiming to build a no-compromise code editor component for the web. Bespin started as part of Mozilla Labs and was based on the canvas tag, while Ace is the Editor component of the Cloud9 IDE and is using the DOM for rendering. After the release of Ace at JSConf.eu 2010 in Berlin the Skywriter team decided to merge Ace with a simplified version of Skywriter's plugin system and some of Skywriter's extensibility points. All these changes have been merged back to Ace. Both Ajax.org and Mozilla are actively developing and maintaining Ace.
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.git
cd ace
git submodule update --init --recursiveAce can be easily embedded into any existing web page. The Ace git repository ships with a pre-packaged version of Ace inside of the build directory. The same packaged files are also available as a separate download. Simply copy the contents of the src subdirectory somewhere into your project and take a look at the included demos of how to use 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>
window.onload = function() {
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;
}To change the theme simply include the Theme's JavaScript file
<script src="src/theme-twilight.js" type="text/javascript" charset="utf-8"></script>and configure the editor to use the theme:
editor.setTheme("ace/theme/twilight");By default the editor only supports plain text mode; many other languages are available as separate modules. After including the mode's JavaScript file:
<script src="src/mode-javascript.js" type="text/javascript" charset="utf-8"></script>Then the mode can be used like this:
var JavaScriptMode = require("ace/mode/javascript").Mode;
editor.getSession().setMode(new JavaScriptMode());