jyapayne/ace
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Updates

Browse source
This commit is contained in:
C9 2012-09-12 14:42:01 -04:00
commit 841a715deb
3 changed files with 198 additions and 118 deletions
Download patch file Download diff file Expand all files Collapse all files

18
doc/site/js/main.js
View file

@ -1,6 +1,12 @@
$(function() {
hljs.initHighlighting();
$("ul.menu-list li").click(function(e) {
if (e.target.tagName === "LI") {
console.log($(this).find("a"));
window.location = $(this).find("a").attr("href");
}
});
var tabs = $("#tabnav"),
tab_a_selector = "a";
@ -17,10 +23,20 @@
firstLoad = false;
setTimeout(function() {
$("#top_container").removeClass("collapse");
scrollIntoPosition(e.target);
}, 700);
}
else {
$("#top_container").removeClass("collapse");
scrollIntoPosition(e.target);
}
}
function scrollIntoPosition(el) {
if ($("body").scrollTop() > 345) {
$("body").stop().animate({
scrollTop: ($(el).offset().top - 15)
}, 400);
}
}
@ -33,7 +49,7 @@
$(window).on("hashchange", function(e) {
tabs.each(function() {
var idx = $.bbq.getState("nav") || "embedding";
var idx = $.bbq.getState("nav") || "about";
$(this).find(tab_a_selector + "[href='#" + idx + "']").triggerHandler('click');
});
}).trigger("hashchange");

70
doc/site/style.css
View file

@ -2,7 +2,7 @@ body {
margin:0;
padding:0;
background-color:#e6f5fc;
font-family: Helvetica, Arial;
}
h1, h2, h3, h4, h5, h6 {
@ -26,14 +26,12 @@ H2 {
H3 {
font-size:22px;
color:#253741;
margin-top:43px;
margin-bottom:8px;
}
H4 {
font-size:21px;
color:#222222;
margin-bottom:4px;
}
P {
@ -45,6 +43,7 @@ P {
UL{
line-height : 22px;
font-size: 16px;
}
#header {
@ -137,6 +136,7 @@ UL{
padding: 15px 40px;
height: 280px;
-webkit-transition: height 0.4s ease-out, opacity 0.4s ease-out, padding 0.4s ease-out, margin 0.4s ease-out;
-moz-transition: height 0.4s ease-out, opacity 0.4s ease-out, padding 0.4s ease-out, margin 0.4s ease-out;
opacity: 1;
margin-top: 25px;
}
@ -182,10 +182,14 @@ UL{
}
UL.content-list {
padding: 15px 20px;
padding: 15px 0 15px 20px;
margin:0;
}
UL.content-list li {
padding-left: 10px;
}
ul.menu-list {
padding: 0;
margin: 15px 0 20px 0;
@ -194,19 +198,55 @@ ul.menu-list {
overflow: auto;
}
UL.menu-list LI {
color:#2557b4;
ul.menu-list li {
color: #2557B4;
font-family: Helvetica, Trebuchet MS;
font-size:12px;
font-size: 12px;
padding: 5px;
cursor: pointer;
display: block;
float: left;
margin-right: 15px;
margin-bottom: 15px;
margin-bottom: 20px;
width: 100px;
height: 80px;
border: 1px solid #bbb;
height: 90px;
border-radius: 5px;
position: relative;
background: rgba(255, 255, 255, 0.7);
margin-left: 22px;
margin-top: 20px;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
-webkit-transition: box-shadow 0.4s;
-moz-transition: box-shadow 0.4s;
border: 1px solid #999;
background-image: -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 6%, hsla(0,0%,100%, .1) 7.5%),
-webkit-repeating-linear-gradient(left, hsla(0,0%, 0%,0) 0%, hsla(0,0%, 0%,0) 4%, hsla(0,0%, 0%,.03) 4.5%),
-webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%),
-webkit-linear-gradient(-90deg, hsl(0,0%,78%) 0%,
hsl(0,0%,90%) 47%,
hsl(0,0%,78%) 53%,
hsl(0,0%,70%)100%);
}
ul.menu-list li:hover {
box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}
UL.menu-list LI a {
position: absolute;
bottom: 3px;
left: 8px;
color: #FFF;
text-align: left;
font-weight: bold;
text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.8);
}
UL.menu-list LI a:hover {
text-decoration: none;
}
A {
@ -286,6 +326,8 @@ UL.menu-footer LI A:hover {
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
box-shadow: 0 0 1px rgba(255, 255, 255, 1);
-moz-box-shadow: 0 0 1px rgba(255, 255, 255, 1);
-webkit-transition: background 0.2s;
-moz-transition: background 0.2s;
}
.nav.nav-pills li:first-child > a {
@ -299,6 +341,12 @@ UL.menu-footer LI A:hover {
.nav.nav-pills li:last-child > a {
border-right: none;
box-shadow: none;
-moz-box-shadow: none;
}
.tab-content {
margin-bottom: 100px;
}
.tab-content > .active, .pill-content > .active {
@ -312,6 +360,6 @@ UL.menu-footer LI A:hover {
-moz-border-radius: 5px;
}
pre .xml .javascript {
pre .xml .javascript, pre .xml .css {
opacity: 1;
}

228
index.html
View file

@ -17,7 +17,10 @@
<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>
<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">
@ -35,7 +38,7 @@
<li>
<a href="#about" data-toggle="tab">About</a>
</li>
<li class="active">
<li>
<a href="#embedding" data-toggle="tab">Embedding Guide</a>
</li>
<li>
@ -53,13 +56,16 @@
</ul>
<div class="tab-content">
<div class="tab-pane fade" id="about">
<h1>About ACE</h1>
<p id="first">Ace is a embeddable code editor written in JavaScript.
<h1>Built for Code</h1>
<p id="first">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 <a href="http://c9.io">Cloud9 IDE</a>
and is the successor of the Mozilla Skywriter (Bespin) project.</p>
<h2>Using ACE</h2>
<p>Want ACE on your own site or web app? Check out our <a href="#nav=embedding">embedding
guide</a> to get started right away!</p>
<h2>Features</h2>
<ul class="content-list">
<li><a href="http://pcwalton.blogspot.com/2010/11/syntax-highlighting-specification.html">Syntax highlighting</a></li>
@ -74,161 +80,164 @@
<li>Displays hidden characters</li>
<li>Highlight selected word</li>
</ul>
<h2>Take Ace for a spin!</h2>
<p>Check out the <a href="./build/kitchen-sink.html">Ace live demo</a> or get a <a href="http://c9.io">Cloud9 IDE account</a> to experience Ace while editing one of your own GitHub projects.</p>
<h2>Take ACE for a spin!</h2>
<p>The <a href="http://ace.ajax.org/build/kitchen-sink.html">kitchen sink demo</a>
allows you to test all ACE features. You can check out the code for the
demo <a href="https://github.com/ajaxorg/ace/blob/master/demo/kitchen-sink/demo.js">on GitHub</a>.</p>
<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>.
Ace is a community project released under the BSD license &dash;
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!</p>
<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 &dash;
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>Previously known as “Bespin” or lately “Skywriter” it’s now
known as Ace (Ajax.org Cloud9 Editor)! Bespin and Ace started
<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 &lt;canvas> tag, while Ace is
the Editor component of the <a href="http://cloud9ide.com">Cloud9 IDE</a>
and is using the DOM for rendering. After the release of Ace at
Mozilla Labs and was based on the &lt;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&apos;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&apos;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>
<h4>Related Projects</h4>
<ul>
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>
<h4>Syntax Highlighters</h4>
<ul>
<li><a href="https://github.com/ajaxorg/ace/tree/master/lib/ace/mode">Javascript</a></li>
<li><a href="https://github.com/ajaxorg/ace/tree/master/lib/ace/mode">HTML</a></li>
<li><a href="https://github.com/ajaxorg/ace/tree/master/lib/ace/mode">CSS</a></li>
<li><a href="https://github.com/ajaxorg/ace/tree/master/lib/ace/mode">XML</a></li>
<li><a href="https://github.com/ajaxorg/ace/tree/master/lib/ace/mode">Python</a></li>
<li><a href="https://github.com/ajaxorg/ace/tree/master/lib/ace/mode">PHP</a></li>
<li><a href="https://github.com/ajaxorg/ace/tree/master/lib/ace/mode">Java</a></li>
<li><a href="https://github.com/ajaxorg/ace/tree/master/lib/ace/mode">Ruby</a></li>
<li><a href="https://github.com/ajaxorg/ace/tree/master/lib/ace/mode">C++</a></li>
<li><a href="https://github.com/ajaxorg/ace/tree/master/lib/ace/mode">CoffeeScript</a></li>
<li>and much more...</li>
<li>see <a href="http://ajaxorg.github.com/ace-builds/kitchen-sink.html">demo</a> for full list</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 any existing web page. You can either use one of
the pre-packaged versions of <a href="https://github.com/ajaxorg/ace-builds/">ace</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>
<p>Also, take a look at the one of the included demos for how to use Ace:</p>
<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>
<ul>
<li>
<a href="https://github.com/ajaxorg/ace-builds/blob/master/editor.html">Quick and dirty</a>
</li>
<li>
<a href="https://github.com/ajaxorg/ace/blob/master/demo/kitchen-sink/demo.js">Full kitchen-sink</a>
</li>
</ul>
<p>The easiest way to embed ACE is like so:</p>
<pre><code class="html">&lt;div id="editor" style="position: absolute; height: 500px; width: 500px"&gt;some code&lt;/div&gt;</code></pre>
<pre><code class="html">&lt;script src="src/ace.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
<pre><code class="html">&lt;!DOCTYPE html>
&lt;html lang="en">
&lt;head>
&lt;title>ACE in Action&lt;/title>
&lt;style type="text/css" media="screen">
#editor {
position: absolute;
width: 500px;
height: 400px;
}
&lt;/style>
&lt;/head>
&lt;body>
&lt;div id="editor">function foo(items) {
var x = "All this is syntax highlighted";
return x;
}&lt;/div>
&lt;script src="src-noconflict/ace.js" type="text/javascript" charset="utf-8">&lt;/script>
&lt;script>
var editor = ace.edit("editor");
&lt;/script&gt;
</code></pre>
editor.setTheme("ace/theme/twilight");
editor.getSession().setMode("ace/mode/javascript");
&lt;/script>
&lt;/body>
&lt;/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>How-To Guide</h1>
<p>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 <code>id</code> set to <code>"editor"</code> like so:
</p>
<pre><code class="html">&lt;div id="editor" style="position: absolute; height: 500px; width: 500px"&gt;some code&lt;/div&gt;</code></pre>
<p>...and the editor has been initialized by ACE like so:</p>
<pre><code class="javscript">&lt;script src="src/ace.js" type="text/javascript" charset="utf-8"&gt;&lt;/script&gt;
&lt;script&gt;
var editor = ace.edit("editor");
&lt;/script&gt;
</code></pre>
<h2>Setting Theme and Language Modes</h2>
<h1>Nearly Everything you Want to do with ACE</h1>
<p>This is a collection of common operations developers perform on ACE.
<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>
<p>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:</p>
<h2>Retrieving Editor States</h2>
<p>Ace keeps all the editor states (selection, scroll position, etc.) in <code class="javascript">editor.session</code>, which is very useful for making a tabbed editor:</p>
<h2>Setting Other Language Modes</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">&lt;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>Quickstart</h2>
<p>To set and get content:`</p>
<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>To get selected text:</p>
<p>Get selected text:</p>
<pre><code class="javascript">editor.session.getTextRange(editor.getSelectionRange());</code></pre>
<p>To insert at cursor:</p>
<p>Insert at cursor:</p>
<pre><code class="javascript">editor.insert("Something cool");</code></pre>
<p>To get the current cursor line and column:</p>
<p>Get the current cursor line and column:</p>
<pre><code class="javascript">editor.selection.getCursor();</code></pre>
<p>To go to a line:</p>
<p>Go to a line:</p>
<pre><code class="javascript">editor.gotoLine(lineNumber);</code></pre>
<p>To get total number of lines:</p>
<p>Get total number of lines:</p>
<pre><code class="javascript">editor.session.getLength();</code></pre>
<p>To set the default tab size:</p>
<p>Set the default tab size:</p>
<pre><code class="javascript">editor.getSession().setTabSize(4);</code></pre>
<p>To use soft tabs:</p>
<p>Use soft tabs:</p>
<pre><code class="javascript">editor.getSession().setUseSoftTabs(true);</code></pre>
<p>To set the font size:</p>
<p>Set the font size:</p>
<pre><code class="javascript">document.getElementById('editor').style.fontSize='12px';</code></pre>
<p>To toggle word wrapping:</p>
<p>Toggle word wrapping:</p>
<pre><code class="javascript">editor.getSession().setUseWrapMode(true);</code></pre>
<p>To set line highlighting:</p>
<p>Set line highlighting:</p>
<pre><code class="javascript">editor.setHighlightActiveLine(false);</code></pre>
<p>To set the print margin visibility:</p>
<p>Set the print margin visibility:</p>
<pre><code class="javascript">editor.setShowPrintMargin(false);</code></pre>
<p>To set the editor to read-only:</p>
<p>Set the editor to read-only:</p>
<pre><code class="javascript">editor.setReadOnly(true); // false to make it editable</code></pre>
@ -282,21 +291,25 @@ editor.replace('bar');</code></pre>
<pre><code>editor.replaceAll('bar');</code></pre>
<p>(<code>editor.replaceAll</code> uses the needle set by <code>searchoptions.needle.</code>)</p>
<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', callback);</code></pre>
<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', callback);</code></pre>
<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', callback);</code></pre>
<pre><code>editor.getSession().selection.on('changeCursor', function(e) {
});</code></pre>
<h3>Adding New Commands and Keybindings</h3>
@ -311,10 +324,13 @@ editor.replace('bar');</code></pre>
});</code></pre></p>
</div>
<div class="tab-pane fade" id="api">
<p>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.</p>
<h1>API Reference</h1>
<p>ACE is awesome.</p>
</div>
<div class="tab-pane fade" id="production">
<h1>Projects Using Ace</h1>
<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><a href="https://github.com/ajaxorg/cloud9">Cloud9 IDE</a></li>
<li><a href="https://github.com/blog/905-edit-like-an-ace">GitHub</a></li>
@ -341,14 +357,14 @@ editor.replace('bar');</code></pre>
<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><a href="http://www.khanacademy.org/cs/pascals-triangle/803149756">KhanAcademy</a></li>
<li><a href="http://ejohn.org/blog/introducing-khan-cs/">KhanAcademy</a></li>
</ul>
</div>
<div class="tab-pane fade" id="support">
<h4>User Resources</h4>
<ul class="menu-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>
<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>