json对象可视化编辑工具jsonmate

有时候我们需要可视化编辑json对象，就像用ckeditor来编辑html一样，这里推荐一个Jquery的插件 jsonmate，

官网地址：http://jsonmate.com/

实例代码：

<link rel="stylesheet" type="text/css" href="jsoneditor.css"/>

<div id="editor" class="json-editor"></div>
<pre id="json"></pre>
<script src="jquery.min.js"></script>
<script src="jquery.jsoneditor.js"></script>
<script>
    var json = {
       "string": "foo",
       "number": 5,
       "array": [1, 2, 3],
       "object": {
         "property": "value",
         "subobj": {
         "arr": ["foo", "ha"],
         "numero": 1
       }
    };
    $('#editor').jsonEditor(json, { change: function() {
        $('#json').html(JSON.stringify(json));
    } });
</script>

效果如图