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