首页 最近更新
Search
开源排行榜

jsoneditor下载 - 一款基于网页的JSON编辑器

6813 2020-02-29 JavaScript Apache-2.0 官方网站

一款基于网页的JSON编辑器，可以编辑、格式化、校验JSON格式是否正确。

jsoneditor下载

v8.3.0.zip(v8.5.3) 下载

v8.4.1.zip(v8.5.3) 下载

v8.2.0.zip(v8.5.3) 下载

v8.4.0.zip(v8.5.3) 下载

v8.5.1.zip(v8.5.3) 下载

v8.5.3.zip(v8.5.3) 下载

v8.5.0.zip(v8.5.3) 下载

v8.5.2.zip(v8.5.3) 下载

v8.1.1.zip(v8.5.3) 下载

v8.1.2.zip(v8.5.3) 下载

v6.8.0.zip(v6.8.0) 下载

v8.6.1.zip(v8.6.1) 下载

jsoneditor趋势

jsoneditor介绍

一款基于web的JSON编辑器工具，可用于查看、编辑、格式化和验证JSON。支持多种模式，如树形编辑器、代码编辑器和纯文本编辑器。该编辑器可以作为你系统中的一个组件使用。该库可以作为CommonJS模块、AMD模块或常规javascript文件加载。

支持浏览器: Chrome, Firefox, Safari, Opera, Edge, Internet Explorer 11.

json editor  
code editor

特点

JSONEditor具有以下模式和功能

Tree mode（树形模式）

  • 更改，添加，移动，删除和重复字段和值

  • 对数组和对象进行排序

  • 使用JMESPath查询转换JSON

  • 代码着色

  • 颜色选择器

  • 树形模式下搜索时对代码和文本高亮

  • 支持撤销操作

  • JSON模式验证（由ajv支持）

Code mode（代码模式）

  • 代码高亮（由ajv支持）

  • JSON格式校验

  • JSON格式化和压缩

  • JSON修复

  • JSON模式验证（由ajv支持）

Text mode（文本模式）

  • JSON格式化和压缩

  • JSON修复

  • JSON模式验证（由ajv支持）

Preview mode（预览模式）

  • 最大支持 500 MiB JSON

  • 使用JMESPath查询转换JSON 

  • 格式化并压缩JSON。

  • 修复JSON

  • JSON格式验证（由ajv支持）

文档

安装

通过npm安装:

npm install jsoneditor

注意，在Internet Explorer 11中使用JSONEditor，须加载polyfill 

使用

<!DOCTYPE HTML>
<html>
<head>
    <!-- when using the mode "code", it's important to specify charset utf-8 -->
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">

    <link href="jsoneditor/dist/jsoneditor.min.css" rel="stylesheet" type="text/css">
    <script src="jsoneditor/dist/jsoneditor.min.js"></script>
</head>
<body>
    <div id="jsoneditor" style="width: 400px; height: 400px;"></div>

    <script>
        // create the editor
        const container = document.getElementById("jsoneditor")
        const options = {}
        const editor = new JSONEditor(container, options)

        // set json
        const initialJson = {
            "Array": [1, 2, 3],
            "Boolean": true,
            "Null": null,
            "Number": 123,
            "Object": {"a": "b", "c": "d"},
            "String": "Hello www.itxst.com"
        }
        editor.set(initialJson)

        // get json
        const updatedJson = editor.get()
    </script>
</body>
</html>