About ACE
-Ace is a embeddable code editor written in JavaScript. +
Built for Code
+ACE is a embeddable code editor written in JavaScript. It matches and extends the features, usability and performance of existing native editors such as Sublime, Vim or TextMate. It can be easily embedded in any web page and JavaScript application. ACE is maintained as the primary editor for Cloud9 IDE and is the successor of the Mozilla Skywriter (Bespin) project.
+Using ACE
+Want ACE on your own site or web app? Check out our embedding + guide to get started right away!
Features
- Syntax highlighting @@ -74,161 +80,164 @@
- Displays hidden characters
- Highlight selected word
Take Ace for a spin!
-Check out the Ace live demo or get a Cloud9 IDE account to experience Ace while editing one of your own GitHub projects.
+Take ACE for a spin!
+The kitchen sink demo + allows you to test all ACE features. You can check out the code for the + demo on GitHub.
Getting the code
-Ace is a community project. We actively encourage and support - contributions. The Ace source code is hosted on GitHub. - Ace is a community project released under the BSD license ‐ - very simple andis friendly to all kinds of projects, whether OSS - or not. We actively encourage and support contributions. - Take charge of your editor and add your favorite language highlighting and keybindings!
+ACE is a community project. We actively encourage and support + contributions! The ACE source code is hosted on GitHub + and released under the BSD license ‐ + very simple and friendly to all kinds of projects, whether OSS + or not. Take charge of your editor and add your favorite language + highlighting and keybindings!
git clone git://github.com/ajaxorg/ace.git
History
-Previously known as “Bespin” or lately “Skywriter” it’s now - known as Ace (Ajax.org Cloud9 Editor)! Bespin and Ace started +
Skywriter/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 + Mozilla Labs and was based on the <canvas> tag, while ACE is + the Editor component of Cloud9 IDE + and uses 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 + 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 now, which supersedes Skywriter. Both Cloud9 IDE and Mozilla are actively developing and - maintaining Ace.
-Related Projects
--
+ maintaining ACE.
+
- Javascript -
- HTML -
- CSS -
- XML -
- Python -
- PHP -
- Java -
- Ruby -
- C++ -
- CoffeeScript -
- and much more... -
- see demo for full list +
- ACE wrapper for ExtJS +
- ACE wrapper for GWT
Related Projects
+ -Syntax Highlighters
--
-
Embedding ACE in Your Site
-ACE can be easily embedded into any existing web page. You can either use one of
- the pre-packaged versions of ace
- (just copy one of src* subdirectories somewhere into your project), or
- use requireJS to load the contents of
- lib/ace as ace.
Also, take a look at the one of the included demos for how to use Ace:
+ACE can be easily embedded into a web page. After you + test the code below, check out the How-To Guide + for more instructions.
--
-
- - Quick and dirty - -
- - Full kitchen-sink - -
The easiest way to embed ACE is like so:
-<div id="editor" style="position: absolute; height: 500px; width: 500px">some code</div><script src="src/ace.js" type="text/javascript" charset="utf-8"></script>
-<script type="text/javascript">
+ <!DOCTYPE html>
+<html lang="en">
+<head>
+<title>ACE in Action</title>
+<style type="text/css" media="screen">
+ #editor {
+ position: absolute;
+ width: 500px;
+ height: 400px;
+ }
+</style>
+</head>
+<body>
+
+<div id="editor">function foo(items) {
+ var x = "All this is syntax highlighted";
+ return x;
+}</div>
+
+<script src="src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
+<script>
var editor = ace.edit("editor");
-</script>
-
+ editor.setTheme("ace/theme/twilight");
+ editor.getSession().setMode("ace/mode/javascript");
+</script>
+</body>
+</html>Now check out the How-To Guide for instructions on + common operations, such as setting a different language mode or + getting the contents from the editor.
+Loading ACE from a Local URL
+The above code is sufficient to get started, but if you want to clone host ACE locally you can
+ use one of the pre-packaged versions. Just copy
+ one of src* subdirectories somewhere into your project, or use RequireJS to load the
+ contents of lib/ace as ace:
var ace = require("lib/ace");How-To Guide
-This is a collection of common operations developers typically perform
- on their ACE instance. In all of these cases ACE has been invoked on an
- element with the id set to "editor" like so:
-
<div id="editor" style="position: absolute; height: 500px; width: 500px">some code</div>...and the editor has been initialized by ACE like so:
-<script src="src/ace.js" type="text/javascript" charset="utf-8"></script>
-<script>
- var editor = ace.edit("editor");
-</script>
-Setting Theme and Language Modes
+Nearly Everything you Want to do with ACE
+This is a collection of common operations developers perform on ACE. + In all of these cases ACE has been invoked exactly + as shown on the embedding guide.
+Setting Themes
To change the theme, configure the editor to use the theme using its module name. The theme file will be loaded on demand:
editor.setTheme("ace/theme/twilight");By default, the editor only supports plain text mode. However, all other language modes are available as separate modules. Modes are also loaded on demand, and can be included like this:
- -Retrieving Editor States
- -Ace keeps all the editor states (selection, scroll position, etc.) in editor.session, which is very useful for making a tabbed editor:
Setting Other Language Modes
+By default, the editor supports plain text mode. All other language modes are available as separate modules. Modes are also loaded on demand like this:
+ +<script src="src/mode-javascript.js" type="text/javascript" charset="utf-8">The mode can then be used like this:
+var javascriptMode = require("ace/mode/javascript").Mode;
+editor.getSession().setMode(new javascriptMode());One Editor, Multiple Sessions
+ACE keeps everything about the state of the editor (selection, scroll position, etc.)
+ in editor.session. This means you can grab the
+ session, store it in a var, and set the editor to another session (e.g. a tabbed editor).
You might accomplish this like so:
+var EditSession = require("ace/edit_session").EditSession;
var js = new EditSession("some js code");
var css = new EditSession(["some", "css", "code here"]);
// and then to load document into editor, just call
editor.setSession(js);Quickstart
-To set and get content:`
+Common Operations
+Set and get content:`
editor.setValue("the new text here"); // or session.setValue
editor.getValue(); // or session.getValueTo get selected text:
+Get selected text:
editor.session.getTextRange(editor.getSelectionRange());To insert at cursor:
+Insert at cursor:
editor.insert("Something cool");To get the current cursor line and column:
+Get the current cursor line and column:
editor.selection.getCursor();To go to a line:
+Go to a line:
editor.gotoLine(lineNumber);To get total number of lines:
+Get total number of lines:
editor.session.getLength();To set the default tab size:
+Set the default tab size:
editor.getSession().setTabSize(4);To use soft tabs:
+Use soft tabs:
editor.getSession().setUseSoftTabs(true);To set the font size:
+Set the font size:
document.getElementById('editor').style.fontSize='12px';To toggle word wrapping:
+Toggle word wrapping:
editor.getSession().setUseWrapMode(true);To set line highlighting:
+Set line highlighting:
editor.setHighlightActiveLine(false);To set the print margin visibility:
+Set the print margin visibility:
editor.setShowPrintMargin(false);To set the editor to read-only:
+Set the editor to read-only:
editor.setReadOnly(true); // false to make it editableeditor.replaceAll('bar');(editor.replaceAll uses the needle set by searchoptions.needle.)
(editor.replaceAll uses the needle set earlier by editor.find('needle', ...)
Listening to Events
To listen for an onchange:
editor.getSession().on('change', callback);editor.getSession().on('change', function(e) {
+ // e.type, etc
+});To listen for an selection change:
editor.getSession().selection.on('changeSelection', callback);editor.getSession().selection.on('changeSelection', function(e) {
+});To listen for a cursor change:
editor.getSession().selection.on('changeCursor', callback);editor.getSession().selection.on('changeCursor', function(e) {
+});Adding New Commands and Keybindings
@@ -311,10 +324,13 @@ editor.replace('bar'); });Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
+API Reference
+ACE is awesome.
Projects Using Ace
+Projects Using ACE
+ACE is used all over the web in all kinds of production applications. Here is + just a small sampling: