openrat-cms

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README

loadmode.html (2224B)

      1 <!doctype html>
      2 
      3 <title>CodeMirror: Lazy Mode Loading Demo</title>
      4 <meta charset="utf-8"/>
      5 <link rel=stylesheet href="../doc/docs.css">
      6 
      7 <link rel="stylesheet" href="../lib/codemirror.css">
      8 <script src="../lib/codemirror.js"></script>
      9 <script src="../addon/mode/loadmode.js"></script>
     10 <script src="../mode/meta.js"></script>
     11 <style type="text/css">
     12       .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
     13     </style>
     14 <div id=nav>
     15   <a href="http://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
     16 
     17   <ul>
     18     <li><a href="../index.html">Home</a>
     19     <li><a href="../doc/manual.html">Manual</a>
     20     <li><a href="https://github.com/codemirror/codemirror">Code</a>
     21   </ul>
     22   <ul>
     23     <li><a class=active href="#">Lazy Mode Loading</a>
     24   </ul>
     25 </div>
     26 
     27 <article>
     28 <h2>Lazy Mode Loading Demo</h2>
     29 <p style="color: gray">Current mode: <span id="modeinfo">text/plain</span></p>
     30 <form><textarea id="code" name="code">This is the editor.
     31 // It starts out in plain text mode,
     32 #  use the control below to load and apply a mode
     33   "you'll see the highlighting of" this text /*change*/.
     34 </textarea></form>
     35 <p>Filename, mime, or mode name: <input type=text value=foo.js id=mode> <button type=button onclick="change()">change mode</button></p>
     36 
     37     <script>
     38 CodeMirror.modeURL = "../mode/%N/%N.js";
     39 var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
     40   lineNumbers: true
     41 });
     42 var modeInput = document.getElementById("mode");
     43 CodeMirror.on(modeInput, "keypress", function(e) {
     44   if (e.keyCode == 13) change();
     45 });
     46 function change() {
     47   var val = modeInput.value, m, mode, spec;
     48   if (m = /.+\.([^.]+)$/.exec(val)) {
     49     var info = CodeMirror.findModeByExtension(m[1]);
     50     if (info) {
     51       mode = info.mode;
     52       spec = info.mime;
     53     }
     54   } else if (/\//.test(val)) {
     55     var info = CodeMirror.findModeByMIME(val);
     56     if (info) {
     57       mode = info.mode;
     58       spec = val;
     59     }
     60   } else {
     61     mode = spec = val;
     62   }
     63   if (mode) {
     64     editor.setOption("mode", spec);
     65     CodeMirror.autoLoadMode(editor, mode);
     66     document.getElementById("modeinfo").textContent = spec;
     67   } else {
     68     alert("Could not find a mode corresponding to " + val);
     69   }
     70 }
     71 </script>
     72   </article>