monster.ui.jsoneditor()#
The monster.ui.jsoneditor()
method generates an instance of a JSON editor with a set of handy methods and properties.
Syntax#
monster.ui.jsoneditor(target[,options])
Parameters#
Key | Description | Type | Default | Required |
---|---|---|---|---|
target |
Container for the JSON Editor widget. | jQuery |
true |
|
options |
Let you override default editor options that can be found on the JSONEditor page. | Object (#options) |
false |
options
#
List of helper specific customizable settings (in opposition to the ones exposed by the JSON Editor library).
Key | Description | Type | Default | Required |
---|---|---|---|---|
json |
Default JSON to set in the editor. | Object |
false |
Return#
An instance of the JSONEditor
Description#
The monster.ui.jsoneditor()
method renders a customizable JSON editor into the specified target
. This method returns the JSONEditor
instance so you have access its properties and methods. Please see JSONEditor for reference. To get the JSONEditor instance from the DOM please see getJsoneditor().
To initialize the JSONEditor, you just need to pass the target
parameter:
<!--You need to set the container's size-->
<div id="jsoneditor" style="width: 400px; height: 400px;"></div>
var $target = $('#jsoneditor');
var jsoneditor = monster.ui.jsoneditor($target);
Examples#
Use the method options#
var $target = $('#jsoneditor');
/* To know more about all available options please go to:
https://github.com/josdejong/jsoneditor/blob/master/docs/api.md */
var options {
mode: 'review',
modes: ['code', 'tree'],
search: true
}
var jsoneditor = monster.ui.jsoneditor($target, options);
Get the final JSON object#
var $target = $('#jsoneditor');
var jsoneditor = monster.ui.jsoneditor($target);
// This funcion gets the valid JSON object. If the JSON is not valid this method throws an exception.
jsoneditor.get()