Skip to content

Commit a1f79bb

Browse files
nightwingnightwing
committed
update readme and demo
1 parent 28d4807 commit a1f79bb

File tree

5 files changed

+114
-136
lines changed

5 files changed

+114
-136
lines changed

‎Makefile.dryice.js

+4-8
Original file line numberDiff line numberDiff line change
@@ -176,14 +176,10 @@ function demo() {
176176
}
177177
var changeComments = function(data) {
178178
return (data
179-
.replace("DEVEL-->", "")
180-
.replace("<!--DEVEL", "")
181-
.replace("PACKAGE-->", "")
182-
.replace("<!--PACKAGE", "")
183-
.replace("DEVEL*/", "")
184-
.replace("/*DEVEL", "")
185-
.replace("PACKAGE*/", "")
186-
.replace("/*PACKAGE", "")
179+
.replace(/<!\-\-DEVEL[\d\D]*?DEVEL\-\->/g, "")
180+
.replace(/PACKAGE\-\->|<!\-\-PACKAGE/g, "")
181+
.replace(/\/\*DEVEL[\d\D]*?DEVEL\*\//g, "")
182+
.replace(/PACKAGE\*\/|\/\*PACKAGE/g, "")
187183
.replace("%version%", version)
188184
.replace("%commit%", ref)
189185
);

‎Readme.md

+17-45
Original file line numberDiff line numberDiff line change
@@ -10,28 +10,24 @@ Features
1010
* Automatic indent and outdent
1111
* An optional command line
1212
* Handles huge documents (100,000 lines and more are no problem)
13-
* Fully customizable key bindings including VI and Emacs modes
13+
* Fully customizable key bindings including VIM and Emacs modes
1414
* Themes (TextMate themes can be imported)
1515
* Search and replace with regular expressions
1616
* Highlight matching parentheses
1717
* Toggle between soft tabs and real tabs
1818
* Displays hidden characters
1919
* Drag and drop text using the mouse
2020
* Line wrapping
21-
* Unstructured / user code folding
22-
* Live syntax checker (currently JavaScript/CoffeeScript)
21+
* Code folding
22+
* Multiple selections
23+
* Live syntax checker (currently JavaScript/CoffeeScript/Css/XQuery)
2324

2425
Take Ace for a spin!
2526
--------------------
2627

27-
Check out the Ace live [demo](http://ajaxorg.github.com/ace/) or get a [Cloud9 IDE account](http://run.cloud9ide.com) to experience Ace while editing one of your own GitHub projects.
28+
Check out the Ace live [demo](http://ajaxorg.github.com/ace-builds/kitchen-sink.html) or get a [Cloud9 IDE account](http://c9.io) to experience Ace while editing one of your own GitHub projects.
2829

29-
If you want, you can use Ace as a textarea replacement thanks to the [Ace Bookmarklet](http://ajaxorg.github.com/ace/build/textarea/editor.html).
30-
31-
History
32-
-------
33-
34-
Previously known as “Bespin” and “Skywriter” it’s now known as Ace (Ajax.org Cloud9 Editor)! 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 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. Both Ajax.org and Mozilla are actively developing and maintaining Ace.
30+
If you want, you can use Ace as a textarea replacement thanks to the [Ace Bookmarklet](http://ajaxorg.github.com/ace-builds/textarea/editor.html).
3531

3632
Getting the code
3733
----------------
@@ -40,24 +36,21 @@ Ace is a community project. We actively encourage and support contributions. The
4036

4137
```bash
4238
git clone git://github.com/ajaxorg/ace.git
43-
cd ace
44-
git submodule update --init --recursive
4539
```
4640

4741
Embedding Ace
4842
-------------
4943

50-
Ace can be easily embedded into any existing web page. The Ace git repository ships with a pre-packaged version of Ace inside of the `build` directory. The same packaged files are also available as a separate [download](https://github.com/ajaxorg/ace/downloads). Simply copy the contents of the `src` subdirectory somewhere into your project and take a look at the included demos of how to use Ace.
44+
Ace can be easily embedded into any existing web page. You can either use one of pre-packaged versions of [ace](https://github.com/ajaxorg/ace-builds/) (just copy one of `src*` subdirectories somewhere into your project), or use requireJS to load contents of [lib/ace](https://github.com/ajaxorg/ace/tree/master/lib/ace) as `ace`
45+
5146

5247
The easiest version is simply:
5348

5449
```html
5550
<div id="editor">some text</div>
5651
<script src="src/ace.js" type="text/javascript" charset="utf-8"></script>
5752
<script>
58-
window.onload = function() {
5953
var editor = ace.edit("editor");
60-
};
6154
</script>
6255
```
6356

@@ -96,10 +89,14 @@ Then the mode can be used like this:
9689
editor.getSession().setMode(new JavaScriptMode());
9790
```
9891

92+
and take a look at the one of [included](https://github.com/ajaxorg/ace-builds/blob/master/editor.html) [demos](https://github.com/ajaxorg/ace/blob/master/demo/kitchen-sink/demo.js) of how to use Ace.
93+
9994
Documentation
10095
-------------
10196

102-
You find a lot more sample code in the [demo app](https://github.com/ajaxorg/ace/blob/master/demo/demo.js).
97+
You can find api documentation at [http://ajaxorg.github.com/ace/api/index.html](http://ajaxorg.github.com/ace/api/index.html).
98+
99+
And a lot more sample code in the [demo app](https://github.com/ajaxorg/ace/blob/master/demo/kitchen-sink/demo.js).
103100

104101
There is also some documentation on the [wiki page](https://github.com/ajaxorg/ace/wiki).
105102

@@ -126,42 +123,17 @@ The editor can then be opened at http://localhost:8888/index.html.
126123
Package Ace
127124
-----------
128125

129-
To package Ace we use the dryice build tool developed by the Mozilla Skywriter team. Before you can build you need to make sure that the submodules are up to date.
130-
131-
```bash
132-
git submodule update --init --recursive
133-
```
134-
135-
Make sure you at least version 0.3.0 of dryice
136-
137-
```bash
138-
npm install dryice
139-
```
140-
141-
Afterwards Ace can be built by calling
126+
To package Ace we use the dryice build tool developed by the Mozilla Skywriter team. Make sure you at latest version of dryice
142127

143128
```bash
144-
./Makefile.dryice.js normal
145-
```
146-
147-
The packaged Ace will be put in the 'build' folder.
148-
149-
To build the bookmarklet version execute
150-
151-
```bash
152-
./Makefile.dryice.js bm
129+
npm install
130+
node ./Makefile.dryice.js ;; -m to minify, -nc to use namespaced requre, -target ./path/to/build/dir
153131
```
154132

155133
Running the Unit Tests
156134
----------------------
157135

158-
The Ace unit tests run on node.js. Before the first run a couple of node modules have to be installed. The easiest way to do this is by using the node package manager (npm). In the Ace base directory simply call
159-
160-
```bash
161-
npm link .
162-
```
163-
164-
To run the tests call:
136+
The Ace unit tests can run on node.js. Assuming you have already done `npm install`, just call:
165137

166138
```bash
167139
node lib/ace/test/all.js

‎demo/kitchen-sink/demo.js

+79-77
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@ if (location.protocol == "file:")
6666
EditSession.prototype.$useWorker = false;
6767

6868
/************** modes ***********************/
69-
var modesByName;
69+
var modes = [];
7070
function getModeFromPath(path) {
7171
var mode = modesByName.text;
7272
for (var i = 0; i < modes.length; i++) {
@@ -82,57 +82,60 @@ var Mode = function(name, desc, extensions) {
8282
this.name = name;
8383
this.desc = desc;
8484
this.mode = "ace/mode/" + name;
85-
this.extRe = new RegExp("^.*\\.(" + extensions.join("|") + ")$", "g");
85+
this.extRe = new RegExp("^.*\\.(" + extensions + ")$", "g");
8686
};
8787

8888
Mode.prototype.supportsFile = function(filename) {
8989
return filename.match(this.extRe);
9090
};
9191

92-
var modes = [
93-
new Mode("c_cpp", "C/C++", ["c", "cpp", "cxx", "h", "hpp"]),
94-
new Mode("clojure", "Clojure", ["clj"]),
95-
new Mode("coffee", "CoffeeScript", ["coffee"]),
96-
new Mode("coldfusion", "ColdFusion", ["cfm"]),
97-
new Mode("csharp", "C#", ["cs"]),
98-
new Mode("css", "CSS", ["css"]),
99-
new Mode("golang", "Go", ["go"]),
100-
new Mode("groovy", "Groovy", ["groovy"]),
101-
new Mode("haxe", "haXe", ["hx"]),
102-
new Mode("html", "HTML", ["html", "htm"]),
103-
new Mode("java", "Java", ["java"]),
104-
new Mode("diff", "Diff", ["diff", "patch"]),
105-
new Mode("javascript", "JavaScript", ["js"]),
106-
new Mode("json", "JSON", ["json"]),
107-
new Mode("latex", "LaTeX", ["tex"]),
108-
new Mode("less", "LESS", ["less"]),
109-
new Mode("lua", "Lua", ["lua"]),
110-
new Mode("liquid", "Liquid", ["liquid"]),
111-
new Mode("markdown", "Markdown", ["md", "markdown"]),
112-
new Mode("ocaml", "OCaml", ["ml", "mli"]),
113-
new Mode("scad", "OpenSCAD", ["scad"]),
114-
new Mode("perl", "Perl", ["pl", "pm"]),
115-
new Mode("pgsql", "pgSQL", ["pgsql", "sql"]),
116-
new Mode("php", "PHP", ["php"]),
117-
new Mode("powershell", "Powershell", ["ps1"]),
118-
new Mode("python", "Python", ["py"]),
119-
new Mode("scala", "Scala", ["scala"]),
120-
new Mode("scss", "SCSS", ["scss"]),
121-
new Mode("ruby", "Ruby", ["rb"]),
122-
new Mode("sql", "SQL", ["sql"]),
123-
new Mode("svg", "SVG", ["svg"]),
124-
new Mode("text", "Text", ["txt"]),
125-
new Mode("textile", "Textile", ["textile"]),
126-
new Mode("xml", "XML", ["xml"]),
127-
new Mode("sh", "SH", ["sh"]),
128-
new Mode("xquery", "XQuery", ["xq"]),
129-
new Mode("yaml", "YAML", ["yaml"])
130-
];
131-
132-
modesByName = {};
133-
modes.forEach(function(m) {
134-
modesByName[m.name] = m;
135-
});
92+
var modesByName = {
93+
coffee: ["CoffeeScript" , "coffee|^Cakefile"],
94+
coldfusion: ["ColdFusion" , "cfm"],
95+
csharp: ["C#" , "cs"],
96+
css: ["CSS" , "css"],
97+
diff: ["Diff" , "diff|patch"],
98+
golang: ["Go" , "go"],
99+
groovy: ["Groovy" , "groovy"],
100+
haxe: ["haXe" , "hx"],
101+
html: ["HTML" , "htm|html|xhtml"],
102+
c_cpp: ["C/C++" , "c|cc|cpp|cxx|h|hh|hpp"],
103+
clojure: ["Clojure" , "clj"],
104+
java: ["Java" , "java"],
105+
javascript: ["JavaScript" , "js"],
106+
json: ["JSON" , "json"],
107+
latex: ["LaTeX" , "latex|tex|ltx|bib"],
108+
less: ["LESS" , "less"],
109+
liquid: ["Liquid" , "liquid"],
110+
lua: ["Lua" , "lua"],
111+
markdown: ["Markdown" , "md|markdown"],
112+
ocaml: ["OCaml" , "ml|mli"],
113+
perl: ["Perl" , "pl|pm"],
114+
pgsql: ["pgSQL" , "pgsql"],
115+
php: ["PHP" , "php|phtml"],
116+
powershell: ["Powershell" , "ps1"],
117+
python: ["Python" , "py"],
118+
ruby: ["Ruby" , "ru|gemspec|rake|rb"],
119+
scad: ["OpenSCAD" , "scad"],
120+
scala: ["Scala" , "scala"],
121+
scss: ["SCSS" , "scss|sass"],
122+
sh: ["SH" , "sh|bash|bat"],
123+
sql: ["SQL" , "sql"],
124+
svg: ["SVG" , "svg"],
125+
text: ["Text" , "txt"],
126+
textile: ["Textile" , "textile"],
127+
xml: ["XML" , "xml|rdf|rss|wsdl|xslt|atom|mathml|mml|xul|xbl"],
128+
xquery: ["XQuery" , "xq"],
129+
yaml: ["YAML" , "yaml"]
130+
};
131+
132+
for (var name in modesByName) {
133+
var mode = modesByName[name];
134+
mode = new Mode(name, mode[0], mode[1])
135+
modesByName[name] = mode;
136+
modes.push(mode);
137+
}
138+
136139

137140
/*********** demo documents ***************************/
138141
var fileCache = {};
@@ -259,18 +262,6 @@ window.env = env;
259262
window.editor = window.ace = env.editor;
260263
env.editor.setAnimatedScroll(true);
261264

262-
var consoleHight = 20;
263-
function onResize() {
264-
var left = env.split.$container.offsetLeft;
265-
var width = document.documentElement.clientWidth - left;
266-
container.style.width = width + "px";
267-
container.style.height = document.documentElement.clientHeight - consoleHight + "px";
268-
env.split.resize();
269-
270-
consoleEl.style.width = width + "px";
271-
cmdLine.resize()
272-
}
273-
274265
var consoleEl = dom.createElement("div");
275266
container.parentNode.appendChild(consoleEl);
276267
consoleEl.style.position="fixed"
@@ -331,9 +322,6 @@ cmdLine.commands.bindKeys({
331322

332323
cmdLine.commands.removeCommands(["find", "goToLine", "findAll", "replace", "replaceAll"])
333324

334-
window.onresize = onResize;
335-
onResize();
336-
337325
/**
338326
* This demonstrates how you can define commands and bind shortcuts to them.
339327
*/
@@ -368,6 +356,22 @@ var keybindings = {
368356

369357

370358

359+
/*********** manage layout ***************************/
360+
var consoleHight = 20;
361+
function onResize() {
362+
var left = env.split.$container.offsetLeft;
363+
var width = document.documentElement.clientWidth - left;
364+
container.style.width = width + "px";
365+
container.style.height = document.documentElement.clientHeight - consoleHight + "px";
366+
env.split.resize();
367+
368+
consoleEl.style.width = width + "px";
369+
cmdLine.resize()
370+
}
371+
372+
window.onresize = onResize;
373+
onResize();
374+
371375
/*********** options pane ***************************/
372376
var docEl = document.getElementById("doc");
373377
var modeEl = document.getElementById("mode");
@@ -654,24 +658,22 @@ event.addListener(container, "drop", function(e) {
654658
var file;
655659
try {
656660
file = e.dataTransfer.files[0];
661+
if (window.FileReader) {
662+
var reader = new FileReader();
663+
reader.onload = function() {
664+
var mode = getModeFromPath(file.name);
665+
666+
env.editor.session.doc.setValue(reader.result);
667+
modeEl.value = mode.name;
668+
env.editor.session.setMode(mode.mode);
669+
env.editor.session.modeName = mode.name;
670+
};
671+
reader.readAsText(file);
672+
}
673+
return event.preventDefault(e);
657674
} catch(err) {
658-
return event.stopEvent();
659-
}
660-
661-
if (window.FileReader) {
662-
var reader = new FileReader();
663-
reader.onload = function() {
664-
var mode = getModeFromPath(file.name);
665-
666-
env.editor.session.doc.setValue(reader.result);
667-
modeEl.value = mode.name;
668-
env.editor.session.setMode(mode.mode);
669-
env.editor.session.modeName = mode.name;
670-
};
671-
reader.readAsText(file);
675+
return event.stopEvent(e);
672676
}
673-
674-
return event.preventDefault(e);
675677
});
676678

677679
// add multiple cursor support to editor

‎index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ <h2>Features</h2>
110110

111111
<h2>Take Ace for a spin!</h2>
112112
<div class="divider"></div>
113-
<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>
113+
<p>Check out the <a href="http://ajaxorg.github.com/ace-builds/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>
114114

115115
<h2>History</h2>
116116
<div class="divider"></div>

0 commit comments

Comments
 (0)