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
|
<!doctype html>
<html>
<head>
<title>CodeMirror: Close-Tag Demo</title>
<link rel="stylesheet" href="../lib/codemirror.css">
<script src="../lib/codemirror.js"></script>
<script src="../lib/util/closetag.js"></script>
<script src="../mode/xml/xml.js"></script>
<script src="../mode/javascript/javascript.js"></script>
<script src="../mode/css/css.js"></script>
<script src="../mode/htmlmixed/htmlmixed.js"></script>
<link rel="stylesheet" href="../doc/docs.css">
<style type="text/css">
.CodeMirror {border-top: 1px solid #eee; border-bottom: 1px solid #eee;}
</style>
</head>
<body>
<h1>Close-Tag Demo</h1>
<ul>
<li>Type an html tag. When you type '>' or '/', the tag will auto-close/complete. Block-level tags will indent.</li>
<li>There are options for disabling tag closing or customizing the list of tags to indent.</li>
<li>Works with "text/html" (based on htmlmixed.js or xml.js) mode.</li>
<li>View source for key binding details.</li>
</p>
<form><textarea id="code" name="code"></textarea></form>
<script type="text/javascript">
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
mode: 'text/html',
//closeTagEnabled: false, // Set this option to disable tag closing behavior without having to remove the key bindings.
//closeTagIndent: false, // Pass false or an array of tag names to override the default indentation behavior.
extraKeys: {
"'>'": function(cm) { cm.closeTag(cm, '>'); },
"'/'": function(cm) { cm.closeTag(cm, '/'); }
},
/*
// extraKeys is the easier way to go, but if you need native key event processing, this should work too.
onKeyEvent: function(cm, e) {
if (e.type == 'keydown') {
var c = e.keyCode || e.which;
if (c == 190 || c == 191) {
try {
cm.closeTag(cm, c == 190 ? '>' : '/');
e.stop();
return true;
} catch (e) {
if (e != CodeMirror.Pass) throw e;
}
}
}
return false;
},
*/
wordWrap: true
});
</script>
</body>
</html>
|
