-
Notifications
You must be signed in to change notification settings - Fork 12
/
Copy pathcode.html
79 lines (70 loc) · 2.98 KB
/
code.html
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
71
72
73
74
75
76
77
78
79
<!DOCTYPE html>
<html lang="en">
<!--begin code mirror -->
<!--下面两个是使用Code Mirror必须引入的-->
<link rel="stylesheet" href="codemirror-5.31.0/lib/codemirror.css"/>
<script src="codemirror-5.31.0/lib/codemirror.js"></script>
<!--Java代码高亮必须引入-->
<script src="codemirror-5.31.0/clike.js"></script>
<!--groovy代码高亮-->
<script src="codemirror-5.31.0/mode/groovy/groovy.js"></script>
<!--引入css文件，用以支持主题-->
<link rel="stylesheet" href="codemirror-5.31.0/theme/dracula.css"/>
<!--支持代码折叠-->
<link rel="stylesheet" href="codemirror-5.31.0/addon/fold/foldgutter.css"/>
<script src="codemirror-5.31.0/addon/fold/foldcode.js"></script>
<script src="codemirror-5.31.0/addon/fold/foldgutter.js"></script>
<script src="codemirror-5.31.0/addon/fold/brace-fold.js"></script>
<script src="codemirror-5.31.0/addon/fold/comment-fold.js"></script>
<!--括号匹配-->
<script src="codemirror-5.31.0/addon/edit/matchbrackets.js"></script>
<!--end Code Mirror -->
<head>
<meta charset="utf-8"/>
<title>代码框</title>
</head>
<body>
<!-- begin code -->
<textarea class="form-control" id="code" name="code"></textarea>
<!-- end code-->
<button id="test">click</button>
</div>
<script>
var version = "# version: Python3\n\n";
var codeAreaTip = "# please edit your code here:\n";
var codeStart = "# code start\n\n";
var codeEnd = "# code end\n\n";
var codeTip = "'''\nThis function is the entry of this program and\nit must be return your answer of current question.\n'''\n";
var code = "def solution():\n\tpass";
var initValue = version + codeAreaTip + codeStart + codeEnd + codeTip + code;
//根据DOM元素的id构造出一个编辑器
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
mode: "text/groovy", //实现groovy代码高亮
mode: "text/x-java", //实现Java代码高亮
lineNumbers: true, //显示行号
theme: "dracula", //设置主题
lineWrapping: true, //代码折叠
foldGutter: true,
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
matchBrackets: true, //括号匹配
//readOnly: true, //只读
});
editor.setSize('800px', '950px'); //设置代码框的长宽
// 设置初始文本，这个选项也可以在fromTextArea中配置
editor.setOption("value", initValue);
// // 编辑器按键监听
// editor.on("keypress", function() {
// // 显示智能提示
// editor.showHint(); // 注意，注释了CodeMirror库中show-hint.js第131行的代码（阻止了代码补全，同时提供智能提示）
// });
// editor.setValue(""); //先代码框的值清空
// editor.setValue(obj.scriptCode); //给代码框赋值
// editor.setOption("readOnly", true);
var test = document.getElementById("test");
test.onclick = function() {
var value = editor.getValue();
console.log(value);
}
</script>
</body>
</html>