Browse files

Add link to Ace Bookmarklet Builder and add some notes on how to use …

…the bookmarklet
  • Loading branch information...
1 parent e4d1d3f commit c23c5713e103f553a76b332642c5aea860bb4970 @jviereck jviereck committed with fjakobs Feb 15, 2011
Showing with 27 additions and 8 deletions.
  1. +6 −4 build/
  2. +21 −4 build_support/editor_textarea.html
@@ -22,6 +22,8 @@ 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][].
@@ -49,19 +51,19 @@ The easiest version is simply:
var editor = ace.edit("editor");
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:
By default the editor only supports plain text mode. However all other language modes 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 be used like this:
var JavaScriptMode = require("ace/mode/javascript").Mode;
@@ -7,14 +7,33 @@
+<h1>Ace Bookmarklet Builder</h1>
+WARNING: Currently, this is only fully supported in non IE browsers.
+How to use it:
+ <li>Select the options below as you want them to be by default.</li>
+ <li>Enter the "SourceUrl" where you placed the source data which you find under build/textarea/src (you can also leave the default to server the scripts from GitHub).</li>
+ <li>Click the "Build Link" button to generate your custom Ace Bookmarklet.</li>
+ <li>Drag the generated link to your toolbar or store it somewhere else.</li>
+ <li>Go to a page with an textarea element and click the bookmarklet - wait a little bit till the files are loaded.</li>
+ <li>Click 3 times on the textarea you want to replace - Ace will replace it.</li>
+ <li>To change settings, just click the red icon in the bottom right corner.</li>
<textarea id="textarea" style="width:300px; height:300px">
function foo() {
var bar = true;
SourceUrl: <input id="srcURL" value=""></input>
-<button id="buBuild">Build link</button> <br> <a href="#"></a>
+<button id="buBuild">Build Link</button> <br> <a href="#"></a>
function inject() {
@@ -52,13 +71,11 @@
load.scripts = {};
window.__ace_shadowed_load__ = load;
- load('ace-uncompressed.js', 'text!ace/css/editor.css', function() {
+ load('ace.js', 'text!ace/css/editor.css', function() {
var ace = window.__ace_shadowed__;
var Event = ace.require('pilot/event');
- ace.options.mode = "javascript";
var areas = document.getElementsByTagName("textarea");
for (var i = 0; i < areas.length; i++) {
Event.addListener(areas[i], "click", function(e) {

0 comments on commit c23c571

Please sign in to comment.