Ace (Ajax.org Cloud9 Editor)
Note: The new site at http://ace.c9.io contains all the info below along with an embedding guide and all the other resources you need to get started with Ace.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.
Features
- Syntax highlighting for over 40 languages (TextMate/Sublime/.tmlanguage files can be imported)
- Over 20 themes (TextMate/Sublime/.tmtheme files can be imported)
- Automatic indent and outdent
- An optional command line
- Handles huge documents (at last check, 4,000,000 lines is the upper limit)
- Fully customizable key bindings including vim and Emacs modes
- 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 cursors and selections
- Live syntax checker (currently JavaScript/CoffeeScript/CSS/XQuery)
- Cut, copy, and paste functionality
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.If you want, you can use Ace as a textarea replacement thanks to the Ace Bookmarklet.
Embedding Ace
Ace can be easily embedded into any existing web page. You can either use one of pre-packaged versions of ace (just copy one ofsrc*
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>
absolute
or relative
for Ace to work. e.g. #editor {
position: absolute;
width: 500px;
height: 400px;
}
<script src="src/theme-twilight.js" type="text/javascript" charset="utf-8"></script>
editor.setTheme("ace/theme/twilight");
<script src="src/mode-javascript.js" type="text/javascript" charset="utf-8"></script>
var JavaScriptMode = require("ace/mode/javascript").Mode;
editor.getSession().setMode(new JavaScriptMode());
Documentation
Additional usage information, including events to listen to and extending syntax highlighters, can be found on the main Ace website.You can also find API documentation at http://ace.c9.io/#nav=api.
Also check out the sample code for the kitchen sink demo app.
If you still need help, feel free to drop a mail on the ace mailing list, or at
irc.freenode.net#ace
.Running Ace
After the checkout Ace works out of the box. No build step is required. To try it out, simply start the bundled mini HTTP server: ./static.py
npm install mime
node ./static.js
To open the editor with a file:/// URL see the wiki.
Building Ace
You do not generally need to build ACE. The ace-builds repository endeavours to maintain the latest build, and you can just copy one of src* subdirectories somewhere into your project.However, all you need is Node.js and npm installed to package ACE. Just run
npm install
in the ace folder to install dependencies: npm install
node ./Makefile.dryice.js
node Makefile.dryice.js
on the command-line to start the packing. This build script accepts the following options-m minify build files with uglify-js
-nc namespace require and define calls with "ace"
-bm builds the bookmarklet version
--target ./path specify relative path for output folder (default value is "./build")
node Makefile.dryice.js full --target ../ace-builds
Running the Unit Tests
The Ace unit tests can run on node.js. Assuming you have already donenpm install
, just call: node lib/ace/test/all.js
http://localhost:8888/lib/ace/test/tests.html
This makes debugging failing tests way more easier.from https://github.com/ajaxorg/ace
----------------------------------------------------------
Cloud9 IDE
Cloud9 is an open source IDE built with Node.JS on the back-end and JavaScript/HTML5 on the client. It is very actively maintained by about 20 developers in both Amsterdam and San Francisco and is one component of the hosted service at c9.io. The version available here runs on your local system.Cloud9 balances the power of traditional desktop IDEs with the simplicity and elegance of editors like TextMate and Sublime.
Cloud9 is built entirely on a web stack, making it the most hacker-friendly IDE today. Fork it, hack it, and if you think others would benefit, issue a pull request on this repo and we'll take a look. If you have any questions, meet us in #cloud9ide on irc.freenode.net or ask us on Twitter @Cloud9IDE.
Happy Coding!
Features
- High performance ACE text editor with bundled syntax highlighting support for JS, HTML, CSS and mixed modes.
- Integrated debugger for Node.JS applications with views of the call stack, variables, live code execution and live inspector
- Advanced Javascript language analysis marking unused variables, globals, syntax errors and allowing for variable rename
- Local filesystem is exposed through WebDAV to the IDE, which makes it possible to connect to remote workspaces as well
- Highly extensible through both client-side and server-side plugins
- Sophisticated process management on the server with evented messaging
Browser Support
We support the newer versions of Chrome, Firefox and Safari.Installation and Usage
If installing on Windows, please refer to Installation on Windows.Requirements:
- NodeJS
>= 0.6.16
- NPM
>= 1.1.16
- libxml2-dev
git clone https://github.com/ajaxorg/cloud9.git
cd cloud9
npm install
The above install steps create a cloud9
directory with a bin/cloud9.sh
script that can be used to start Cloud9:bin/cloud9.sh
Optionally, you may specify the directory you'd like to edit:bin/cloud9.sh -w ~/git/myproject
Cloud9 will be started as a web server on port -p 3131
, you can access it by
pointing your browser to: http://localhost:3131By default Cloud9 will only listen to localhost. To listen to a different IP or hostname, use the
-l HOSTNAME
flag.
If you want to listen to all IP's:bin/cloud9.sh -l 0.0.0.0
If you are listening to all IPs it is adviced to add authentication to the IDE.
You can either do this by adding a reverse proxy in front of Cloud9,
or use the built in basic authentication through the --username
and --password
flags.bin/cloud9.sh --username leuser --password c9isawesome
Cloud9 is compatible with all connect authentication layers,
to implement your own, please see the plugins-server/cloud9.connect.basic-auth
plugin
on how we added basic authentication.Installation on Windows (experimental)
If you're running Cloud9 on Windows you'll have to follow these steps as well:- Install Grep for Windows
- Add
C:\Program Files (x86)\GnuWin32\bin
to your PATH - Open a new instance of
cmd
with elevated rights (right click 'Run as adminstrator') - Now follow the steps under 'Install'
- Please note that the
npm install
fails due to a libxml error, but you can ignore that for now.
bin/cloud9.sh
but rather via:node server.js [args]
Please note that there will be errors displayed regarding the find
command,
and that some features might not work.
Feel free to improve the Windows experience and open a pull request.Updating
To update to the latest version (if this doesn't work, just make a fresh clone):git pull
npm update
npm update
does not currently install missing dependencies. To do so use:npm install
Open Source Projects Used
The Cloud9 IDE couldn't be this cool if it weren't for the wildly productive Node.JS community producing so many high quality software. Main projects that we use as building blocks:- async.js by fjakobs
- jsDAV by mikedeboer
- connect by senchalabs
- engine.io by LearnBoost
- smith.io by creationix & cadorn
- ace by fjakobs
- apf by ajax.org
- and of course Node.JS!
from https://github.com/ajaxorg/cloud9