⼿把⼿教你搭建⽹页代码编辑器
CodeMirror
是⼀个可以镶嵌到 Web 页⾯中代码编辑器组件。它的核⼼代码库仅仅提供了编辑器功能，没有提供像是 ⾃动补全, 语法纠错 等IDE功能。CodeMirror 提供了丰富的api，让你可以轻易的拓展想要的功能。
使⽤⽅法
浏览器
在浏览器中使⽤的话，你需要引⽤编辑器核⼼ js 和 css ⽂件，每个编辑器主题对应⼀个css⽂件，你需要引⽤你所指定的编辑器主题对应的css。每个编辑器语⾔对应⼀个js⽂件，需引⼊你需要编辑的语⾔对应的js⽂件。
如下，我们创建⼀个编辑 javascript 代码的编辑器：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="unpkg/codemirror@5.40.0/lib/codemirror.css">
<link rel="stylesheet" href="unpkg/codemirror@5.40.0/theme/material.css">
<title>Document</title>
<style>
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
textarea {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<textarea id="text">
var myTextArea = ElementById('text');
var editor = CodeMirror.fromTextArea(myTextArea, {
lineNumbers: true,
mode: 'javascript',
theme: 'material'
});
<('change', () => {
console.Value());
});
</textarea>
</body>
<script src="unpkg/codemirror@5.40.0/lib/codemirror.js"></script>
<script src="unpkg/codemirror@5.40.0/mode/javascript/javascript.js"></script>
<script>
var myTextArea = ElementById('text');
var editor = CodeMirror.fromTextArea(myTextArea, {
lineNumbers: true,
mode: 'javascript',
theme: 'material'
});
<('change', () => {
console.Value());
});
</script>
</html>
上边的代码复制到html⽂件即可运⾏。从上边的代码可以看到，我们使⽤ CodeMirror.fromTextArea() 创建了⼀个编辑器，当然还有其他的⽅法来创建。
从textarea创建，会⾃动替换textarea并且获取textarea的值，填充到编辑器。
<textarea id="text">console.log('codemirror!');</textarea>
<script>
const myTextArea = ElementById('textarea');
CodeMirror.fromTextArea(myTextArea, {
lineNumbers: true,
mode: 'javascript'
});
</script>
指定⽗级元素创建编辑器
如下代码，CodeMirror 会创建⼀个编辑器，插⼊到 body 节点下。
<body></body>
<script>
CodeMirror(document.body, {
value: 'console.log("codemirror")',
mode: 'javascript'
});
</script>
模块打包⽤法
我们可以通过 Webpack 来打包使⽤ codemirror。
先通过 npm 下载codemirror：
npm i codemirror
引⽤ codemirror 所需要的 js 和 css ⽂件：
const CodeMirror = require('codemirror'); // 编辑器主逻辑⽂件
require('codemirror/mode/javascript/javascript.js'); // 编辑器⽀持 javascript
require('codemirror/lib/codemirror.css'); // 编辑器主样式⽂件
require('codemirror/theme/material.css'); // 编辑器主题样式⽂件
CodeMirror(document.body, {
value: 'console.log("codemirror")',
mode: 'javascript',
theme: 'material'
});
简单常⽤的api
在我们使⽤ CodeMirror 搭建编辑器之后，可能会⽤到下⾯⼀些简单的api。详细的api列表在这⾥：. getValue()
获取编辑器当前的值。
const editor = CodeMirror(document.body);
function getEditorValue() {
Value();
}
setValue(value: String)
改变编辑器的值。
const editor = CodeMirror(document.body);
function setEditorValue(value) {
editor.setValue(value);
}
on(eventName: String, handler: Function)
编辑器时间监听。
⽀持丰富的event类型，完整的event 类型你可以在这⾥查阅：。⽐如，我们可以监听编辑器内容改变，当编辑器内容改变时，输出编辑器的内容：
const editor = CodeMirror(document.body);
<('change', (codemirrorIns, codemirrorObj) => {
console.Value());
});
IDE拓展
CodeMirror ⽀持丰富的IDE拓展，这些拓展放在 codemirror/addon⽂件夹下。我们可以通过引⼊该⽂件夹下的IDE⽂件，从⽽让我们编辑器的功能更加丰富。完整的IDE拓展列表在这⾥：.
如下⽰例展⽰了开启javascript语法纠错：(直接将代码复制到html⽂件即可运⾏)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="unpkg/codemirror@5.40.0/lib/codemirror.css" />
<link rel="stylesheet" href="unpkg/codemirror@5.40.0/theme/material.css" />
<link rel="stylesheet" href="unpkg/codemirror@5.40.0/addon/lint/lint.css" />
<title>Document</title>
<style>
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
textarea {
width: 100%;
height: 100%;
}
vim编辑器怎么用</style>
</head>
<body>
<textarea id="text">
const a =
</textarea>
</body>
<script src="unpkg/jshint@2.9.6/dist/jshint.js"></script>
<script src="unpkg/codemirror@5.40.0/lib/codemirror.js"></script>
<script src="unpkg/codemirror@5.40.0/mode/javascript/javascript.js"></script>
<script src="unpkg/codemirror@5.40.0/addon/lint/lint.js"></script>
<script src="unpkg/codemirror@5.40.0/addon/lint/javascript-lint.js"></script>
<script>
var myTextArea = ElementById('text');
var editor = CodeMirror.fromTextArea(myTextArea, {
lineNumbers: true,
mode: 'javascript',
theme: 'material',
lint: true
});
<('change', () => {
console.Value());
});
</script>
</html>
当然，CodeMirror 的功能⼗分丰富，⽐如 按键映射、主题定制、Vim模式等，更深⼊的使⽤可以查阅 。本章完
我的Github:
我的博客:

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。