CodeMirror使用笔记

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

首先，看下最终的效果

引入基本的需要资源

创建编辑器

		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键，自动补全代码，自动补全效果如图

完整代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" session="false"%>






















	

		 
	
	click
	

参考文件

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