458 lines
27 KiB
HTML
458 lines
27 KiB
HTML
<!DOCTYPE html>
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head profile="http://www.w3.org/2005/10/profile">
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
|
|
<title>ACE - The High Performance Code Editor for the Web</title>
|
|
<script src="./doc/resources/ace/skeleton/javascripts/jquery.js"></script>
|
|
<script src="./doc/resources/ace/skeleton/javascripts/bbq.js"></script>
|
|
<script src="./doc/resources/ace/skeleton/javascripts/bootstrap-tab.js"></script>
|
|
<script src="https://raw.github.com/ajaxorg/ace-builds/master/src-min/ace.js"></script>
|
|
<script src="https://raw.github.com/ajaxorg/ace-builds/master/src-min/mode-javascript.js"></script>
|
|
<script src="https://yandex.st/highlightjs/7.2/highlight.min.js"></script>
|
|
<script src="doc/site/js/main.js"></script>
|
|
<link rel="stylesheet" href="https://yandex.st/highlightjs/7.0/styles/default.min.css">
|
|
<link rel="stylesheet" href="./doc/resources/ace/skeleton/csses/bootstrap.min.css">
|
|
<link href="doc/site/style.css" rel="stylesheet" type="text/css" />
|
|
<link rel="stylesheet" media="all and (max-device-width: 480px)" href="doc/site/iphone.css">
|
|
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px)" href="doc/site/iphone.css">
|
|
<link href="./doc/resources/ace/skeleton/images/favicon.ico" rel="icon" type="image/x-icon">
|
|
</head>
|
|
<body>
|
|
<a href="http://github.com/ajaxorg/ace">
|
|
<img style="z-index: 50000; position: absolute; top: 0; right: 0; border: 0;" src="https://a248.e.akamai.net/camo.github.com/e6bef7a091f5f3138b8cd40bc3e114258dd68ddf/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67"
|
|
alt="Fork me on GitHub">
|
|
</a>
|
|
<div id="wrapper">
|
|
<div class="content">
|
|
<div class="column2">
|
|
<div id="top_container" class="collapse">
|
|
<h1>The high performance code editor for the web.</h1>
|
|
<div id="page_logo">
|
|
<img src="doc/site/images/logo.png" />
|
|
</div>
|
|
</div>
|
|
<div style="clear: both"></div>
|
|
<ul id="tabnav" class="nav nav-pills">
|
|
<li>
|
|
<a href="/"><img src="api/resources/images/ace_logo_menu.png" /></a>
|
|
</li>
|
|
<li>
|
|
<a href="#about" data-toggle="tab">About</a>
|
|
</li>
|
|
<li>
|
|
<a href="#embedding" data-toggle="tab">Embedding Guide</a>
|
|
</li>
|
|
<li>
|
|
<a href="#howto" data-toggle="tab">How-To Guide</a>
|
|
</li>
|
|
<li>
|
|
<a href="./api/index.html">API Reference</a>
|
|
</li>
|
|
<li>
|
|
<a href="#production" data-toggle="tab">ACE in Production</a>
|
|
</li>
|
|
<li>
|
|
<a href="#support" data-toggle="tab">Support</a>
|
|
</li>
|
|
</ul>
|
|
<div class="tab-content">
|
|
<div class="tab-pane fade" id="about">
|
|
<h1>Built for Code</h1>
|
|
<p id="first">ACE is an embeddable code editor written in JavaScript.
|
|
It matches the features and performance of native
|
|
editors such as Sublime, Vim and TextMate. It can be easily embedded
|
|
in any web page and JavaScript application. ACE is maintained as the
|
|
primary editor for <a href="http://c9.io">Cloud9 IDE</a>
|
|
and is the successor of the Mozilla Skywriter (Bespin) project.</p>
|
|
<div id="ace_editor_wrapper">
|
|
<div id="ace_editor_demo">/**
|
|
* In fact, you're looking at ACE right now.
|
|
*
|
|
* We are currently showing off the JavaScript mode. ACE has support for 45
|
|
* language modes and 24 color themes!
|
|
*/
|
|
|
|
var resultString = "Hello, ACE! The result of your math is: ";
|
|
function add(x, y) {
|
|
var result = x + y;
|
|
return resultString + result;
|
|
}
|
|
|
|
var addResult = add(3, 2);
|
|
console.log(addResult);</div>
|
|
</div>
|
|
<p id="embed_link"><a href="#nav=embedding">Put this on your own site</a></p>
|
|
<p class="highlight_note">Looking for a more full-featured demo? The <a href="http://ace.ajax.org/build/kitchen-sink.html">kitchen sink</a>
|
|
demonstrates all ACE features.</p>
|
|
<h2>ACE Features</h2>
|
|
<ul class="content-list">
|
|
<li><a href="http://pcwalton.blogspot.com/2010/11/syntax-highlighting-specification.html">Syntax highlighting</a></li>
|
|
<li>Auto indentation and outdent</li>
|
|
<li><a href="https://github.com/mozilla/gcli">An optional command line</a></li>
|
|
<li>Work with huge documents (1,000,000+ lines are no problem)</li>
|
|
<li>Fully customizable key bindings including VI and Emacs modes</li>
|
|
<li>Themes (TextMate themes can be imported)</li>
|
|
<li>Search and replace with regular expressions</li>
|
|
<li>Highlight matching parentheses</li>
|
|
<li>Toggle between soft tabs and real tabs</li>
|
|
<li>Displays hidden characters</li>
|
|
<li>Highlight selected word</li>
|
|
</ul>
|
|
<h2>Getting the code</h2>
|
|
<p>ACE is a community project. We actively encourage and support
|
|
contributions! The ACE source code is <a href="http://github.com/ajaxorg/ace">hosted on GitHub</a>
|
|
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!</p>
|
|
<pre>git clone git://github.com/ajaxorg/ace.git</pre>
|
|
<h2>History</h2>
|
|
<p>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 <a href="http://c9.io">Cloud9 IDE</a>
|
|
and uses the DOM for rendering. After the release of ACE at
|
|
<a href="http://jsconf.eu/2010/speaker/kick_ass_code_editing_and_end.html">JSConf.eu 2010</a>
|
|
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 <a href="http://c9.io">Cloud9 IDE</a>
|
|
and <a href="http://mozilla.org">Mozilla</a> are actively developing and
|
|
maintaining ACE.</p>
|
|
<h2>Related Projects</h2>
|
|
<ul class="content-list">
|
|
<li><a href="https://github.com/joewalker/gcli">GCLI</a></li>
|
|
<li><a href="https://github.com/mozilla/dryice">DryIce</a></li>
|
|
<li><a href="https://github.com/cadorn/ace-extjs">ACE wrapper for ExtJS</a></li>
|
|
<li><a href="https://github.com/daveho/AceGWT">ACE wrapper for GWT</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="tab-pane fade active in" id="embedding">
|
|
<h1>Embedding ACE in Your Site</h1>
|
|
<p>ACE can be easily embedded into a web page. After you
|
|
test the code below, check out the <a href="#nav=howto">How-To Guide</a>
|
|
for more instructions.</p>
|
|
|
|
<pre><code class="html"><!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>ACE in Action</title>
|
|
<style type="text/css" media="screen">
|
|
#editor {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
</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");
|
|
editor.setTheme("ace/theme/twilight");
|
|
editor.getSession().setMode("ace/mode/javascript");
|
|
</script>
|
|
</body>
|
|
</html></code></pre>
|
|
<p>Now check out the <a href="#nav=howto">How-To Guide</a> for instructions on
|
|
common operations, such as setting a different language mode or
|
|
getting the contents from the editor.</p>
|
|
<h2>Loading ACE from a Local URL</h2>
|
|
<p>The above code is sufficient to get started, but if you want to clone host ACE locally you can
|
|
use one of the <a href="https://github.com/ajaxorg/ace-builds/">pre-packaged versions</a>. Just copy
|
|
one of <code>src*</code> subdirectories somewhere into your project, or use RequireJS to load the
|
|
contents of <a href="https://github.com/ajaxorg/ace/tree/master/lib/ace">lib/ace</a> as <code>ace</code>:</p>
|
|
<pre><code class="javascript">var ace = require("lib/ace");</code></pre>
|
|
</div>
|
|
<div class="tab-pane fade" id="howto">
|
|
<h1>Nearly Everything you Want to do with ACE</h1>
|
|
<p><em>In all of these cases ACE has been invoked exactly
|
|
as shown on the <a href="#nav=embedding">embedding guide</a>.</em></p>
|
|
<h2>Setting Themes</h2>
|
|
<p>To change the theme, configure the editor to use the theme using its module name. The theme file will be loaded on demand:</p>
|
|
|
|
<pre><code class="javascript">editor.setTheme("ace/theme/twilight");</code></pre>
|
|
|
|
<h2>Setting the Programming Language Mode</h2>
|
|
<p>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:</p>
|
|
|
|
<pre><code class="javascript"><script src="src/mode-javascript.js" type="text/javascript" charset="utf-8"></script></code></pre>
|
|
<p>The mode can then be used like this:</p>
|
|
<pre><code class="javascript">var javascriptMode = require("ace/mode/javascript").Mode;
|
|
editor.getSession().setMode(new javascriptMode());</pre></code>
|
|
|
|
<h2>One Editor, Multiple Sessions</h2>
|
|
<p>ACE keeps everything about the state of the editor (selection, scroll position, etc.)
|
|
in <code class="javascript">editor.session</code>. This means you can grab the
|
|
session, store it in a var, and set the editor to another session (e.g. a tabbed editor).</p>
|
|
<p>You might accomplish this like so:</p>
|
|
|
|
<pre><code class="javascript">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);</code></pre>
|
|
|
|
<h2>Common Operations</h2>
|
|
<p>Set and get content:`</p>
|
|
|
|
<pre><code class="javascript">editor.setValue("the new text here"); // or session.setValue
|
|
editor.getValue(); // or session.getValue</code></pre>
|
|
|
|
<p>Get selected text:</p>
|
|
|
|
<pre><code class="javascript">editor.session.getTextRange(editor.getSelectionRange());</code></pre>
|
|
|
|
<p>Insert at cursor:</p>
|
|
|
|
<pre><code class="javascript">editor.insert("Something cool");</code></pre>
|
|
|
|
<p>Get the current cursor line and column:</p>
|
|
|
|
<pre><code class="javascript">editor.selection.getCursor();</code></pre>
|
|
|
|
<p>Go to a line:</p>
|
|
|
|
<pre><code class="javascript">editor.gotoLine(lineNumber);</code></pre>
|
|
|
|
<p>Get total number of lines:</p>
|
|
|
|
<pre><code class="javascript">editor.session.getLength();</code></pre>
|
|
|
|
<p>Set the default tab size:</p>
|
|
|
|
<pre><code class="javascript">editor.getSession().setTabSize(4);</code></pre>
|
|
|
|
<p>Use soft tabs:</p>
|
|
|
|
<pre><code class="javascript">editor.getSession().setUseSoftTabs(true);</code></pre>
|
|
|
|
<p>Set the font size:</p>
|
|
|
|
<pre><code class="javascript">document.getElementById('editor').style.fontSize='12px';</code></pre>
|
|
|
|
<p>Toggle word wrapping:</p>
|
|
|
|
<pre><code class="javascript">editor.getSession().setUseWrapMode(true);</code></pre>
|
|
|
|
<p>Set line highlighting:</p>
|
|
|
|
<pre><code class="javascript">editor.setHighlightActiveLine(false);</code></pre>
|
|
|
|
<p>Set the print margin visibility:</p>
|
|
|
|
<pre><code class="javascript">editor.setShowPrintMargin(false);</code></pre>
|
|
|
|
<p>Set the editor to read-only:</p>
|
|
|
|
<pre><code class="javascript">editor.setReadOnly(true); // false to make it editable</code></pre>
|
|
|
|
<h3>Triggering Resizes</h3>
|
|
|
|
<p>ACE only resizes itself on window events. If you resize the editor div in another manner, and need ACE to resize, use the following:</p>
|
|
|
|
<pre><code class="javascript">editor.resize()</code></pre>
|
|
|
|
<h3>Searching in Code</h3>
|
|
|
|
<p>The main ACE search functionality is defined in <a href="https://github.com/ajaxorg/ace/blob/master/lib/ace/search.js"><em>search.js</em></a>. The following options are available to you for your search parameters:</p>
|
|
|
|
<ul>
|
|
<li>
|
|
<code>needle</code>: The string or regular expression you're looking for</li>
|
|
<li>
|
|
<code>backwards</code>: Whether to search backwards from where cursor currently is. Defaults to <code>false</code>.</li>
|
|
<li>
|
|
<code>wrap</code>: Whether to wrap the search back to the beginning when it hits the end. Defaults to <code>false</code>.</li>
|
|
<li>
|
|
<code>caseSensitive</code>: Whether the search ought to be case-sensitive. Defaults to <code>false</code>.</li>
|
|
<li>
|
|
<code>wholeWord</code>: Whether the search matches only on whole words. Defaults to <code>false</code>.</li>
|
|
<li>
|
|
<code>range</code>: The <a class="internal absent" href="/ajaxorg/ace/wiki/Range">Range</a> to search within. Set this to <code>null</code> for the whole document</li>
|
|
<li>
|
|
<code>regExp</code>: Whether the search is a regular expression or not. Defaults to <code>false</code>.</li>
|
|
<li>
|
|
<code>start</code>: The starting <a class="internal absent" href="/ajaxorg/ace/wiki/Range">Range</a> or cursor position to begin the search</li>
|
|
<li>
|
|
<code>skipCurrent</code>: Whether or not to include the current line in the search. Default to <code>false</code>.</li>
|
|
</ul><p>Here's an example of how you can set up search on the editor object:</p>
|
|
|
|
<pre><code>editor.find('needle',{
|
|
backwards: false,
|
|
wrap: false,
|
|
caseSensitive: false,
|
|
wholeWord: false,
|
|
regExp: false
|
|
});
|
|
editor.findNext();
|
|
editor.findPrevious();</code></pre>
|
|
|
|
<p>Here's how you can perform a replace:</p>
|
|
|
|
<pre><code>editor.find('foo');
|
|
editor.replace('bar');</code></pre>
|
|
|
|
<p>And here's a replace all: </p>
|
|
|
|
<pre><code>editor.replaceAll('bar');</code></pre>
|
|
|
|
<p>(<code>editor.replaceAll</code> uses the needle set earlier by <code>editor.find('needle', ...</code>)</p>
|
|
|
|
<h3>Listening to Events</h3>
|
|
|
|
<p>To listen for an <code>onchange</code>:</p>
|
|
|
|
<pre><code>editor.getSession().on('change', function(e) {
|
|
// e.type, etc
|
|
});</code></pre>
|
|
|
|
<p>To listen for an <code>selection</code> change:</p>
|
|
|
|
<pre><code>editor.getSession().selection.on('changeSelection', function(e) {
|
|
});</code></pre>
|
|
|
|
<p>To listen for a <code>cursor</code> change:</p>
|
|
|
|
<pre><code>editor.getSession().selection.on('changeCursor', function(e) {
|
|
});</code></pre>
|
|
|
|
<h3>Adding New Commands and Keybindings</h3>
|
|
|
|
<p>To assign key bindings to a custom function:</p>
|
|
|
|
<pre><code>editor.commands.addCommand({
|
|
name: 'myCommand',
|
|
bindKey: {win: 'Ctrl-M', mac: 'Command-M'},
|
|
exec: function(editor) {
|
|
//...
|
|
}
|
|
});</code></pre>
|
|
</div>
|
|
<div class="tab-pane fade" id="api">
|
|
<h1>API Reference</h1>
|
|
<p>ACE is awesome.</p>
|
|
</div>
|
|
<div class="tab-pane fade" id="production">
|
|
<h1>Projects Using ACE</h1>
|
|
<p>ACE is used all over the web in all kinds of production applications. Here is
|
|
just a small sampling:</a>
|
|
<ul class="menu-list">
|
|
<li>
|
|
<img src="doc/site/images/github-logo.png"
|
|
style="position: relative; left: -15px; top: -9px;" />
|
|
<a href="https://github.com/blog/905-edit-like-an-ace">GitHub</a>
|
|
</li>
|
|
<li>
|
|
<img src="doc/site/images/khan-logo.png"
|
|
style="position: relative; left: -10px; top: -27px; width: 120px" />
|
|
<a href="http://ejohn.org/blog/introducing-khan-cs/">Khan Academy</a>
|
|
</li>
|
|
<li>
|
|
<img src="doc/site/images/cloud9-logo.png"
|
|
style="position: relative; left: -13px; top: -13px;" />
|
|
<a href="https://github.com/ajaxorg/cloud9">Cloud9 IDE</a>
|
|
</li>
|
|
|
|
<li>
|
|
<img src="doc/site/images/firefox-logo.png"
|
|
style="position: relative; left: 0px; top: -20px;" />
|
|
<a href="https://builder.addons.mozilla.org/">Firefox Add-on Builder</a>
|
|
</li>
|
|
<li>
|
|
<img src="doc/site/images/codecademy-logo.png"
|
|
style="position: relative; left: -5px; top: 10px;" />
|
|
<a href="http://www.codecademy.com/">Codecademy</a>
|
|
</li>
|
|
<li>
|
|
<img src="doc/site/images/rstudio_logo_64.png"
|
|
style="position: relative; left: 19px; top: 2px;" />
|
|
<a href="http://rstudio.org/">RStudio</a>
|
|
</li>
|
|
<li><a href="https://github.com/Gozala/sky-edit">Sky Edit</a></li>
|
|
<li>
|
|
<img src="doc/site/images/empty-logo.png"
|
|
style="position: relative; left: -10px; top: -12px;" />
|
|
<a href="http://www.wavemaker.com/">WaveMaker</a>
|
|
</li>
|
|
<li>
|
|
<a href="http://www.playmycode.com/">Play My Code</a>
|
|
</li>
|
|
<li>
|
|
<a href="http://demo.qooxdoo.org/devel/playground/#">Qooxdoo playground</a>
|
|
</li>
|
|
<li>
|
|
<a href="http://ext.radiantcms.org/extensions/264-ace">Radiant CMS</a>
|
|
</li>
|
|
<li>
|
|
<a href="http://developercompanion.com/">Developer Companion</a>
|
|
</li>
|
|
<li>
|
|
<a href="http://www.pythonanywhere.com/">PythonAnywhere</a>
|
|
</li>
|
|
<li>
|
|
<a href="http://shiftedit.net/">shiftEdit</a>
|
|
</li>
|
|
<li>
|
|
<a href="http://www.akshell.com/">Akshell</a>
|
|
</li>
|
|
<li>
|
|
<a href="http://beanstalkapp.com/">beanstalk</a>
|
|
</li>
|
|
<li>
|
|
<a href="http://neutronide.com/">Neutron IDE</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://addons.mozilla.org/en-US/firefox/addon/acebug/">Acebug</a>
|
|
</li>
|
|
<li>
|
|
<a href="http://www.weecod.com">Weecod</a>
|
|
</li>
|
|
<li>
|
|
<a href='http://rubymonk.com'>RubyMonk</a></li>
|
|
<li>
|
|
<a href='http://rocktronica.github.com/tmpltr/'>tmpltr</a>
|
|
</li>
|
|
<li>
|
|
<a href='http://dev.cmsmadesimple.org/projects/aceeditor'>CMS Made Simple</a>
|
|
</li>
|
|
<li>
|
|
<a href='http://tryjasmine.com/'>Try Jasmine</a>
|
|
</li>
|
|
<li>
|
|
<a href="http://codebender.cc/">Codebender</a>
|
|
</li>
|
|
<li>
|
|
<a href="https://www.sharelatex.com">ShareLaTeX</a>
|
|
</li>
|
|
<li id="add_your_site">
|
|
<p>+</p>
|
|
<a href="mailto:ace@c9.io?subject=Put me on the ACE site!">Your Site Here</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="tab-pane fade" id="support">
|
|
<h1>Support and User Resources</h1>
|
|
<ul class="content-list">
|
|
<li><a href="http://groups.google.com/group/ace-discuss">ACE Google Group</a></li>
|
|
<li><a href="http://groups.google.com/group/ace-internals">ACE Core Google Group</a></li>
|
|
<li><a href="irc://irc.freenode.net/%23ace">irc.freenode.net #ace</a></li>
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script defer src="./api/resources/javascripts/ga.js"></script>
|
|
</body>
|
|
</html>
|