最近因工作需要，在項目中使用了CodeMirror代碼編輯器，以下是使用筆記。
首先，看下最終的效果
引入基本的需要資源
<script
src="<%=request.getContextPath()%>/resources/js/codemirror/codemirror.js"
type="text/javascript"></script>
<link rel="stylesheet"
href="<%=request.getContextPath()%>/resources/css/codemirror/codemirror.css" />
創建編輯器
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文件
<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>
其中，lineWiseCopyCut表示未選擇時，複製鼠標所在的整行或者多行。
配置選項中指定喜歡的主題，注意不要忘了引入對應的資源文件
theme : 'dracula',
lineNumbers : true,
extraKeys : {
"Alt" : "autocomplete"
},
按Alt鍵，自動補全代碼，自動補全效果如圖
完整代碼
<!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