文章目录
  1. 1. 介绍
  2. 2. 入口
  3. 3. 安装
  4. 4. 用法
    1. 4.1. 实例
  5. 5. Load
    1. 5.1. Detailed error messages
    2. 5.2. Code Editor
  6. 6. API
    1. 6.1. JSONEditor
      1. 6.1.1. 构造函数
      2. 6.1.2. 方法
    2. 6.2. JSON parsing and stringification
      1. 6.2.1. JSON.stringify 函数
  7. 7. 绑定事件

最近做的一个web应用需要用户编辑并提交json格式的数据,如果使用html中的textarea来作为输入框,编辑json格式数据会非常痛苦,出错率也会大幅提高。后来同事介绍了一个JSON编辑器–Json Editor,可以很好的满足我们项目的需要。

介绍

JSON Editor是一个基于Web的工具。用于查看,编辑和格式化JSON。有多种modes,比如:a tree editor, a code editor, and a plain text editor.

JSON Editor可以用作我们web应用的一个组件。类库可以当做CommonJS模块、AMD模块或者常规JS文件加载。

支持的浏览器: Chrome, Firefox, Safari, Opera, Internet Explorer 9+.

入口

  1. Web app:http://jsoneditoronline.org/
  2. Chrome app:https://chrome.google.com/webstore/detail/json-editor/lhkmoheomjbkfloacpgllgjcamhihfaj
  3. source:https://github.com/josdejong/jsoneditor

安装

with npm:

npm install jsoneditor

with bower:

bower install jsoneditor

download:

http://jsoneditoronline.org/downloads/

用法

实例

<!DOCTYPE HTML>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="jsoneditor/jsoneditor.min.css">
    <script type="text/javascript" src="jsoneditor/jsoneditor-min.js"></script>

    <!-- ace editor -->
    <script type="text/javascript" src="../asset/ace/ace.js"></script>

    <!-- json lint -->
    <script type="text/javascript" src="../asset/jsonlint/jsonlint.js"></script>

</head>
<body>
    <div id="jsoneditor" style="width: 400px; height: 400px;"></div>

    <script type="text/javascript" >
        var container = document.getElementById("jsoneditor");

        var options = {
            mode: 'tree',
            modes: ['code', 'form', 'text', 'tree', 'view'], // allowed modes
            error: function (err) {
              alert(err.toString());
            }
        };

        // set json
        var json = {
            "Array": [1, 2, 3],
            "Boolean": true,
            "Null": null,
            "Number": 123,
            "Object": {"a": "b", "c": "d"},
            "String": "Hello World"
        };

        // create the editor
        var editor = new JSONEditor(container, options, json);
    </script>
</body>
</html>

Load

为了在我们的web应用中实现JSONEditor,我们需要载入css和js文件。

<link rel="stylesheet" type="text/css" href="jsoneditor/jsoneditor.min.css">
<script type="text/javascript" src="jsoneditor/jsoneditor.min.js"></script>

Detailed error messages

可以选择使用jsonlint获取更多详细的错误信息:

<script type="text/javascript" src="jsoneditor/asset/jsonlint/jsonlint.js"></script>

Code Editor

上面提到支持多种modes,而其中的code mode比较特别,需要依赖于Ace editor, JSON Editor comes with a custom built version of Ace containing the ace modules ace.js, ext-searchbox.js, mode-json.js, theme-textmate.js, and a custom theme theme-jsoneditor.js

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

<script type="text/javascript" src="jsoneditor/asset/ace/ace.js"></script>

除了载入ace.js之外,我们还需要在js代码中设置mode,就像上面给出的实例中所示。

API

JSONEditor

构造函数

JSONEditor(container [, options] [, json])

方法

  1. JSONEditor.collapseAll()

    Collapse all fields. Only applicable for mode ‘tree’, ‘view’, and ‘form’.

  2. JSONEditor.expandAll()

    Expand all fields. Only applicable for mode ‘tree’, ‘view’, and ‘form’.

  3. JSONEditor.set(json)

    Set JSON data.

  4. JSONEditor.setMode(mode)

    Switch mode. Mode code requires the Ace editor.

    可选参数:tree, view, form, code, text.

  5. JSONEditor.setName(name)

    Set a field name for the root node.

  6. JSONEditor.setText(jsonString)

    Set text data in the formatter.

  7. JSONEditor.get()

    Get JSON data.

  8. JSONEditor.getName()

    Retrieve the current field name of the root node.

  9. JSONEditor.getText()

    Get JSON data as string.

JSON parsing and stringification

一般解析JSON数据,可以使用浏览器内置的JSON parser。

从一个JSON对象创建一个格式化字符串:

var formattedString = JSON.stringify(json, null, 2);

从一个JSON对象创建一个压缩字符串:

var compactString = JSON.stringify(json);

从一个字符串创建一个JSON对象:

var json = JSON.parse(string);

JSON.stringify 函数

JSON.stringify(value [, replacer] [, space])

value:必选。 JavaScript 值,通常对象或数组,将转换。

replacer:可选。 转换结果的函数或数组。

如果 replacer 函数,调用 JSON.stringify 函数,传入键值和每个成员。 返回值用于代替原始值。 如果函数返回 undefined,成员被排除。 根对象的关键是空字符串:””

如果 replacer 是数组,因此,只有用键值的成员数组中将转换。 成员变换的顺序与键顺序的数组中。 当 value 参数也是 replacer 数组时,数组被忽略。

space:可选。 添加缩进、空白和换行符来返回值 JSON 文本更便于阅读。

如果省略 space,返回值文本生成,没有任何额外的空白。

如果 space 是数字,则返回值具有空白的文本缩进指定数目在每个级别的。 如果 space 大于 10 时,文本缩进 10 个空白。

如果 space 为非空字符串,如“\t”,返回值文本缩进与字符串的字符在每个级别。

如果 space 为大于 10 个字符的字符串,使用前 10 个字符。

实例:

var continents = new Array();
continents[0] = "Europe";
continents[1] = "Asia";
continents[2] = "Australia";
continents[3] = "Antarctica";
continents[4] = "North America";
continents[5] = "South America";
continents[6] = "Africa";

var jsonText = JSON.stringify(continents, replaceToUpper);

function replaceToUpper(key, value) {
    return value.toString().toUpperCase();
}

//Output:
// "EUROPE,ASIA,AUSTRALIA,ANTARCTICA,NORTH AMERICA,SOUTH AMERICA,AFRICA"

和:

var contact = new Object();
contact.firstname = "Jesper";
contact.surname = "Aaberg";
contact.phone = ["555-0100", "555-0120"];

var memberfilter = new Array();
memberfilter[0] = "surname";
memberfilter[1] = "phone";
var jsonText = JSON.stringify(contact, memberfilter, "\t");
document.write(jsonText);
// Output: 
// { "surname": "Aaberg", "phone": [ "555-0100", "555-0120" ] }

绑定事件

根据我的使用,JsonEditor提供了监听内容改变的接口,需要在options中定义。

var container = $("#editor")[0];
var options = {
    mode: 'code',
    error: function (err) {
        alert(err.toString());
    },
    change: function() {
        ......
    }
};
var editor = new JSONEditor(container, options);

如果在change中需要获取editor中内容,会在页面初始化的时候报错:editor还没有声明什么的。如果一定要获取editor内容,我们可以延迟绑定,代码如下:

var container = $("#editor")[0];
var options = {
    mode: 'code',
    error: function (err) {
        alert(err.toString());
    },
    change: function() {

    }
};
var editor = new JSONEditor(container, options);
editor.options.change = function() {
    ....    
}

注意一定要在options中声明change事件,否则不能正常绑定【不过目测是我不太熟悉js用法。。。绑定方法不对】。

文章目录
  1. 1. 介绍
  2. 2. 入口
  3. 3. 安装
  4. 4. 用法
    1. 4.1. 实例
  5. 5. Load
    1. 5.1. Detailed error messages
    2. 5.2. Code Editor
  6. 6. API
    1. 6.1. JSONEditor
      1. 6.1.1. 构造函数
      2. 6.1.2. 方法
    2. 6.2. JSON parsing and stringification
      1. 6.2.1. JSON.stringify 函数
  7. 7. 绑定事件