Docs secion added
This commit is contained in:
josdejong
parent
9b448ab2e7
commit
78547dbdbc
|
|
@ -0,0 +1,180 @@
|
||||||
|
# API Reference
|
||||||
|
|
||||||
|
## JSONEditor
|
||||||
|
|
||||||
|
### Constructor
|
||||||
|
|
||||||
|
#### `JSONEditor(container [, options] [, json])`
|
||||||
|
|
||||||
|
Constructs a new JSONEditor.
|
||||||
|
|
||||||
|
*Parameters:*
|
||||||
|
|
||||||
|
- `{Element} container`
|
||||||
|
An HTML DIV element. The JSONEditor will be created inside this container
|
||||||
|
element.
|
||||||
|
- `{Object} options`
|
||||||
|
Optional object with options. Available options:
|
||||||
|
|
||||||
|
- `{function} change`.
|
||||||
|
Set a callback method triggered when the contents of the JSONEditor change.
|
||||||
|
Called without parameters.
|
||||||
|
- `{function} error`.
|
||||||
|
Set a callback method triggered when an error occurs.
|
||||||
|
Invoked with the error as first argument. The callback is only invoked
|
||||||
|
for errors triggered by a users action.
|
||||||
|
- `{boolean} history`.
|
||||||
|
Enables history, adds a button Undo and Redo to the menu of the JSONEditor.
|
||||||
|
True by default. Only applicable when `mode` is 'tree' or 'form'.
|
||||||
|
- `{String} mode`.
|
||||||
|
Set the editor mode. Available values: 'tree' (default), 'view', 'form',
|
||||||
|
'code', 'text'. In 'view' mode, the data and datastructure is read-only.
|
||||||
|
In 'form' mode, only the value can be changed, the datastructure is read-only.
|
||||||
|
Mode 'code' requires the Ace editor to be loaded on the page.
|
||||||
|
Mode 'text' shows the data as plain text.
|
||||||
|
- `{String} name`.
|
||||||
|
Initial field name for the root node, is undefined by default.
|
||||||
|
Can also be set using `JSONEditor.setName(name)`.
|
||||||
|
Only applicable when mode is 'tree', 'view', or 'form'.
|
||||||
|
- `{boolean} search`.
|
||||||
|
Enables a search box in the upper right corner of the JSONEditor.
|
||||||
|
True by default.
|
||||||
|
Only applicable when mode is 'tree', 'view', or 'form'.
|
||||||
|
- `{Number} indentation`.
|
||||||
|
Number of indentation spaces. 4 by default.
|
||||||
|
Only applicable when mode is 'code' or 'text'.
|
||||||
|
|
||||||
|
- `{JSON} json`
|
||||||
|
Initial JSON data to be loaded into the JSONEditor. Alternatively, the method `JSONEditor.set(json)` can be used to load JSON data into the editor.
|
||||||
|
|
||||||
|
*Returns:*
|
||||||
|
|
||||||
|
- `{jsoneditor.JSONEditor} editor`
|
||||||
|
New instance of a JSONEditor.
|
||||||
|
|
||||||
|
|
||||||
|
### Methods
|
||||||
|
|
||||||
|
#### `JSONEditor.collapseAll()`
|
||||||
|
|
||||||
|
Collapse all fields. Only applicable for mode 'tree', 'view', and 'form'.
|
||||||
|
|
||||||
|
#### `JSONEditor.expandAll()`
|
||||||
|
|
||||||
|
Expand all fields. Only applicable for mode 'tree', 'view', and 'form'.
|
||||||
|
|
||||||
|
#### `JSONEditor.set(json)`
|
||||||
|
|
||||||
|
Set JSON data.
|
||||||
|
|
||||||
|
*Parameters:*
|
||||||
|
|
||||||
|
- `{JSON} json`
|
||||||
|
JSON data to be displayed in the JSONEditor.
|
||||||
|
|
||||||
|
#### `JSONEditor.setName(name)`
|
||||||
|
|
||||||
|
Set a field name for the root node.
|
||||||
|
|
||||||
|
*Parameters:*
|
||||||
|
|
||||||
|
- `{String | undefined} name`
|
||||||
|
Field name of the root node. If undefined, the current name will be removed.
|
||||||
|
|
||||||
|
|
||||||
|
#### `JSONEditor.setText(jsonString)`
|
||||||
|
|
||||||
|
Set text data in the formatter.
|
||||||
|
|
||||||
|
*Parameters:*
|
||||||
|
- `{String} jsonString` Contents of the JSONformatter as string.
|
||||||
|
|
||||||
|
#### `JSONEditor.get()`
|
||||||
|
|
||||||
|
Get JSON data.
|
||||||
|
|
||||||
|
*Returns:*
|
||||||
|
- `{JSON} json` JSON data from the JSONEditor.
|
||||||
|
|
||||||
|
#### `JSONEditor.getName()`
|
||||||
|
|
||||||
|
Retrieve the current field name of the root node.
|
||||||
|
|
||||||
|
*Returns:*
|
||||||
|
|
||||||
|
- `{String | undefined} name`
|
||||||
|
Current field name of the root node, or undefined if not set.
|
||||||
|
|
||||||
|
#### `JSONEditor.getText()`
|
||||||
|
|
||||||
|
Get JSON data as string.
|
||||||
|
|
||||||
|
*Returns:*
|
||||||
|
- `{String} jsonString` Contents of the JSONformatter as string.
|
||||||
|
|
||||||
|
|
||||||
|
### Examples
|
||||||
|
|
||||||
|
A tree editor:
|
||||||
|
|
||||||
|
```js
|
||||||
|
var options = {
|
||||||
|
"mode": "tree",
|
||||||
|
"search": true
|
||||||
|
};
|
||||||
|
var editor = new jsoneditor.JSONEditor (container, options);
|
||||||
|
var json = {
|
||||||
|
"Array": [1, 2, 3],
|
||||||
|
"Boolean": true,
|
||||||
|
"Null": null,
|
||||||
|
"Number": 123,
|
||||||
|
"Object": {"a": "b", "c": "d"},
|
||||||
|
"String": "Hello World"
|
||||||
|
};
|
||||||
|
editor.set(json);
|
||||||
|
editor.expandAll();
|
||||||
|
|
||||||
|
var json = editor.get(json);
|
||||||
|
```
|
||||||
|
|
||||||
|
A text editor:
|
||||||
|
|
||||||
|
```js
|
||||||
|
var options = {
|
||||||
|
"mode": "text",
|
||||||
|
"indentation": 2
|
||||||
|
};
|
||||||
|
var editor = new jsoneditor.JSONEditor (container, options);
|
||||||
|
var json = {
|
||||||
|
"Array": [1, 2, 3],
|
||||||
|
"Boolean": true,
|
||||||
|
"Null": null,
|
||||||
|
"Number": 123,
|
||||||
|
"Object": {"a": "b", "c": "d"},
|
||||||
|
"String": "Hello World"
|
||||||
|
};
|
||||||
|
editor.set(json);
|
||||||
|
|
||||||
|
var json = editor.get(json);
|
||||||
|
```
|
||||||
|
|
||||||
|
## JSON parsing and stringification
|
||||||
|
|
||||||
|
In general to parse or stringify JSON data, the browsers built in JSON parser can be used.
|
||||||
|
To create a formatted string from a JSON object, use:
|
||||||
|
|
||||||
|
```js
|
||||||
|
var formattedString = JSON.stingify(json, null, 2);
|
||||||
|
```
|
||||||
|
|
||||||
|
to create a compacted string from a JSON object, use:
|
||||||
|
|
||||||
|
```js
|
||||||
|
var compactString = JSON.stingify(json);
|
||||||
|
```
|
||||||
|
|
||||||
|
To parse a String to a JSON object, use:
|
||||||
|
|
||||||
|
```js
|
||||||
|
var json = JSON.parse(string);
|
||||||
|
```
|
||||||
|
|
@ -0,0 +1,134 @@
|
||||||
|
# Usage
|
||||||
|
|
||||||
|
### Install
|
||||||
|
|
||||||
|
with npm:
|
||||||
|
|
||||||
|
npm install jsoneditor
|
||||||
|
|
||||||
|
with bower:
|
||||||
|
|
||||||
|
npm install bower
|
||||||
|
|
||||||
|
downloads:
|
||||||
|
|
||||||
|
[http://jsoneditoronline.org/downloads/](http://jsoneditoronline.org/downloads/)
|
||||||
|
|
||||||
|
The library consists of three files: one javascript file, one css file and an
|
||||||
|
image. Both full and minified version are available.
|
||||||
|
|
||||||
|
## Load
|
||||||
|
|
||||||
|
To implement JSON Editor in a web application, load the javascript and css file
|
||||||
|
in the head of the HTML page:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<link rel="stylesheet" type="text/css" href="jsoneditor/jsoneditor-min.css">
|
||||||
|
<script type="text/javascript" src="jsoneditor/jsoneditor-min.js"></script>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Detailed error messages
|
||||||
|
|
||||||
|
Optionally, [jsonlint](https://github.com/zaach/jsonlint) can be loaded to get
|
||||||
|
more detailed error messages.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<script type="text/javascript" src="lib/jsonlint/jsonlint.js"></script>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Code editor
|
||||||
|
|
||||||
|
The mode 'code' requires the [Ace editor](http://ace.ajax.org/) sources to be
|
||||||
|
loaded. Also, the content type must be specified on the page.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
|
||||||
|
|
||||||
|
<script type="text/javascript" src="../lib/ace/ace.js"></script>
|
||||||
|
<script type="text/javascript" src="../lib/ace/mode-json.js"></script>
|
||||||
|
<script type="text/javascript" src="../lib/ace/theme-textmate.js"></script>
|
||||||
|
<script type="text/javascript" src="../lib/ace/theme-jsoneditor.js"></script>
|
||||||
|
```
|
||||||
|
|
||||||
|
## Use
|
||||||
|
|
||||||
|
In the body, create an div element with an id and a size:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<div id="jsoneditor" style="width: 400px; height: 400px;"></div>
|
||||||
|
```
|
||||||
|
|
||||||
|
After the page is loaded, load the editor with javascript:
|
||||||
|
|
||||||
|
```js
|
||||||
|
var container = document.getElementById("jsoneditor");
|
||||||
|
var options = {
|
||||||
|
mode: 'tree'
|
||||||
|
};
|
||||||
|
var editor = new jsoneditor.JSONEditor(container, options);
|
||||||
|
```
|
||||||
|
|
||||||
|
To set JSON data, use set:
|
||||||
|
|
||||||
|
```js
|
||||||
|
var json = {
|
||||||
|
"Array": [1, 2, 3],
|
||||||
|
"Boolean": true,
|
||||||
|
"Null": null,
|
||||||
|
"Number": 123,
|
||||||
|
"Object": {"a": "b", "c": "d"},
|
||||||
|
"String": "Hello World"
|
||||||
|
};
|
||||||
|
editor.set(json);
|
||||||
|
```
|
||||||
|
|
||||||
|
To get edited JSON data, use get:
|
||||||
|
|
||||||
|
```js
|
||||||
|
var json = editor.get();
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
## Full Example
|
||||||
|
|
||||||
|
```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>
|
||||||
|
<p>
|
||||||
|
<button onclick="setJSON();">Set JSON</button>
|
||||||
|
<button onclick="getJSON();">Get JSON</button>
|
||||||
|
</p>
|
||||||
|
<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
|
||||||
|
function setJSON () {
|
||||||
|
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
|
||||||
|
function getJSON() {
|
||||||
|
var json = editor.get();
|
||||||
|
alert(JSON.stringify(json, null, 2));
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
Loading…
Reference in New Issue