CodeMirror 通过AJAX方式加载 示例代码
时间: 2024-01-03 07:05:35 浏览: 30
下面是一个使用 CodeMirror 和 AJAX 加载示例代码的例子:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CodeMirror AJAX 示例</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.0/codemirror.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.0/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.62.0/mode/javascript/javascript.min.js"></script>
</head>
<body>
<div id="code"></div>
<script>
var xhr = new XMLHttpRequest();
xhr.open('GET', 'example.js', true);
xhr.onload = function() {
if (xhr.status == 200) {
var editor = CodeMirror(document.getElementById('code'), {
value: xhr.responseText,
mode: 'javascript'
});
}
};
xhr.send();
</script>
</body>
</html>
```
在这个例子中,我们使用 AJAX 方式获取名为 `example.js` 的文件,并把它加载到 CodeMirror 编辑器中。当 AJAX 请求成功并得到返回时,我们使用 CodeMirror 的 `document.getElementById('code')` 方法获取一个具有 id 为 `code` 的 div 元素,并把 AJAX 返回的代码赋值给它,然后使用 CodeMirror 的 `CodeMirror()` 方法生成一个新的编辑器实例。`mode: 'javascript'` 表示代码的语言是 JavaScript。