CodeMirror在线代码编辑器使用

CodeMirror官网地址为:https://codemirror.net/

CodeMirror作为一款代码编辑器，其应用场景主要是在线网站写代码。
如现在的leetcode、洛谷、code-vs等都使用不同的代码编辑器。

代码示例:

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
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>测试</title>
		<link rel="stylesheet" type="text/css" href="../fonticon/css/codemirror.css"/>
	    <link rel="stylesheet" href="../fonticon/css/codemirror/theme/midnight.css">
	</head>
	<body>
		<textarea name="code" id="editorArea" style="display:none"></textarea>
		<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous">
		</script>
		<script src="../js/codemirror.js"></script>
		<script>
			
			var editor = CodeMirror.fromTextArea(document.getElementById("editorArea"), {
				lineNumbers: true,        //是否在编辑器左侧显示行号
				matchBrackets: true,      // 括号匹配
				mode: "text/x-c++src",    //C++
				indentUnit:4,             // 缩进单位为4
				indentWithTabs: true,     //
				smartIndent: true,        //自动缩进，设置是否根据上下文自动缩进（和上一行相同的缩进量）。默认为true。
				styleActiveLine: true, 	  // 当前行背景高亮
		        theme: 'midnight',         // 编辑器主题
		
			});
	
			editor.setSize('600px','400px'); //设置代码框大小
			

		</script>
	</body>
</html>

效果图:

关于如何给代码框中赋值和取值，可使用如下方法:

1
2
3
4
editor.setValue(""); //赋值


editor.getValue(); //取值

上述只是一个简单的示例，更多知识还请参考官方网站对应的文档。

本文标题:CodeMirror在线代码编辑器使用

文章作者:youcong

发布时间:2019-07-19, 15:10:29

最后更新:2019-08-16, 16:22:33

原始链接:http://developers-youcong.github.io/2019/07/19/CodeMirror在线代码编辑器使用/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

文章目录