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

This commit is contained in:
Julian Viereck 2011-02-16 01:19:30 +08:00 коммит произвёл Fabian Jakobs
Родитель e4d1d3fedc
Коммит c23c5713e1
2 изменённых файлов: 27 добавлений и 8 удалений

Просмотреть файл

@ -22,6 +22,8 @@ Take Ace for a spin!
Check out the Ace live [demo](http://ajaxorg.github.com/ace/build/editor.html) or get a [Cloud9 IDE account](http://run.cloud9ide.com) 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
-------
@ -49,19 +51,19 @@ The easiest version is simply:
var editor = ace.edit("editor");
};
</script>
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:
editor.setTheme("ace/theme/twilight");
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,6 +7,25 @@
</head>
<body>
<h1>Ace Bookmarklet Builder</h1>
<p>
WARNING: Currently, this is only fully supported in non IE browsers.
</p>
<p>
How to use it:
<ul>
<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>
</ul>
</p>
<textarea id="textarea" style="width:300px; height:300px">
function foo() {
var bar = true;
@ -14,7 +33,7 @@
</textarea><br>
SourceUrl: <input id="srcURL" value="http://ajaxorg.github.com/ace/build/textarea/src/"></input>
<button id="buBuild">Build link</button> <br> <a href="#"></a>
<button id="buBuild">Build Link</button> <br> <a href="#"></a>
<script>
function inject() {
@ -52,13 +71,11 @@ function inject() {
};
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) {