CodeMirror的版本: 5.65.0
CodeMirror
是一个web端代码编辑器组件,提供了基本的编辑器功能。通过其提供的插件或者第三方依赖,可以实现既定语言的关键词高亮显示、自动完成提示、设定标记、错误提醒等功能。
生成基本编辑器
模式为javascript模式-可以高亮显示关键字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>base-use</title>
<!-- 核心库文件的引入 codemirror.js codemirror.css -->
<link href="./lib/codemirror.css" rel="stylesheet">
<script src="./lib/codemirror.js"></script>
<!-- javascript语言模式引入 -->
<script src="./mode/javascript/javascript.js"></script>
<style>
.CodeMirror {
width: 300px;
height: 200px;
border: 1px solid #dcdcdc;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="editor1"></div>
<div id="editor2"></div>
<textarea name="name" id="editor3" cols="30" rows="10">function abc() { }</textarea>
</body>
<script>
var editorBox1 = document.getElementById('editor1');
var editorBox2 = document.getElementById('editor2');
var editorBox3 = document.getElementById('editor3');
var option = {
value: 'function test(){}',
mode: 'javascript',
lineNumbers: true,
};
// 基本使用-此时会把生成的编辑器放在editor元素内
var editor1 = CodeMirror(editorBox1, option);
// 如果想指定位置存放生成的编辑器,可以把第一个参数设置为函数
var editor2 = CodeMirror(elt => {
// 利用生成的编辑器替换掉editorBox2
editorBox2.parentNode.replaceChild(elt, editorBox2);
}, option)
// 还可以使用 CodeMirror 提供的 fromTextarea 方法
// 此时 Dom元素需要为 textarea 否则会报错
// 此时生成的编辑器默认值为 html 中 textarea的值 function abc() {}
var editor3 = CodeMirror.fromTextArea(editorBox3, option)
</script>
</html>
自动完成提示
利用内置的javascript自动补全依赖
<!-- 引入show-hint 和javascript-hint -->
<link rel="stylesheet" href="./addon/hint/show-hint.css">
<script src="./addon/hint/show-hint.js"></script>
<script src="./addon/hint/javascript-hint.js"></script>
// 以editor1为例
var editorBox1 = document.getElementById('editor1');
var option = {
value: 'function test(){}',
mode: 'javascript',
lineNumbers: true,
// 增加自动完成的配置
hintOptions: {
completeSingle: false,
alignWithWord: false,
// javascript-hint提供的自动完成的方法。此处可以自定义
hint: CodeMirror.hint.javascript
},
};
var editor1 = CodeMirror(editorBox1, option);
editor1.on('keypress', (instance) => {
// 在键盘事件的时候触发showHint显示自动完成提示框
instance.showHint();
// hintOptions配置也可以在此时进行设置
// instance.showHint({
// completeSingle: false,
// alignWithWord: false,
// hint: CodeMirror.hint.javascript
// });
})