openrat-cms

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

requirejs.html (2322B)

      1 <!doctype html>
      2 
      3 <head>
      4   <title>CodeMirror: HTML completion demo</title>
      5   <meta charset="utf-8"/>
      6   <link rel=stylesheet href="../doc/docs.css">
      7 
      8   <link rel="stylesheet" href="../lib/codemirror.css">
      9   <link rel="stylesheet" href="../addon/hint/show-hint.css">
     10   <script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.min.js"></script>
     11   <style type="text/css">
     12     .CodeMirror {border-top: 1px solid #888; border-bottom: 1px solid #888;}
     13   </style>
     14 </head>
     15 
     16 <body>
     17   <div id=nav>
     18     <a href="http://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
     19     <ul>
     20       <li><a href="../index.html">Home</a>
     21       <li><a href="../doc/manual.html">Manual</a>
     22       <li><a href="https://github.com/codemirror/codemirror">Code</a>
     23     </ul>
     24     <ul>
     25       <li><a class=active href="#">HTML completion</a>
     26     </ul>
     27   </div>
     28 
     29   <article>
     30     <h2>RequireJS module loading demo</h2>
     31 
     32     <p>This demo does the same thing as
     33     the <a href="html5complete.html">HTML5 completion demo</a>, but
     34     loads its dependencies
     35     with <a href="http://requirejs.org/">Require.js</a>, rather than
     36     explicitly. Press <strong>ctrl-space</strong> to activate
     37     completion.</p>
     38 
     39     <div id="code"></div>
     40 
     41     <button id="markdown">Dynamically load Markdown mode</button>
     42 
     43     <script type="text/javascript">
     44       require.config({
     45         packages: [{
     46           name: "codemirror",
     47           location: "../",
     48           main: "lib/codemirror"
     49         }]
     50       });
     51       require(["codemirror", "codemirror/mode/htmlmixed/htmlmixed",
     52                "codemirror/addon/hint/show-hint", "codemirror/addon/hint/html-hint",
     53                "codemirror/addon/mode/loadmode"], function(CodeMirror) {
     54         editor = CodeMirror(document.getElementById("code"), {
     55           mode: "text/html",
     56           extraKeys: {"Ctrl-Space": "autocomplete"},
     57           value: document.documentElement.innerHTML
     58         });
     59 
     60         CodeMirror.modeURL = "codemirror/mode/%N/%N";
     61         document.getElementById("markdown").addEventListener("click", function() {
     62           CodeMirror.requireMode("markdown", function() {
     63             editor.replaceRange("This is **Markdown**.\n\n", {line: 0, ch: 0});
     64             editor.setOption("mode", "markdown");
     65           });
     66         });
     67       });
     68     </script>
     69   </article>
     70 </body>