зеркало из https://github.com/mozilla/ace.git
Add link to Ace Bookmarklet Builder and add some notes on how to use the bookmarklet
This commit is contained in:
Julian Viereck
Fabian Jakobs
Родитель
e4d1d3fedc
Коммит
c23c5713e1
|
|
@ -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.
|
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
|
History
|
||||||
-------
|
-------
|
||||||
|
|
||||||
|
|
@ -49,19 +51,19 @@ The easiest version is simply:
|
||||||
var editor = ace.edit("editor");
|
var editor = ace.edit("editor");
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
To change the theme simply include the Theme's JavaScript file
|
To change the theme simply include the Theme's JavaScript file
|
||||||
|
|
||||||
<script src="src/theme-twilight.js" type="text/javascript" charset="utf-8"></script>
|
<script src="src/theme-twilight.js" type="text/javascript" charset="utf-8"></script>
|
||||||
|
|
||||||
and configure the editor to use the theme:
|
and configure the editor to use the theme:
|
||||||
|
|
||||||
editor.setTheme("ace/theme/twilight");
|
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
|
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>
|
<script src="src/mode-javascript.js" type="text/javascript" charset="utf-8"></script>
|
||||||
|
|
||||||
the mode can be used like this:
|
the mode can be used like this:
|
||||||
|
|
||||||
var JavaScriptMode = require("ace/mode/javascript").Mode;
|
var JavaScriptMode = require("ace/mode/javascript").Mode;
|
||||||
|
|
|
||||||
|
|
@ -7,6 +7,25 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<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">
|
<textarea id="textarea" style="width:300px; height:300px">
|
||||||
function foo() {
|
function foo() {
|
||||||
var bar = true;
|
var bar = true;
|
||||||
|
|
@ -14,7 +33,7 @@
|
||||||
</textarea><br>
|
</textarea><br>
|
||||||
SourceUrl: <input id="srcURL" value="http://ajaxorg.github.com/ace/build/textarea/src/"></input>
|
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>
|
<script>
|
||||||
function inject() {
|
function inject() {
|
||||||
|
|
@ -52,13 +71,11 @@ function inject() {
|
||||||
};
|
};
|
||||||
|
|
||||||
load.scripts = {};
|
load.scripts = {};
|
||||||
|
|
||||||
window.__ace_shadowed_load__ = load;
|
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 ace = window.__ace_shadowed__;
|
||||||
var Event = ace.require('pilot/event');
|
var Event = ace.require('pilot/event');
|
||||||
ace.options.mode = "javascript";
|
|
||||||
var areas = document.getElementsByTagName("textarea");
|
var areas = document.getElementsByTagName("textarea");
|
||||||
for (var i = 0; i < areas.length; i++) {
|
for (var i = 0; i < areas.length; i++) {
|
||||||
Event.addListener(areas[i], "click", function(e) {
|
Event.addListener(areas[i], "click", function(e) {
|
||||||
|
|
|
||||||
Загрузка…
Ссылка в новой задаче