2014-06-01 03:01:30 +08:00
|
|
|
# JSON Editor
|
2012-04-25 15:12:24 +08:00
|
|
|
|
2016-01-15 04:26:39 +08:00
|
|
|
JSON Editor is a web-based tool to view, edit, format, and validate 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-11-15 21:56:12 +08:00
|
|
|
Supported browsers: Chrome, Firefox, Safari, Opera, Internet Explorer 9+.
|
|
|
|
|
|
2015-12-31 21:30:27 +08:00
|
|
|
<img alt="json editor" src="https://raw.github.com/josdejong/jsoneditor/master/misc/jsoneditor.png"> <img alt="code editor" src="https://raw.github.com/josdejong/jsoneditor/master/misc/codeeditor.png">
|
2014-07-29 03:21:28 +08:00
|
|
|
|
2013-02-11 00:30:37 +08:00
|
|
|
|
2015-02-28 22:23:19 +08:00
|
|
|
## Features
|
2012-08-21 03:52:36 +08:00
|
|
|
|
2015-02-28 22:23:19 +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.
|
2016-01-12 19:40:23 +08:00
|
|
|
- Search & highlight text in the tree view.
|
2012-11-04 22:26:05 +08:00
|
|
|
- Undo and redo all actions.
|
2016-01-12 19:40:23 +08:00
|
|
|
- JSON schema validation (powered by [ajv](https://github.com/epoberezkin/ajv)).
|
2013-05-26 04:16:53 +08:00
|
|
|
|
2015-02-28 22:23:19 +08:00
|
|
|
### Code editor
|
2016-01-12 19:40:23 +08:00
|
|
|
- Colorized code (powered by [Ace](https://ace.c9.io)).
|
|
|
|
|
- Inspect JSON (powered by [Ace](https://ace.c9.io)).
|
2016-01-15 04:10:30 +08:00
|
|
|
- Format and compact JSON.
|
2016-01-12 22:18:11 +08:00
|
|
|
- JSON schema validation (powered by [ajv](https://github.com/epoberezkin/ajv)).
|
2013-05-26 04:16:53 +08:00
|
|
|
|
2015-02-28 22:23:19 +08:00
|
|
|
### Text editor
|
2013-05-26 04:16:53 +08:00
|
|
|
- Format and compact JSON.
|
2016-01-12 22:18:11 +08:00
|
|
|
- JSON schema validation (powered by [ajv](https://github.com/epoberezkin/ajv)).
|
2012-08-21 03:52:36 +08:00
|
|
|
|
|
|
|
|
|
2015-02-28 22:23:19 +08:00
|
|
|
## Documentation
|
2013-05-04 19:17:24 +08:00
|
|
|
|
2014-05-31 03:28:40 +08:00
|
|
|
- Documentation:
|
|
|
|
|
- [API](https://github.com/josdejong/jsoneditor/tree/master/docs/api.md)
|
|
|
|
|
- [Usage](https://github.com/josdejong/jsoneditor/tree/master/docs/usage.md)
|
2014-07-29 03:00:41 +08:00
|
|
|
- [Shortcut keys](https://github.com/josdejong/jsoneditor/tree/master/docs/shortcut_keys.md)
|
2013-05-04 19:17:24 +08:00
|
|
|
- [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)
|
|
|
|
|
|
|
|
|
|
|
2015-02-28 22:23:19 +08:00
|
|
|
## Install
|
2013-05-04 04:55:15 +08:00
|
|
|
|
2016-10-14 23:46:00 +08:00
|
|
|
Install via npm:
|
2013-05-04 04:55:15 +08:00
|
|
|
|
|
|
|
|
npm install jsoneditor
|
|
|
|
|
|
2016-10-14 23:46:00 +08:00
|
|
|
### Versions
|
2013-05-04 04:55:15 +08:00
|
|
|
|
2016-10-14 23:46:00 +08:00
|
|
|
There are two versions of jsoneditor available: a full version and
|
|
|
|
|
a minimalist version.
|
2013-05-04 04:55:15 +08:00
|
|
|
|
2016-10-14 23:46:00 +08:00
|
|
|
#### Full version
|
2013-05-04 18:09:14 +08:00
|
|
|
|
2016-10-14 23:46:00 +08:00
|
|
|
If you're not sure which version to use, use the full version: jsoneditor.js.
|
|
|
|
|
|
|
|
|
|
#### Minimalist version
|
|
|
|
|
|
|
|
|
|
The minimalist version, jsoneditor-minimalist.js, has excluded the following libraries:
|
|
|
|
|
|
|
|
|
|
- `ace` (via `brace`), used for the code editor.
|
|
|
|
|
- `ajv`, used for JSON schema validation.
|
|
|
|
|
|
|
|
|
|
This reduces the the size of the minified and gzipped JavaScript considerably.
|
|
|
|
|
|
|
|
|
|
When to use the minimalist version?
|
|
|
|
|
|
|
|
|
|
- If you don't need the mode "code" and don't need JSON schema validation.
|
|
|
|
|
- Or if you want to provide `ace` and/or `ajv` yourself via the configuration
|
|
|
|
|
options, for example when you already use Ace in other parts of your
|
|
|
|
|
web application too and don't want to bundle the library twice.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### More
|
2015-05-15 03:39:01 +08:00
|
|
|
|
2016-08-14 03:38:32 +08:00
|
|
|
There is a directive available for using `jsoneditor` in Angular.js:
|
2015-05-15 03:39:01 +08:00
|
|
|
|
|
|
|
|
[https://github.com/angular-tools/ng-jsoneditor](https://github.com/angular-tools/ng-jsoneditor)
|
|
|
|
|
|
|
|
|
|
|
2015-02-28 22:23:19 +08:00
|
|
|
## Use
|
2013-05-04 18:09:14 +08:00
|
|
|
|
|
|
|
|
```html
|
|
|
|
|
<!DOCTYPE HTML>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
2015-05-15 03:25:10 +08:00
|
|
|
<!-- when using the mode "code", it's important to specify charset utf-8 -->
|
|
|
|
|
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
|
|
|
|
|
|
2016-08-14 03:38:32 +08:00
|
|
|
<script src="jsoneditor/dist/jsoneditor.js"></script>
|
2013-05-04 18:09:14 +08:00
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="jsoneditor" style="width: 400px; height: 400px;"></div>
|
|
|
|
|
|
2015-02-28 04:54:04 +08:00
|
|
|
<script>
|
2013-05-04 18:09:14 +08:00
|
|
|
// create the editor
|
2016-10-14 23:46:00 +08:00
|
|
|
var container = document.getElementById('jsoneditor');
|
2016-01-12 19:40:23 +08:00
|
|
|
var options = {};
|
2016-08-14 03:38:32 +08:00
|
|
|
var editor = jsoneditor(container, options);
|
2013-05-04 18:09:14 +08:00
|
|
|
|
|
|
|
|
// 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>
|
|
|
|
|
```
|
|
|
|
|
|
2015-02-28 22:23:19 +08:00
|
|
|
|
|
|
|
|
## Build
|
2013-02-10 22:17:35 +08:00
|
|
|
|
2014-05-30 16:33:11 +08:00
|
|
|
The code of the JSON Editor is located in the folder `./src`. To build
|
2014-05-30 00:35:39 +08:00
|
|
|
jsoneditor:
|
2013-02-10 22:17:35 +08:00
|
|
|
|
2014-05-30 00:35:39 +08:00
|
|
|
- Install dependencies:
|
2013-02-10 22:17:35 +08:00
|
|
|
|
2015-03-18 15:56:54 +08:00
|
|
|
```
|
|
|
|
|
npm install
|
|
|
|
|
```
|
2014-05-30 00:35:39 +08:00
|
|
|
|
2014-05-30 16:33:11 +08:00
|
|
|
- Build JSON Editor:
|
2014-05-30 00:35:39 +08:00
|
|
|
|
2015-03-18 15:56:54 +08:00
|
|
|
```
|
|
|
|
|
npm run build
|
|
|
|
|
```
|
2014-05-30 00:35:39 +08:00
|
|
|
|
2016-08-14 03:38:32 +08:00
|
|
|
This will generate the file `./dist/jsoneditor.js` and
|
|
|
|
|
`./dist/jsoneditor-minimalist.js` and corresponding source maps.
|
2016-01-11 16:49:42 +08:00
|
|
|
|
2016-10-28 15:36:05 +08:00
|
|
|
- For development, start a develop server which automatically updates the
|
|
|
|
|
library when a source file has changed:
|
2016-01-11 16:49:42 +08:00
|
|
|
|
|
|
|
|
```
|
2016-08-20 16:06:18 +08:00
|
|
|
npm start
|
2016-01-11 16:49:42 +08:00
|
|
|
```
|
|
|
|
|
|
2016-08-14 03:38:32 +08:00
|
|
|
This will update `./dist/jsoneditor.js` on every change in the source code,
|
|
|
|
|
but it will **NOT** update the minimalist version.
|
2016-12-30 20:45:43 +08:00
|
|
|
|
|
|
|
|
- Run unit tests:
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
npm test
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
or to watch for changes and re-run tests automatically:
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
npm run watch:test
|
|
|
|
|
```
|
