CodeMirror使用笔记

「爱情、让人受尽委屈。」 2023-06-20 06:43 33阅读 0赞

最近因工作需要，在项目中使用了[CodeMirror][]代码编辑器，以下是使用笔记。

首先，看下最终的效果  
![在这里插入图片描述][20191209105911310.png]

### 引入基本的需要资源 ###

### 创建编辑器 ###

var editor = CodeMirror.fromTextArea(document.getElementById('sql'), {
    			mode : 'sql',
    			indentWithTabs : true,
    			lineNumbers : true,
    			smartIndent : true,
    			theme : 'dracula',
    			matchBrackets : true,
    			line : true,
    			lineWiseCopyCut : true,
    			readOnly : false,
    			showCursorWhenSelecting : true,
    			extraKeys : {
    				"Alt" : "autocomplete"
    			},
    			styleSelectedText : true
    		});

在我们的实际使用中，我们用到了下面几个场景

*  ### 设置编辑器字体样式 ###

.CodeMirror {
    	border: 1px solid black;
    	font-size: 20px;
    	font-family: Aruak, monospace;
    	height: 200px;
    }

*  ### 编辑器内容选择拷贝复制 ###

> 样式

.CodeMirror-selected {
    	background-color: blue !important
    }
    
    .CodeMirror-selectedtext {
    	color: white
    }

> 配置选项

lineWiseCopyCut : true,
    			readOnly : false,
    			showCursorWhenSelecting : true,
    			styleSelectedText : true

> 需要的JavaScript文件

其中，`lineWiseCopyCut`表示未选择时，复制鼠标所在的整行或者多行。

*  ### 编辑器主题 ###

> 配置选项中指定喜欢的主题，注意不要忘了引入对应的资源文件

theme : 'dracula',

*  ### 显示行号 ###

lineNumbers : true,

*  ### 自动补全 ###

extraKeys : {
    				"Alt" : "autocomplete"
    			},

按`Alt`键，自动补全代码，自动补全效果如图

![在这里插入图片描述][20191209110141714.png]

### 完整代码 ###

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <%@ page language="java" contentType="text/html; charset=UTF-8"
    	pageEncoding="UTF-8" session="false"%>
    
    <html>
    <head>
    <title>编辑器</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <script
    	src="<%=request.getContextPath()%>/resources/js/codemirror/codemirror.js"
    	type="text/javascript"></script>
    <script
    	src="<%=request.getContextPath()%>/resources/js/codemirror/sql.js"
    	type="text/javascript"></script>
    <script
    	src="<%=request.getContextPath()%>/resources/js/codemirror/show-hint.js"
    	type="text/javascript"></script>
    <script
    	src="<%=request.getContextPath()%>/resources/js/codemirror/sql-hint.js"
    	type="text/javascript"></script>
    <script
    	src="<%=request.getContextPath()%>/resources/js/codemirror/foldcode.js"
    	type="text/javascript"></script>
    <script
    	src="<%=request.getContextPath()%>/resources/js/codemirror/indent-fold.js"
    	type="text/javascript"></script>
    <script
    	src="<%=request.getContextPath()%>/resources/js/codemirror/selection-pointer.js"
    	type="text/javascript"></script>
    <script
    	src="<%=request.getContextPath()%>/resources/js/codemirror/mark-selection.js"
    	type="text/javascript"></script>
    <script
    	src="<%=request.getContextPath()%>/resources/js/codemirror/active-line.js"
    	type="text/javascript"></script>
    
    <link rel="stylesheet"
    	href="<%=request.getContextPath()%>/resources/css/codemirror/codemirror.css" />
    <link rel="stylesheet"
    	href="<%=request.getContextPath()%>/resources/css/codemirror/dracula.css" />
    <link rel="stylesheet"
    	href="<%=request.getContextPath()%>/resources/css/codemirror/show-hint.css" />
    <link rel="stylesheet"
    	href="<%=request.getContextPath()%>/resources/css/codemirror/foldgutter.css" />
    <style>
    .CodeMirror {
    	border: 1px solid black;
    	font-size: 20px;
    	font-family: Aruak, monospace;
    	height: 200px;
    }
    
    .CodeMirror-selected {
    	background-color: blue !important
    }
    
    .CodeMirror-selectedtext {
    	color: white
    }
    </style>
    </head>
    <body>
    	<form>
    		<textarea id="sql" name="editor"> </textarea>
    	</form>
    	<button id="test" onclick="javascript:t_query();"
    		style="display: none;">click</button>
    	<script type="text/javascript">
    		var editor = CodeMirror.fromTextArea(document.getElementById('sql'), {
    			mode : 'sql',
    			indentWithTabs : true,
    			lineNumbers : true,
    			smartIndent : true,
    			theme : 'dracula',
    			matchBrackets : true,
    			line : true,
    			lineWiseCopyCut : true,
    			readOnly : false,
    			showCursorWhenSelecting : true,
    			extraKeys : {
    				"Alt" : "autocomplete"
    			},
    			styleSelectedText : true
    		});
    
    		function t_query() {
    			console.log(editor.getValue());
    			alert(editor.getValue());
    		}
    	</script>
    
    </body>
    </html>

#### 参考文件 ####

*  https://codemirror.net/doc/manual.html
 *  https://codemirror.net/demo/markselection.html

[CodeMirror]: https://codemirror.net/
[20191209105911310.png]: https://img-blog.csdnimg.cn/20191209105911310.png
[20191209110141714.png]: https://img-blog.csdnimg.cn/20191209110141714.png