CodeMirror是一個用於編輯器文本框textarea代碼高亮javascript插件，為各種編程語言實現關鍵字，函數，變量等代碼高亮顯示，豐富的api和可擴展功能以及多個主題樣式，能滿足您各種項目的需求。
最近項目中要求把得到的后端json數據如下圖展示給客戶，還需要可編輯的功能，於是就用到了CodeMirror這款插件，經過初步的探索，發現它主題樣式非常靚麗，簡單美觀，效果圖如下：
下面我就一步一步說明我的使用過程。
1.首先需要下載codemirror插件，先創建文件夾，下載插件
npm install codemirror
2.在文件夾中創建一個html文件，引入codemirror中需要的文件
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--不管你要引入什么主題配色都需要引入的css文件-->
<link rel="stylesheet" href="codemirror.css">
<!--下面的css文件就是不同主題配色的css文件-->
<link rel="stylesheet" href="node_modules/codemirror/theme/monokai.css">
<link rel="stylesheet" href="node_modules/codemirror/theme/3024-day.css">
<link rel="stylesheet" href="node_modules/codemirror/theme/3024-night.css">
<!--不管你需要引入什么樣式和主題都是必須引入的-->
<script src="node_modules/codemirror/lib/codemirror.js"></script>
<!--使用的是javascript樣式的編輯器--> <script src="node_modules/codemirror/mode/javascript/javascript.js"></script> </head> <style type="text/css"> .CodeMirror {border: 1px solid black; font-size:13px;border-radius: 5px} </style> <body> <h2>Theme Demo</h2>
<!--插件起效果的位置，必須是testarea元素--> <textarea id="code" name="code"> </textarea>
<!--下拉框用來換選主題配色的，當然主題配色非常多，這里只是隨便列舉幾個例子--> <p>Select a theme: <select onchange="selectTheme()" id=select> <option selected>default</option> <option>3024-day</option> <option>3024-night</option> </select> </p> <script> var editor = CodeMirror.fromTextArea(document.getElementById("code"), { lineNumbers: true,//是否顯示每一行的行數
readOnly：false，//只讀 styleActiveLine: true, matchBrackets: true });
//這個是假數據，假設是從后台拿到的，需要展示到頁面中 var obj ={ "message": "", "code": 200, "response": { "totalCount": 1, "results": [ { "status": "deployed", "login_port": 22, "role_info": null, "created": "2017-06-19 09:58:04", "login_user": "root", "hostname": "deploy-226", "login_ip": "172.24.6.226", "id": "1147edbde1494df696019fdb094be43d" } ], "pageSize": 5, "page": 1 }, "success": true } setTimeout(function(){//假設兩秒后才獲取到數據 editor.setValue(JSON.stringify(obj,null,4))//JSON.stringify()方法的第三個參數的目的就是保留格式的，如果沒有的話， },2000) //普通的JSON.stringify(obj)僅僅就是把對象轉字符串，並不輝保留空格和換行
//下拉框選擇的時候換主題配色 var input = document.getElementById("select"); function selectTheme() { var theme = input.options[input.selectedIndex].textContent;//獲取下拉框的內容 editor.setOption("theme", theme);//把內容設置為主題色， } </script> </body> </html>
3.介紹簡單的api
<1>editor.setValue(string)，為codemirror插件賦值，用來顯示到頁面中
<2>editor.getValue()，當你在頁面中編輯的時候，可以用這個方法來獲取到你編輯的內容
<3>onChange(instance,changeObj)，codeMirror文本被修改后觸發
<4>getLine(line)：獲取指定行的文本內容
<5>ineCount():統計編輯器內容行數
更多的api可以見官網http://codemirror.net/
4.效果如下圖：
可以下拉款更換配色主題。
我的實例的github源碼在此 https://github.com/jiangzhenfei/CodeMirror，可以克隆到本地，然后npm install下載依賴的包，吧index.html在瀏覽器打開就可以看到效果。