codemirrorjson詳解

一、codemirrorjson概述

codemirrorjson是一個基於CodeMirror和JSONLint的JSON編輯器，可為JSON文檔提供格式化、編輯、校驗、代碼高亮等功能。它支持在瀏覽器端進行JSON編輯，提供快速、準確的JSON開發體驗。codemirrorjson的主要特點有：

1. 支持自定義主題配色和語法高亮；

2. 支持JSONLint的實時校驗機制，可以快速定位JSON語法錯誤；

3. 支持多種編輯模式，如普通模式、只讀模式、全屏模式等；

4. 支持將JSON文檔導出為HTML、XML、CSV、Markdown等格式，方便進行數據的交換和共享；

5. 支持通過API將JSON數據與其他應用進行集成。

二、codemirrorjson格式化顯示

1. codemirrorjson基本使用示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>codemirrorjson示例</title>
    <link href="codemirror.css" rel="stylesheet">
    <link href="jsonlint.css" rel="stylesheet">
</head>
<body>
    <textarea id="json"></textarea>
    <script src="codemirror.js"></script>
    <script src="jsonlint.js"></script>
    <script src="jsoneditor.js"></script>
    <script>
        var jsonEditor = CodeMirror.fromTextArea(document.getElementById("json"), {
            mode: "application/json",
            lint: true,
            lineNumbers: true,
        });
    </script>
</body>
</html>

2. codemirrorjson自定義主題配色：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>codemirrorjson主題示例</title>
    <link href="codemirror.css" rel="stylesheet">
    <link href="jsonlint.css" rel="stylesheet">
    <link href="monokai.css" rel="stylesheet">
</head>
<body>
    <textarea id="json"></textarea>
    <script src="codemirror.js"></script>
    <script src="jsonlint.js"></script>
    <script src="jsoneditor.js"></script>
    <script>
        var jsonEditor = CodeMirror.fromTextArea(document.getElementById("json"), {
            mode: "application/json",
            lint: true,
            lineNumbers: true,
            theme: "monokai"
        });
    </script>
</body>
</html>

三、codemirrorjson編輯、校驗、格式化

1. codemirrorjson實現JSON編輯：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>codemirrorjson編輯示例</title>
    <link href="codemirror.css" rel="stylesheet">
    <link href="jsonlint.css" rel="stylesheet">
</head>
<body>
    <textarea id="json">{"name":"Tom","age":20}</textarea>
    <script src="codemirror.js"></script>
    <script src="jsonlint.js"></script>
    <script src="jsoneditor.js"></script>
    <script>
        var jsonEditor = CodeMirror.fromTextArea(document.getElementById("json"), {
            mode: "application/json",
            lint: true,
            lineNumbers: true,
        });

        jsonEditor.setValue('{"name":"Jerry","age":22}');
    </script>
</body>
</html>

2. codemirrorjson實現JSON的格式化：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>codemirrorjson格式化示例</title>
    <link href="codemirror.css" rel="stylesheet">
    <link href="jsonlint.css" rel="stylesheet">
</head>
<body>
    <textarea id="json">{"name":"Tom","age":20}</textarea>
    <button onclick="formatJson()">格式化</button>
    <script src="codemirror.js"></script>
    <script src="jsonlint.js"></script>
    <script src="jsoneditor.js"></script>
    <script>
        var jsonEditor = CodeMirror.fromTextArea(document.getElementById("json"), {
            mode: "application/json",
            lint: true,
            lineNumbers: true,
        });

        function formatJson() {
            var value = jsonEditor.getValue();
            jsonEditor.setValue(JSON.stringify(JSON.parse(value), null, "\t"));
        }
    </script>
</body>
</html>

3. codemirrorjson實現JSON的校驗：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>codemirrorjson校驗示例</title>
    <link href="codemirror.css" rel="stylesheet">
    <link href="jsonlint.css" rel="stylesheet">
</head>
<body>
    <textarea id="json">{"name":"Tom","age":20</textarea>
    <p id="result"></p>
    <button onclick="validateJson()">校驗</button>
    <script src="codemirror.js"></script>
    <script src="jsonlint.js"></script>
    <script src="jsoneditor.js"></script>
    <script>
        var jsonEditor = CodeMirror.fromTextArea(document.getElementById("json"), {
            mode: "application/json",
            lint: true,
            lineNumbers: true,
        });

        function validateJson() {
            var value = jsonEditor.getValue();
            try {
                JSON.parse(value);
                document.getElementById('result').innerHTML = 'JSON校驗通過。';
            } catch (e) {
                document.getElementById('result').innerHTML = 'JSON校驗失敗：' + e.message;
            }
        }
    </script>
</body>
</html>

四、codemirrorjson導出、API集成

1. codemirrorjson支持導出JSON數據為CSV格式：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>codemirrorjson導出示例</title>
    <link href="codemirror.css" rel="stylesheet">
    <link href="jsonlint.css" rel="stylesheet">
</head>
<body>
    <textarea id="json">{"name":"Tom","age":20}</textarea>
    <button onclick="exportJson()">導出</button>
    <script src="codemirror.js"></script>
    <script src="jsonlint.js"></script>
    <script src="jsoneditor.js"></script>
    <script>
        var jsonEditor = CodeMirror.fromTextArea(document.getElementById("json"), {
            mode: "application/json",
            lint: true,
            lineNumbers: true,
        });

        function exportJson() {
            var value = jsonEditor.getValue();
            var csv = JSONtoCSV(value);
            var blob = new Blob([csv], {type: "text/csv;charset=utf-8"});
            saveAs(blob, "data.csv");
        }

        function JSONtoCSV(json) {
            var array = typeof json != 'object' ? JSON.parse(json) : json;
            var str = '';
            var line = '';
            var head = array[0];
            for (var index in head) {
                var value = index + "";
                line += '"' + value.replace(/"/g, '""') + '",';
            }
            line = line.slice(0, -1);
            str += line + '\r\n';
            for (var i = 0; i < array.length; i++) {
                var line = '';
                for (var index in array[i]) {
                    var value = array[i][index] + "";
                    line += '"' + value.replace(/"/g, '""') + '",';
                }
                line = line.slice(0, -1);
                str += line + '\r\n';
            }
            return str;
        }
    </script>
</body>
</html>

2. codemirrorjson能通過API將JSON數據與其他應用進行集成：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>codemirrorjson API示例</title>
    <link href="codemirror.css" rel="stylesheet">
    <link href="jsonlint.css" rel="stylesheet">
</head>
<body>
    <textarea id="json">{"name":"Tom","age":20}</textarea>
    <button onclick="sendData()">發送數據</button>
    <script src="codemirror.js"></script>
    <script src="jsonlint.js"></script>
    <script src="jsoneditor.js"></script>
    <script>
        var jsonEditor = CodeMirror.fromTextArea(document.getElementById("json"), {
            mode: "application/json",
            lint: true,
            lineNumbers: true,
        });

        function sendData() {
            var value = jsonEditor.getValue();
            fetch('/api/submit', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(value)
            }).then(res => {
                console.log(res);
            });
        }
    </script>
</body>
</html>

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/310078.html

codemirrorjson詳解

一、codemirrorjson概述

二、codemirrorjson格式化顯示

三、codemirrorjson編輯、校驗、格式化

四、codemirrorjson導出、API集成

相關推薦

發表回復