loadmode.html 2.2 KB

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