我多次尝试过如何做到这一点，不幸的是我不知道如何将 codemirror 库集成到 HTML 文件中。
我有一个 HTML 文件，并且下载了 codemirror。我还将 lib 文件夹包含在我的 html 目录中，但是当我在浏览器中看到它时，代码镜像编辑器尚未创建。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Web Editor</title>
<!-- Create a simple CodeMirror instance -->
<link rel="stylesheet" href="lib/codemirror.css">
<script src="lib/codemirror.js"></script>
<script>
var editor = CodeMirror.fromTextArea(myTextarea, {
lineNumbers: true
});
</script>
</head>
<body>
<table>
<tr>
<td>
<div class="tag">HTML (Body)</div>
<div id="html" class="content" contenteditable></div>
</td>
<td>
<div class="tag">CSS</div>
<div id="css" class="content" contenteditable></div>
</td>
</tr>
<tr>
<td>
<div class="tag">JavaScript</div>
<div id="js" class="content" contenteditable></div>
</td>
<td>
<div class="tag">Output</div>
<iframe id="output">Hello</iframe>
</td>
</tr>
</table>
</body>
</html>
如何创建示例代码镜像编辑器？ 谢谢你。
您应该首先在 codemirror 实例中定义一个
myTextareatextarea<textarea id="myCode"></textarea>
现在，像这样定义
myTextareavar myTextarea = document.getElementById("myCode");
因此，最终你的文件将如下所示，
<body>
<textarea id="myCode"></textarea>
<script type="text/javascript">
window.onload = function() {
var myTextarea = document.getElementById("myCode");
editor = CodeMirror.fromTextArea(myTextarea, {
lineNumbers: true
});
};
</script>
</body>
这是工作小提琴http://jsfiddle.net/dsaket/tqL7z213/1/。
此外，为了进一步查询，您应该查看codemirror提供的演示文件。
如果您打算使用 php 从 textarea 获取值，则可以使用 CodeMirror.fromTextArea 来使用 textarea ID。
为此，请拨打以下电话。 这个有效
<textarea id="myCode"></textarea>
CodeMirror.fromTextArea(document.getElementById("myCode"), {
lineNumbers: true,
tabSize: 2
});
如果您使用document.querySelector，则无法从 php POST 或 GET 方法获取值。这对于 ace editor 来说也是一样的。
<textarea id="myCode"></textarea>
CodeMirror(document.querySelector('#leafbridge-config-ui-custom-css'), {
lineNumbers: true,
tabSize: 2
});