2012-08-22 02:27:08 +08:00
|
|
|
# JSON Editor Online
|
2012-08-24 02:29:47 +08:00
|
|
|
http://jsoneditoronline.org/
|
2012-04-25 15:12:24 +08:00
|
|
|
|
2012-08-21 03:52:36 +08:00
|
|
|
|
2012-08-22 02:33:49 +08:00
|
|
|
### Description
|
2012-08-21 03:52:36 +08:00
|
|
|
|
|
|
|
|
JSON Editor Online is a web-based tool to view, edit, and format JSON.
|
2013-05-26 04:16:53 +08:00
|
|
|
It has various modes such as a tree editor, a code editor, and a plain text
|
|
|
|
|
editor.
|
2012-08-21 03:52:36 +08:00
|
|
|
|
2013-05-26 04:16:53 +08:00
|
|
|
The editor can be used as a component in your own web application. The library
|
|
|
|
|
can be loaded as CommonJS module, AMD module, or as a regular javascript file.
|
2012-08-21 03:52:36 +08:00
|
|
|
|
2013-02-11 00:30:37 +08:00
|
|
|
### Screenshot
|
|
|
|
|
|
2013-05-26 04:16:53 +08:00
|
|
|
The web application shows two panels side by side: a code editor on the left,
|
|
|
|
|
and a tree editor on the right. Files and urls can be loaded via the main menu.
|
|
|
|
|
|
2013-02-11 00:30:37 +08:00
|
|
|
<a href="http://jsoneditoronline.org">
|
2013-05-04 05:34:53 +08:00
|
|
|
<img alt="jsoneditor"
|
|
|
|
|
src="https://raw.github.com/josdejong/jsoneditor/master/misc/screenshots/jsoneditoronline.png">
|
2013-02-11 00:30:37 +08:00
|
|
|
</a>
|
|
|
|
|
|
|
|
|
|
|
2012-08-22 02:33:49 +08:00
|
|
|
### Features
|
2012-08-21 03:52:36 +08:00
|
|
|
|
2013-05-26 04:16:53 +08:00
|
|
|
#### Tree editor
|
2012-08-21 03:52:36 +08:00
|
|
|
- Edit, add, move, remove, and duplicate fields and values.
|
|
|
|
|
- Change type of values.
|
2013-02-10 22:17:35 +08:00
|
|
|
- Sort arrays and objects.
|
2013-05-26 04:16:53 +08:00
|
|
|
- Colorized code.
|
2012-08-21 03:52:36 +08:00
|
|
|
- Search & highlight text in the treeview.
|
2012-11-04 22:26:05 +08:00
|
|
|
- Undo and redo all actions.
|
2013-05-26 04:16:53 +08:00
|
|
|
|
|
|
|
|
#### Code editor
|
|
|
|
|
- Format and compact JSON.
|
|
|
|
|
- Colorized code (powered by Ace).
|
|
|
|
|
- Inspect JSON (powered by Ace).
|
|
|
|
|
|
|
|
|
|
#### Text editor
|
|
|
|
|
- Format and compact JSON.
|
2012-08-21 03:52:36 +08:00
|
|
|
|
|
|
|
|
|
2013-05-04 19:17:24 +08:00
|
|
|
### Documentation
|
|
|
|
|
|
|
|
|
|
- [Docs](https://github.com/josdejong/jsoneditor/tree/master/docs)
|
|
|
|
|
- [Examples](https://github.com/josdejong/jsoneditor/tree/master/examples)
|
|
|
|
|
- [Source](https://github.com/josdejong/jsoneditor)
|
|
|
|
|
- [History](https://github.com/josdejong/jsoneditor/blob/master/HISTORY.md)
|
|
|
|
|
|
|
|
|
|
|
2013-05-04 04:55:15 +08:00
|
|
|
### Install
|
|
|
|
|
|
|
|
|
|
with npm:
|
|
|
|
|
|
|
|
|
|
npm install jsoneditor
|
|
|
|
|
|
|
|
|
|
with bower:
|
|
|
|
|
|
2013-06-03 19:01:52 +08:00
|
|
|
bower install jsoneditor
|
2013-05-04 04:55:15 +08:00
|
|
|
|
2013-05-04 18:09:14 +08:00
|
|
|
download:
|
|
|
|
|
|
|
|
|
|
[http://jsoneditoronline.org/downloads/](http://jsoneditoronline.org/downloads/)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### Use
|
|
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
<!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>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="jsoneditor" style="width: 400px; height: 400px;"></div>
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript" >
|
|
|
|
|
// create the editor
|
|
|
|
|
var container = document.getElementById("jsoneditor");
|
|
|
|
|
var editor = new jsoneditor.JSONEditor(container);
|
|
|
|
|
|
|
|
|
|
// set json
|
|
|
|
|
var json = {
|
|
|
|
|
"Array": [1, 2, 3],
|
|
|
|
|
"Boolean": true,
|
|
|
|
|
"Null": null,
|
|
|
|
|
"Number": 123,
|
|
|
|
|
"Object": {"a": "b", "c": "d"},
|
|
|
|
|
"String": "Hello World"
|
|
|
|
|
};
|
|
|
|
|
editor.set(json);
|
|
|
|
|
|
|
|
|
|
// get json
|
|
|
|
|
var json = editor.get();
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
```
|
|
|
|
|
|
2013-02-10 22:17:35 +08:00
|
|
|
### Build
|
|
|
|
|
|
2013-05-04 18:42:54 +08:00
|
|
|
The code of the JSON Editor is located in the folder `jsoneditor`.
|
2013-02-10 22:17:35 +08:00
|
|
|
The code for the web application in `app/web`.
|
|
|
|
|
To build the library from sourcecode, run
|
|
|
|
|
|
2013-05-04 04:55:15 +08:00
|
|
|
jake
|
2013-02-10 22:17:35 +08:00
|
|
|
|
2013-05-04 04:55:15 +08:00
|
|
|
in the root of the project. This will generate the files `jsoneditor.js`,
|
2013-05-04 18:42:54 +08:00
|
|
|
`jsoneditor.css`, and minified versions, and will create a folder `build`
|
|
|
|
|
containing the zipped library and the built web application.
|
