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/n/310078.html

codemirrorjson详解

一、codemirrorjson概述

二、codemirrorjson格式化显示

三、codemirrorjson编辑、校验、格式化

四、codemirrorjson导出、API集成

相关推荐

发表回复