-
Notifications
You must be signed in to change notification settings - Fork 12
/
Copy pathcode2.html
107 lines (92 loc) · 3.86 KB
/
code2.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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html lang="en">
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<!--{# <script type="text/javascript" src="/static/js/jquery-1.4.4/jquery.min.js"></script>#}-->
<script type="text/javascript" src="chosen.jquery.min.js"></script>
<!--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>
<textarea name="res" id="res"></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, //代码折叠
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "CodeMirror-lint-markers"],
foldGutter: true, // 启用行槽中的代码折叠
autofocus: true, // 自动聚焦
matchBrackets: true, //括号匹配
//readOnly: true, //只读
styleActiveLine: true, // 显示选中行的样式
// theme: "leetcode", // 主题
});
editor.setSize('800px', '400px'); //设置代码框的长宽
// 设置初始文本，这个选项也可以在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);
$.ajax({
url:'http://localhost:5000/run',
type:'post',
data:{
'code':value,
},
success:function (returnData) {
console.log('hshs'),
console.log(returnData),
document.getElementById('res').value=returnData
},
error:function (res) {
console.log('失败')
}
})
}
</script>
</body>
</html>