ace README

The project's README from github.com/ajaxorg/ace. As one markdown file: README.md.

Ace (Ajax.org Cloud9 Editor)

Build Status npm

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

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 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>

Exploring configuration options Configuring-Ace

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>

The mode can then be used like this:

var JavaScriptMode = ace.require("ace/mode/javascript").Mode;
editor.session.setMode(new JavaScriptMode());

to destroy editor use

editor.destroy();
editor.container.remove();

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 https://ajaxorg.github.io/ace-api-docs/.

Also check out the sample code for the kitchen sink demo app.

If you still need help, feel free to ask a question on our discussions page.

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 using Node.JS

node ./static.js

The editor can then be opened at http://localhost:8888/kitchen-sink.html.

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

To package Ace, we use the dryice build tool developed by the Mozilla Skywriter team. Call 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")

To generate all the files in the ace-builds repository, run 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 done npm install, just call:

npm run test

You can also run the tests in your browser by serving:

http://localhost:8888/src/test/tests.html

This makes debugging failing tests much easier.

Contributing

Ace is a community project and wouldn't be what it is without contributions! We actively encourage and support contributions. The Ace source code is released under the BSD License. This license is very simple, and 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!

Feel free to fork and improve/enhance Ace any way you want. If you feel that the editor or the Ace community will benefit from your changes, please open a pull request. For more information on our contributing guidelines, see CONTRIBUTING.md.

ace (ajaxorg/ace)

code-editor
Searching Database…

27.1K ·GitHub
Ace
What is this?Ace is a standalone, open-source code editor written in JavaScript, built to match the features, usability and performance of native editors like TextMate, Vim, or Eclipse, and it can be dropped into any web page or JS app.
Is this a standalone app or a library I embed into my own page?It is a JavaScript library/component, not a standalone app - you point it at a sized, absolutely or relatively positioned DOM element in your own web page to turn it into an editor.
How do I add Ace to my project?Copy one of the pre-packaged 'src' subdirectories into your project, or load the contents of lib/ace via requireJS, then call ace.edit on the id of your DOM element.
Do I need Node.js just to use the editor?No, you only need the prepackaged JS files to embed Ace; Node.js and npm are only required if you want to build Ace from source or run its test suite.
Is there a limit to how large a document Ace can handle?Ace is designed to handle huge documents, but at last check about 4,000,000 lines was the upper limit it coped with.
How many languages and themes does Ace support out of the box?Ace ships with syntax highlighting for over 120 languages and more than 20 built-in themes, and it can import TextMate/Sublime .tmlanguage and .tmtheme files.
What keybinding modes are available?Ace offers fully customizable key bindings, including built-in Vim and Emacs emulation modes.
What is Ace's relationship to Cloud9 IDE?Ace was built as the primary editor for Cloud9 IDE and is the successor to the Mozilla Skywriter (Bespin) project.
Does Ace support multiple cursors or live error checking?Yes - it supports multiple cursors and selections plus a built-in live syntax checker for JavaScript, CoffeeScript, CSS and XQuery, with broader language checking available via the separate ace-linters project.
What are similar projects?codemirror5, editor.md, jsoneditor, atom, draft-js, toast, tomorrow-theme, prism
Which topics is it in?code-editor, text-editor, syntax-highlighting, vim, themes, plugin-system, editor, javascript-library, bsd, customization, browser, command-line
Creator
ajaxorg
Size
43.8 MB
Stars
27.1K
Updated
CommitOct 16Releasev1.44.0Aug 07
Age
15y
Commits · 90 Days