如何设置CodeMirror
时间：2020-02-23 14:45:52 来源:igfitidea点击:
在本教程中，我们将学习设置CodeMirror，它是Web的多函数文本编辑器。
前提条件
- HTML，CSS，JavaScript和jQuery的基本知识
- 任意一种文本编辑器(例如Sublime Text，Atom，Brackets或者Eclipse等IDE)
- Web浏览器，例如Chrome或者Firefox
- CodeMirror文件
- jQuery文件
下载
CodeMirror：http：//codemirror.net/
jQuery的：https://jquery.com/
可选的：
SublimeText：https://www.sublimetext.com/
Atom：https：//atom.io/
Brackets：http：//brackets.io/
eclipse：https://eclipse.org/
步骤
下载CodeMirror文件。
下载jQuery文件。
创建一个项目文件夹并将其命名为codemirror
在codemirror项目文件夹中，创建子文件夹，并将其命名为js，css和plugin。
js文件夹将保存所有javascript文件。
css文件夹将保存样式表。
插件文件夹将包含codemirror文件。
将您先前下载的codemirror.zip文件复制到plugin文件夹中并解压缩。
提取文件后，您可以将文件夹重命名为" codemirror"并删除codemirror.zip文件。
现在，复制您下载到js文件夹中的jquery文件。
您可以将此文件重命名为jquery.min.js
现在，在codemirror项目文件夹中创建index.html页面，并包含以下文件。
现在，在js文件夹中创建一个default.js文件，并将其包含在index.html文件中。
您的index.html文件应如下所示。
<!DOCTYPE html> <html> <head> <title>CodeMirror</title> <link rel="stylesheet" type="text/css" href="plugin/codemirror/lib/codemirror.css"> </head> <body> <textarea class="codemirror-textarea"></textarea> <!-- javascript --> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="plugin/codemirror/lib/codemirror.js"></script> <script type="text/javascript" src="js/default.js"></script> </body> </html>
现在打开default.js文件并编写以下代码。
$(document).ready(function(){
//code here...
var code = $(".codemirror-textarea")[0];
var editor = CodeMirror.fromTextArea(code, {
lineNumbers : true
});
});
至此，您将启动并运行CodeMirror！
![Windows：R1Soft"错误服务器[11] reset()：数据库磁盘镜像格式错误(11)"](/res/img/loading.gif)