| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129 |
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <title>CodeMirror: Script Compression</title>
- <link rel="stylesheet" type="text/css" href="css/docs.css"/>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
- <style type="text/css">
- .field {border: 1px solid black; padding: .4em;}
- button {border: 1px solid black; background-color: #eee;}
- </style>
- </head>
- <body>
- <div class="top underline" style="text-align: center">
- <h1 style="margin-bottom: 0;"><a href="index.html" style="text-decoration: none; color: black;">CodeMirror</a></h1>
- <h2 style="margin-top: 0; margin-bottom: .3em;">Script Compression</h2>
- </div>
- <p>The CodeMirror scripts, as distributed, are many, and full of
- comments. To optimize page loading, it is recommended to
- concatenate the scripts loaded in the CodeMirror frame, and
- compress them. This page may be useful if you intend to do this:
- it provides an interface go Google's <a
- href="http://closure-compiler.appspot.com/">Closure compiler</a>,
- allowing you to easily load in CodeMirror scripts.</p>
- <p>You will have to compress <code>codemirror.js</code>
- separately, since that will be loaded into the top-level page from
- which you use CodeMirror. Inside the frame, the
- <code>parserfile</code> and <code>basefiles</code> options control
- which files are loaded. If you combine the parser(s) you need with
- the basefiles, you can set <code>basefiles</code> to point at your
- compressed file, and leave <code>parserfiles</code> at
- <code>[]</code>.</p>
- <p>For example, you have a page that uses CodeMirror to edit some
- JavaScript code. You could save a minimized version of
- <code>codemirror.js</code> as <code>codemirror_min.js</code>, and
- include that (with a <code><script></code> tag) in your page.
- Next, you compress all the files under "In-frame base code", plus
- <code>tokenizejavascript.js</code> and
- <code>parsejavascript.js</code> into
- <code>codemirror_base.js</code>, and load the editor like
- this:</p>
- <pre class="code">CodeMirror.fromTextArea("mytextarea", {
- basefiles: ["js/codemirror_base.js"],
- lineNumbers: true
- });</pre>
- <p>Clicking the "Compress" buttons below will take you to a file
- containing the compressed code. Copy-paste this into your script
- file. ("Save as" for that page is broken on some browsers, so be
- careful).</p>
- <script type="text/javascript">
- function setVersion(ver) {
- var urlprefix = ver.options[ver.selectedIndex].value;
- console.log(urlprefix);
- var select = document.getElementById("files"), m;
- for (var optgr = select.firstChild; optgr; optgr = optgr.nextSibling)
- for (var opt = optgr.firstChild; opt; opt = opt.nextSibling) {
- if (opt.nodeName != "OPTION")
- continue;
- else if (m = opt.value.match(/^http:\/\/marijn.haverbeke.nl\/codemirror\/(.*)$/))
- opt.value = urlprefix + m[1];
- else if (m = opt.value.match(/http:\/\/marijn.haverbeke.nl\/git\/codemirror\?a=blob_plain;hb=[^;]+;f=(.*)$/))
- opt.value = urlprefix + m[1];
- }
- }
- function verify() {
- document.getElementById("output").value="warnings";
- document.getElementById("form").submit();
- document.getElementById("output").value="compiled_code";
- }
- </script>
- <form id="form" action="http://closure-compiler.appspot.com/compile" method="post" id="form">
- <p>Version: <select id="version" onchange="setVersion(this);" class="field" style="padding: 1px">
- <option value="http://marijn.haverbeke.nl/codemirror/" selected>Development head</option>
- <option value="http://marijn.haverbeke.nl/git/codemirror?a=blob_plain;hb=v0.8;f=">v0.8</option>
- <option value="http://marijn.haverbeke.nl/git/codemirror?a=blob_plain;hb=v0.7;f=">v0.7</option>
- <option value="http://marijn.haverbeke.nl/git/codemirror?a=blob_plain;hb=v0.67;f=">v0.67</option>
- <option value="http://marijn.haverbeke.nl/git/codemirror?a=blob_plain;hb=v0.66;f=">v0.66</option>
- </select></p>
- <p><input type="hidden" value="compiled_code" name="output_info" id="output"/>
- <select multiple="multiple" name="code_url" style="width: 40em;" class="field" id="files">
- <optgroup label="CodeMirror Library">
- <option value="http://marijn.haverbeke.nl/codemirror/js/codemirror.js">codemirror.js</option>
- </optgroup>
- <optgroup label="In-frame base files">
- <option value="http://marijn.haverbeke.nl/codemirror/js/util.js">util.js</option>
- <option value="http://marijn.haverbeke.nl/codemirror/js/stringstream.js">stringstream.js</option>
- <option value="http://marijn.haverbeke.nl/codemirror/js/select.js">select.js</option>
- <option value="http://marijn.haverbeke.nl/codemirror/js/undo.js">undo.js</option>
- <option value="http://marijn.haverbeke.nl/codemirror/js/editor.js">editor.js</option>
- <option value="http://marijn.haverbeke.nl/codemirror/js/tokenize.js">tokenize.js</option>
- </optgroup>
- <optgroup label="Parsers">
- <option value="http://marijn.haverbeke.nl/codemirror/js/tokenizejavascript.js">tokenizejavascript.js</option>
- <option value="http://marijn.haverbeke.nl/codemirror/js/parsejavascript.js">parsejavascript.js</option>
- <option value="http://marijn.haverbeke.nl/codemirror/js/parsexml.js">parsexml.js</option>
- <option value="http://marijn.haverbeke.nl/codemirror/js/parsecss.js">parsecss.js</option>
- <option value="http://marijn.haverbeke.nl/codemirror/js/parsesparql.js">parsesparql.js</option>
- <option value="http://marijn.haverbeke.nl/codemirror/js/parsehtmlmixed.js">parsehtmlmixed.js</option>
- <option value="http://marijn.haverbeke.nl/codemirror/js/parsedummy.js">parsedummy.js</option>
- </optgroup>
- <optgroup label="Contributed parsers">
- <option value="http://marijn.haverbeke.nl/codemirror/contrib/lua/js/parselua.js">parselua.js</option>
- <option value="http://marijn.haverbeke.nl/codemirror/contrib/python/js/parsepython.js">parsepython.js</option>
- <option value="http://marijn.haverbeke.nl/codemirror/contrib/php/js/tokenizephp.js">tokenizephp.js</option>
- <option value="http://marijn.haverbeke.nl/codemirror/contrib/php/js/parsephp.js">parsephp.js</option>
- <option value="http://marijn.haverbeke.nl/codemirror/contrib/php/js/parsephphtmlmixed.js">parsephphtmlmixed.js</option>
- <option value="http://marijn.haverbeke.nl/codemirror/contrib/csharp/js/tokenizecsharp.js">tokenizecsharp.js</option>
- <option value="http://marijn.haverbeke.nl/codemirror/contrib/csharp/js/parsecsharp.js">parsecsharp.js</option>
- <option value="http://marijn.haverbeke.nl/codemirror/contrib/sql/js/parsesql.js">parsesql.js</option>
- <option value="http://marijn.haverbeke.nl/codemirror/contrib/plsql/js/parseplsql.js">parseplsql.js</option>
- <option value="http://svn.exoplatform.org/projects/gwt/trunk/exo.gwtframework.editor/src/main/resources/org/exoplatform/gwtframework/editor/public/codemirror/js/tokenizegroovy.js">tokenizegroovy.js</option>
- <option value="http://svn.exoplatform.org/projects/gwt/trunk/exo.gwtframework.editor/src/main/resources/org/exoplatform/gwtframework/editor/public/codemirror/js/parsegroovy.js">parsegroovy.js</option>
- </optgroup>
- </select></p>
- <p><button type="submit">Compress!</button> <button type="button" onclick="verify();">Check for errors</button></p>
- <p>Custom code to add to the compressed file:<textarea name="js_code" style="width: 100%; height: 15em;" class="field"></textarea></p>
- </form>
- </body>
- </html>
|
