codemirror5/demo/requirejs.html at master · codemirror/codemirror5 · GitHub

Name: codemirror5/demo/requirejs.html at master · codemirror/codemirror5 · GitHub
Rating: 4.5 (9717 reviews)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!doctype html>

<head>
<title>CodeMirror: HTML completion demo</title>
<metacharset="utf-8"/>
<linkrel=stylesheethref="../doc/docs.css">

<linkrel="stylesheet" href="../lib/codemirror.css">
<linkrel="stylesheet" href="../addon/hint/show-hint.css">
<scriptsrc="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.min.js"></script>
<style>
 .CodeMirror {border-top:1px solid #888; border-bottom:1px solid #888;}
</style>
</head>

<body>
<divid=nav>
<ahref="https://codemirror.net/5"><h1>CodeMirror</h1><imgid=logosrc="../doc/logo.png"></a>
<ul>
<li><ahref="../index.html">Home</a>
<li><ahref="../doc/manual.html">Manual</a>
<li><ahref="https://github.com/codemirror/codemirror5">Code</a>
</ul>
<ul>
<li><aclass=activehref="#">HTML completion</a>
</ul>
</div>

<article>
<h2>RequireJS module loading demo</h2>

<p>This demo does the same thing as
 the <ahref="html5complete.html">HTML5 completion demo</a>, but
 loads its dependencies
 with <ahref="http://requirejs.org/">Require.js</a>, rather than
 explicitly. Press <strong>ctrl-space</strong> to activate
 completion.</p>

<divid="code"></div>

<buttonid="markdown">Dynamically load Markdown mode</button>

<script>
require.config({
packages: [{
name: "codemirror",
location: "../",
main: "lib/codemirror"
}]
});
require(["codemirror","codemirror/mode/htmlmixed/htmlmixed",
"codemirror/addon/hint/show-hint","codemirror/addon/hint/html-hint",
"codemirror/addon/mode/loadmode"],function(CodeMirror){
editor=CodeMirror(document.getElementById("code"),{
mode: "text/html",
extraKeys: {"Ctrl-Space": "autocomplete"},
value: document.documentElement.innerHTML
});

CodeMirror.modeURL="codemirror/mode/%N/%N";
document.getElementById("markdown").addEventListener("click",function(){
CodeMirror.requireMode("markdown",function(){
editor.replaceRange("This is **Markdown**.\n\n",{line: 0,ch: 0});
editor.setOption("mode","markdown");
});
});
});
</script>
</article>
</body>