CodeMirror編輯器文本框Textarea代碼高亮插件，CodeMirror的簡單實用例子

時間 2019-11-19

標籤 codemirror 編輯器文本 textarea 代碼插件簡單實用例子简体版

原文原文鏈接

　　CodeMirror是一個用於編輯器文本框textarea代碼高亮javascript插件，爲各類編程語言實現關鍵字，函數，變量等代碼高亮顯示，豐富的api和可擴展功能以及多個主題樣式，能知足您各類項目的需求。javascript

　　最近項目中要求把獲得的後端json數據以下圖展現給客戶，還須要可編輯的功能，因而就用到了CodeMirror這款插件，通過初步的探索，發現它主題樣式很是靚麗，簡單美觀，效果圖以下：css

下面我就一步一步說明個人使用過程。html

　　1.首先須要下載codemirror插件，先建立文件夾，下載插件java

npm install codemirror

　　2.在文件夾中建立一個html文件，引入codemirror中須要的文件node

<!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>