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

update readme and demo

Browse source
This commit is contained in:
nightwing 2012-05-31 23:40:11 +04:00
commit a1f79bb2e2
5 changed files with 113 additions and 135 deletions
Download patch file Download diff file Expand all files Collapse all files

12
Makefile.dryice.js
View file

@ -176,14 +176,10 @@ function demo() {
}
var changeComments = function(data) {
return (data
.replace("DEVEL-->", "")
.replace("<!--DEVEL", "")
.replace("PACKAGE-->", "")
.replace("<!--PACKAGE", "")
.replace("DEVEL*/", "")
.replace("/*DEVEL", "")
.replace("PACKAGE*/", "")
.replace("/*PACKAGE", "")
.replace(/<!\-\-DEVEL[\d\D]*?DEVEL\-\->/g, "")
.replace(/PACKAGE\-\->|<!\-\-PACKAGE/g, "")
.replace(/\/\*DEVEL[\d\D]*?DEVEL\*\//g, "")
.replace(/PACKAGE\*\/|\/\*PACKAGE/g, "")
.replace("%version%", version)
.replace("%commit%", ref)
);

62
Readme.md
View file

@ -10,7 +10,7 @@ Features
* Automatic indent and outdent
* An optional command line
* Handles huge documents (100,000 lines and more are no problem)
* Fully customizable key bindings including VI and Emacs modes
* Fully customizable key bindings including VIM and Emacs modes
* Themes (TextMate themes can be imported)
* Search and replace with regular expressions
* Highlight matching parentheses
@ -18,20 +18,16 @@ Features
* Displays hidden characters
* Drag and drop text using the mouse
* Line wrapping
* Unstructured / user code folding
* Live syntax checker (currently JavaScript/CoffeeScript)
* Code folding
* Multiple selections
* Live syntax checker (currently JavaScript/CoffeeScript/Css/XQuery)
Take Ace for a spin!
--------------------
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.
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.
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).
History
-------
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.
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).
Getting the code
----------------
@ -40,14 +36,13 @@ Ace is a community project. We actively encourage and support contributions. The
```bash
git clone git://github.com/ajaxorg/ace.git
cd ace
git submodule update --init --recursive
```
Embedding Ace
-------------
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.
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`
The easiest version is simply:
@ -55,9 +50,7 @@ The easiest version is simply:
<div id="editor">some text</div>
<script src="src/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
window.onload = function() {
var editor = ace.edit("editor");
};
</script>
```
@ -96,10 +89,14 @@ Then the mode can be used like this:
editor.getSession().setMode(new JavaScriptMode());
```
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.
Documentation
-------------
You find a lot more sample code in the [demo app](https://github.com/ajaxorg/ace/blob/master/demo/demo.js).
You can find api documentation at [http://ajaxorg.github.com/ace/api/index.html](http://ajaxorg.github.com/ace/api/index.html).
And a lot more sample code in the [demo app](https://github.com/ajaxorg/ace/blob/master/demo/kitchen-sink/demo.js).
There is also some documentation on the [wiki page](https://github.com/ajaxorg/ace/wiki).
@ -126,42 +123,17 @@ The editor can then be opened at http://localhost:8888/index.html.
Package Ace
-----------
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.
To package Ace we use the dryice build tool developed by the Mozilla Skywriter team. Make sure you at latest version of dryice
```bash
git submodule update --init --recursive
```
Make sure you at least version 0.3.0 of dryice
```bash
npm install dryice
```
Afterwards Ace can be built by calling
```bash
./Makefile.dryice.js normal
```
The packaged Ace will be put in the 'build' folder.
To build the bookmarklet version execute
```bash
./Makefile.dryice.js bm
npm install
node ./Makefile.dryice.js ;; -m to minify, -nc to use namespaced requre, -target ./path/to/build/dir
```
Running the Unit Tests
----------------------
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
```bash
npm link .
```
To run the tests call:
The Ace unit tests can run on node.js. Assuming you have already done `npm install`, just call:
```bash
node lib/ace/test/all.js

154
demo/kitchen-sink/demo.js
View file

@ -66,7 +66,7 @@ if (location.protocol == "file:")
EditSession.prototype.$useWorker = false;
/************** modes ***********************/
var modesByName;
var modes = [];
function getModeFromPath(path) {
var mode = modesByName.text;
for (var i = 0; i < modes.length; i++) {
@ -82,57 +82,60 @@ var Mode = function(name, desc, extensions) {
this.name = name;
this.desc = desc;
this.mode = "ace/mode/" + name;
this.extRe = new RegExp("^.*\\.(" + extensions.join("|") + ")$", "g");
this.extRe = new RegExp("^.*\\.(" + extensions + ")$", "g");
};
Mode.prototype.supportsFile = function(filename) {
return filename.match(this.extRe);
};
var modes = [
new Mode("c_cpp", "C/C++", ["c", "cpp", "cxx", "h", "hpp"]),
new Mode("clojure", "Clojure", ["clj"]),
new Mode("coffee", "CoffeeScript", ["coffee"]),
new Mode("coldfusion", "ColdFusion", ["cfm"]),
new Mode("csharp", "C#", ["cs"]),
new Mode("css", "CSS", ["css"]),
new Mode("golang", "Go", ["go"]),
new Mode("groovy", "Groovy", ["groovy"]),
new Mode("haxe", "haXe", ["hx"]),
new Mode("html", "HTML", ["html", "htm"]),
new Mode("java", "Java", ["java"]),
new Mode("diff", "Diff", ["diff", "patch"]),
new Mode("javascript", "JavaScript", ["js"]),
new Mode("json", "JSON", ["json"]),
new Mode("latex", "LaTeX", ["tex"]),
new Mode("less", "LESS", ["less"]),
new Mode("lua", "Lua", ["lua"]),
new Mode("liquid", "Liquid", ["liquid"]),
new Mode("markdown", "Markdown", ["md", "markdown"]),
new Mode("ocaml", "OCaml", ["ml", "mli"]),
new Mode("scad", "OpenSCAD", ["scad"]),
new Mode("perl", "Perl", ["pl", "pm"]),
new Mode("pgsql", "pgSQL", ["pgsql", "sql"]),
new Mode("php", "PHP", ["php"]),
new Mode("powershell", "Powershell", ["ps1"]),
new Mode("python", "Python", ["py"]),
new Mode("scala", "Scala", ["scala"]),
new Mode("scss", "SCSS", ["scss"]),
new Mode("ruby", "Ruby", ["rb"]),
new Mode("sql", "SQL", ["sql"]),
new Mode("svg", "SVG", ["svg"]),
new Mode("text", "Text", ["txt"]),
new Mode("textile", "Textile", ["textile"]),
new Mode("xml", "XML", ["xml"]),
new Mode("sh", "SH", ["sh"]),
new Mode("xquery", "XQuery", ["xq"]),
new Mode("yaml", "YAML", ["yaml"])
];
var modesByName = {
coffee: ["CoffeeScript" , "coffee|^Cakefile"],
coldfusion: ["ColdFusion" , "cfm"],
csharp: ["C#" , "cs"],
css: ["CSS" , "css"],
diff: ["Diff" , "diff|patch"],
golang: ["Go" , "go"],
groovy: ["Groovy" , "groovy"],
haxe: ["haXe" , "hx"],
html: ["HTML" , "htm|html|xhtml"],
c_cpp: ["C/C++" , "c|cc|cpp|cxx|h|hh|hpp"],
clojure: ["Clojure" , "clj"],
java: ["Java" , "java"],
javascript: ["JavaScript" , "js"],
json: ["JSON" , "json"],
latex: ["LaTeX" , "latex|tex|ltx|bib"],
less: ["LESS" , "less"],
liquid: ["Liquid" , "liquid"],
lua: ["Lua" , "lua"],
markdown: ["Markdown" , "md|markdown"],
ocaml: ["OCaml" , "ml|mli"],
perl: ["Perl" , "pl|pm"],
pgsql: ["pgSQL" , "pgsql"],
php: ["PHP" , "php|phtml"],
powershell: ["Powershell" , "ps1"],
python: ["Python" , "py"],
ruby: ["Ruby" , "ru|gemspec|rake|rb"],
scad: ["OpenSCAD" , "scad"],
scala: ["Scala" , "scala"],
scss: ["SCSS" , "scss|sass"],
sh: ["SH" , "sh|bash|bat"],
sql: ["SQL" , "sql"],
svg: ["SVG" , "svg"],
text: ["Text" , "txt"],
textile: ["Textile" , "textile"],
xml: ["XML" , "xml|rdf|rss|wsdl|xslt|atom|mathml|mml|xul|xbl"],
xquery: ["XQuery" , "xq"],
yaml: ["YAML" , "yaml"]
};
for (var name in modesByName) {
var mode = modesByName[name];
mode = new Mode(name, mode[0], mode[1])
modesByName[name] = mode;
modes.push(mode);
}
modesByName = {};
modes.forEach(function(m) {
modesByName[m.name] = m;
});
/*********** demo documents ***************************/
var fileCache = {};
@ -259,18 +262,6 @@ window.env = env;
window.editor = window.ace = env.editor;
env.editor.setAnimatedScroll(true);
var consoleHight = 20;
function onResize() {
var left = env.split.$container.offsetLeft;
var width = document.documentElement.clientWidth - left;
container.style.width = width + "px";
container.style.height = document.documentElement.clientHeight - consoleHight + "px";
env.split.resize();
consoleEl.style.width = width + "px";
cmdLine.resize()
}
var consoleEl = dom.createElement("div");
container.parentNode.appendChild(consoleEl);
consoleEl.style.position="fixed"
@ -331,9 +322,6 @@ cmdLine.commands.bindKeys({
cmdLine.commands.removeCommands(["find", "goToLine", "findAll", "replace", "replaceAll"])
window.onresize = onResize;
onResize();
/**
* This demonstrates how you can define commands and bind shortcuts to them.
*/
@ -368,6 +356,22 @@ var keybindings = {
/*********** manage layout ***************************/
var consoleHight = 20;
function onResize() {
var left = env.split.$container.offsetLeft;
var width = document.documentElement.clientWidth - left;
container.style.width = width + "px";
container.style.height = document.documentElement.clientHeight - consoleHight + "px";
env.split.resize();
consoleEl.style.width = width + "px";
cmdLine.resize()
}
window.onresize = onResize;
onResize();
/*********** options pane ***************************/
var docEl = document.getElementById("doc");
var modeEl = document.getElementById("mode");
@ -654,24 +658,22 @@ event.addListener(container, "drop", function(e) {
var file;
try {
file = e.dataTransfer.files[0];
if (window.FileReader) {
var reader = new FileReader();
reader.onload = function() {
var mode = getModeFromPath(file.name);
env.editor.session.doc.setValue(reader.result);
modeEl.value = mode.name;
env.editor.session.setMode(mode.mode);
env.editor.session.modeName = mode.name;
};
reader.readAsText(file);
}
return event.preventDefault(e);
} catch(err) {
return event.stopEvent();
return event.stopEvent(e);
}
if (window.FileReader) {
var reader = new FileReader();
reader.onload = function() {
var mode = getModeFromPath(file.name);
env.editor.session.doc.setValue(reader.result);
modeEl.value = mode.name;
env.editor.session.setMode(mode.mode);
env.editor.session.modeName = mode.name;
};
reader.readAsText(file);
}
return event.preventDefault(e);
});
// add multiple cursor support to editor

2
index.html
View file

@ -110,7 +110,7 @@
<h2>Take Ace for a spin!</h2>
<div class="divider"></div>
<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>
<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>
<h2>History</h2>
<div class="divider"></div>

18
kitchen-sink.html
View file

@ -13,9 +13,19 @@
commit %commit%
-->
<!--DEVEL-->
<link rel="stylesheet" href="demo/kitchen-sink/styles.css" type="text/css" media="screen" charset="utf-8">
<!--DEVEL-->
<!--PACKAGE
<link rel="stylesheet" href="kitchen-sink/styles.css" type="text/css" media="screen" charset="utf-8">
PACKAGE-->
</head>
<body>
<img id="logo" src="demo/kitchen-sink/logo.png">
<a href="http://ajaxorg.github.com/ace/" >
<img id="logo" src="demo/kitchen-sink/logo.png">
</a>
<table id="controls">
<tr>
<td>
@ -216,8 +226,7 @@
</div>
<div id="editor"></div>
<!-- DEVEL-->
<link rel="stylesheet" href="demo/kitchen-sink/styles.css" type="text/css" media="screen" charset="utf-8">
<!--DEVEL-->
<script type="text/javascript">
var require = {
baseUrl: window.location.protocol + "//" + window.location.host + window.location.pathname.split("/").slice(0, -1).join("/"),
@ -228,10 +237,9 @@
</script>
<script src="demo/kitchen-sink/require.js" data-main="demo/kitchen-sink/demo" type="text/javascript"></script>
<!--DEVEL -->
<!--DEVEL-->
<!--PACKAGE
<link rel="stylesheet" href="kitchen-sink/styles.css" type="text/css" media="screen" charset="utf-8">
<script src="src/ace.js" data-ace-base="src" type="text/javascript" charset="utf-8"></script>
<script src="src/keybinding-vim.js"></script>
<script src="src/keybinding-emacs.js"></script>