1.什么是Code Mirror最近做一个项目需要在网页上实现一个代码编辑器，支持语法高亮、自动缩进、智能提示等功能。发现Code Mirror刚好满足所有需求。Code Mirror是由js写的一款插件，其功能非常强大,用来实现网页端代码编辑器非常方便。如果想看效果图，可移步到 ...
1.什么是Code Mirror
最近做一个项目需要在网页上实现一个代码编辑器，支持语法高亮、自动缩进、智能提示等功能。发现Code Mirror刚好满足所有需求。Code Mirror是由js写的一款插件，其功能非常强大,用来实现网页端代码编辑器非常方便。如果想看效果图，可移步到这里----CodeOnline，这是我做的一个小项目，其中代码编辑器的就是用Code Mirror实现的。
2.使用Code Mirror
下面我将演示如何使用Code Mirror搭建一个简易的代码编辑器，并对其常用配置简要介绍。
首先要到Code Mirror官网下载此插件，然后在网页中引入即可。如下代码即实现了一个可以高亮显示Java代码的编辑器：
1 <!-- 2 最简单的CodeMirror编辑器 3 --> 4 5 <!DOCTYPE 6 html> 7 8 <html> 9 10 <!--下面两个是使用Code Mirror必须引入的-->11 <link rel="stylesheet" href="codemirror-5.12/lib/codemirror.css">12 <script src='/images/loading.gif' data-original="codemirror-5.12/lib/codemirror.js"></script>13 14 <!--Java代码高亮必须引入-->15 <script src='/images/loading.gif' data-original="codemirror-5.12/clike.js"></script>16 17 <head>18 <title>CodeMirrorTest</title>19 </head>20 <body>21 <textarea id="code"></textarea>22 </body>23 <script type="text/javascript">24 //根据DOM元素的id构造出一个编辑器25 var editor=CodeMirror.fromTextArea(document.getElementById("code"),{26 mode:"text/x-java" //实现Java代码高亮27 });28 </script>29 </html>如要显示行号，只需在构造editor时加上
lineNumbers:true
即
var editor=CodeMirror.fromTextArea(document.getElementById("code"),{ mode:"text/x-java", //实现Java代码高亮 lineNumbers:true });而后在构造editor时加入参数
theme:"seti"
完整代码如下：
1 <!DOCTYPE html> 2 <html> 3 <link rel="stylesheet" href="codemirror-5.12/lib/codemirror.css"> 4 <script src='/images/loading.gif' data-original="codemirror-5.12/lib/codemirror.js"></script> 5 <script src='/images/loading.gif' data-original="codemirror-5.12/clike.js"></script> 6 7 <!--引入css文件，用以支持主题--> 8 <link rel="stylesheet" href="codemirror-5.12/theme/seti.css"> 9 <head>10 <title>CodeMirror Test</title>11 </head>12 <body>13 <textarea id="code"></textarea>14 </body>15 <script type="text/javascript">16 var editor=CodeMirror.fromTextArea(document.getElementById("code"),{17 mode:"text/x-java",18 lineNumbers:true,19 theme:"seti"20 });21 </script>22 </html>最后各种其他功能的实现方法与之类似，稍微注意的是需要引入的文件不同，我将实现各个功能所需的文件均写在了如下代码中：
1 <!DOCTYPE html> 2 <html> 3 <link rel="stylesheet" href="codemirror-5.12/lib/codemirror.css"> 4 <script src='/images/loading.gif' data-original="codemirror-5.12/lib/codemirror.js"></script> 5 <script src='/images/loading.gif' data-original="codemirror-5.12/clike.js"></script> 6 7 <!--引入css文件，用以支持主题--> 8 <link rel="stylesheet" href="codemirror-5.12/theme/eclipse.css"> 9 <link rel="stylesheet" href="codemirror-5.12/theme/seti.css">10 <link rel="stylesheet" href="codemirror-5.12/theme/dracula.css">11 12 <!--引入js，绑定Vim-->13 <link rel="stylesheet" href="codemirror-5.12/addon/dialog/dialog.css">14 <script src='/images/loading.gif' data-original="codemirror-5.12/keymap/vim.js"></script>15 <script src='/images/loading.gif' data-original="codemirror-5.12/addon/search/searchcursor.js"></script>16 <!--改善vim输入命令时的样式-->17 <script src='/images/loading.gif' data-original="codemirror-5.12/addon/dialog/dialog.js"></script>18 19 <!--支持代码折叠-->20 <link rel="stylesheet" href="codemirror-5.12/addon/fold/foldgutter.css"/>21 <script src='/images/loading.gif' data-original="codemirror-5.12/addon/fold/foldcode.js"></script>22 <script src='/images/loading.gif' data-original="codemirror-5.12/addon/fold/foldgutter.js"></script>23 <script src='/images/loading.gif' data-original="codemirror-5.12/addon/fold/brace-fold.js"></script>24 <script src='/images/loading.gif' data-original="codemirror-5.12/addon/fold/comment-fold.js"></script>25 26 <!--全屏模式-->27 <link rel="stylesheet" href="codemirror-5.12/addon/display/fullscreen.css">28 <script src='/images/loading.gif' data-original="codemirror-5.12/addon/display/fullscreen.js"></script>29 30 <!--括号匹配-->31 <script src='/images/loading.gif' data-original="codemirror-5.12/addon/edit/matchbrackets.js"></script>32 33 <!--自动补全-->34 <link rel="stylesheet" href="codemirror-5.12/addon/hint/show-hint.css">35 <script src='/images/loading.gif' data-original="codemirror-5.12/addon/hint/show-hint.js"></script>36 <script src='/images/loading.gif' data-original="codemirror-5.12/addon/hint/anyword-hint.js"></script>37 38 <head>39 <title>CodeMirror Test</title>40 </head>41 42 <body>43 <textarea id="code"></textarea>44 </body>45 <script type="text/javascript">46 var editor=CodeMirror.fromTextArea(document.getElementById("code"),{47 //Java高亮显示48 mode:"text/x-java",49 50 //显示行号51 lineNumbers:true,52 53 //设置主题54 theme:"seti",55 56 //绑定Vim57 keyMap:"vim",58 59 //代码折叠60 lineWrapping:true,61 foldGutter: true,62 gutters:["CodeMirror-linenumbers", "CodeMirror-foldgutter"],63 64 //全屏模式65 fullScreen:true,66 67 //括号匹配68 matchBrackets:true,69 70 智能提示 71 extraKeys:{"Ctrl-Space":"autocomplete"}//ctrl-space唤起智能提示72 });73 </script>74 </html>其他说明：
- 在构造editor时相关的属性大多数都可以动态的指定。如设置显示行号可以不在构造editor时指出，只需构造出editor之后，调用
editor.setOption("lineNumbers",true)即可，更改主题也类似的用editor.setOption("theme","seti")即可，非常方便。 - 可以用
editor.getOption("属性名")来获取editor某属性的值，在本例中editor.getOption("theme")将返回"seti" - 无法用js的DOM操作获取编辑器中的值，但可以用
editor.getValeu()
获得其中的值，editor.setValue("value")来设置其中的值 - 可以自定义编辑器的大小，只需设置如下样式即可：
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com
原标题：在线代码编辑器CodeMirror简介
关键词：
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
