bookmarklet.html 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6. <link href="style.css" rel="stylesheet" type="text/css">
  7. <title>Ace Bookmarklet Builder</title>
  8. </head>
  9. <body>
  10. <div id="wrapper">
  11. <div class="content" style="width: 950px">
  12. <div class="column1" style="margin-top: 47px">
  13. <textarea id="textarea" style="width:300px; height:300px">
  14. /**
  15. * This is Ace injected using a bookmarklet.
  16. */
  17. function foo() {
  18. var bar = true;
  19. }</textarea><br>
  20. SourceUrl: <br>
  21. <input id="srcURL" style="width:300px" value="http://ajaxorg.github.com/ace-builds/src-noconflict"></input><br>
  22. <button id="buBuild">Build Link</button> <br> <a href="#"></a>
  23. <a href="https://github.com/ajaxorg/ace/">
  24. <div class="fork_on_github" ></div>
  25. </a>
  26. </div>
  27. <div class="column2">
  28. <h1>Ace Bookmarklet Builder</h1>
  29. <p id="first">
  30. <strong>WARNING:</strong> Currently, this is only supported in non IE browsers.
  31. </p>
  32. <h2>How to use it:</h2>
  33. <ul>
  34. <li>Select the options as you want them to be by default.</li>
  35. <li>Enter the "SourceUrl". This has to be the URL pointing to build/textarea/src/ (you can leave the default to server the scripts from GitHub).</li>
  36. <li>Click the "Build Link" button to generate your custom Ace Bookmarklet.</li>
  37. <li>Drag the generated link to your toolbar or store it somewhere else.</li>
  38. <li>Go to a page with a textarea element and click the bookmarklet - wait a little bit till the files are loaded.</li>
  39. <li>Click three times on the textarea you want to replace - Ace will replace it.</li>
  40. <li>To change settings, just click the red icon in the bottom right corner.</li>
  41. </ul>
  42. </div>
  43. </div>
  44. </div>
  45. <script>
  46. function inject(options, callback) {
  47. var baseUrl = options.baseUrl || "../../src-noconflict";
  48. var load = function(path, callback) {
  49. var head = document.getElementsByTagName('head')[0];
  50. var s = document.createElement('script');
  51. s.src = baseUrl + "/" + path;
  52. head.appendChild(s);
  53. s.onload = s.onreadystatechange = function(_, isAbort) {
  54. if (isAbort || !s.readyState || s.readyState == "loaded" || s.readyState == "complete") {
  55. s = s.onload = s.onreadystatechange = null;
  56. if (!isAbort)
  57. callback();
  58. }
  59. };
  60. };
  61. load("ace.js", function() {
  62. ace.config.loadModule("ace/ext/textarea", function() {
  63. var event = ace.require("ace/lib/event");
  64. var areas = document.getElementsByTagName("textarea");
  65. for (var i = 0; i < areas.length; i++) {
  66. event.addListener(areas[i], "click", function(e) {
  67. if (e.detail == 3) {
  68. ace.transformTextarea(e.target, options.ace);
  69. }
  70. });
  71. }
  72. callback && callback();
  73. });
  74. });
  75. }
  76. // Call the inject function to load the ace files.
  77. var textAce;
  78. inject({}, function () {
  79. // Transform the textarea on the page into an ace editor.
  80. var t = document.querySelector("textarea");
  81. textAce = ace.require("ace/ext/textarea").transformTextarea(t);
  82. setTimeout(function(){textAce.setDisplaySettings(true)});
  83. });
  84. document.getElementById("buBuild").onclick = function() {
  85. var injectSrc = inject.toString().split("\n").join("");
  86. injectSrc = injectSrc.replace(/\s+/g, " ");
  87. var options = textAce.getOptions();
  88. options.baseUrl = document.getElementById("srcURL").value;
  89. var a = document.querySelector("a");
  90. a.href = "javascript:(" + injectSrc + ")(" + JSON.stringify(options) + ")";
  91. a.innerHTML = "Ace Bookmarklet Link";
  92. }
  93. </script>
  94. </body>
  95. </html>