2017-05-05 16:36:13 +08:00
<!DOCTYPE HTML>
< html >
< head >
2017-05-07 21:32:31 +08:00
< title > JSONEditor | Item templates< / title >
2017-05-05 16:36:13 +08:00
< link href = "../dist/jsoneditor.css" rel = "stylesheet" type = "text/css" >
< script src = "../dist/jsoneditor.js" > < / script >
< style type = "text/css" >
body {
width: 600px;
font: 11pt sans-serif;
}
#jsoneditor {
width: 100%;
height: 500px;
}
< / style >
< / head >
< body >
2017-05-07 21:32:31 +08:00
< h1 > Item templates< / h1 >
2017-05-05 16:36:13 +08:00
< p >
2017-05-07 21:32:31 +08:00
Using item templates, the options in the context menu under "insert" and "append" can be extended with extra options, containing a domain specific template like a "Person", "Contact", "Order", "Address", etc.
2017-05-05 16:36:13 +08:00
< / p >
< div id = "jsoneditor" > < / div >
< script >
2017-05-07 21:32:31 +08:00
var json = [
{
firstName: 'John',
lastName: 'Doe',
age: 28
}
];
2017-05-05 16:36:13 +08:00
var options = {
templates: [
{
2017-05-24 08:21:30 +08:00
text: 'Person',
title: 'Insert a Person Node',
className: 'jsoneditor-type-object',
field: 'PersonTemplate',
value: {
2017-05-07 21:32:31 +08:00
'firstName': 'John',
'lastName': 'Do',
'age': 28
}
},
{
2017-05-24 08:21:30 +08:00
text: 'Address',
title: 'Insert a Address Node',
field: 'AddressTemplate',
value: {
2017-05-26 22:17:34 +08:00
'street': '',
'city': '',
'state': '',
'ZIP code': ''
2017-05-05 16:36:13 +08:00
}
}
]
};
// create the editor
var container = document.getElementById('jsoneditor');
var editor = new JSONEditor(container, options, json);
2017-05-07 21:32:31 +08:00
editor.expandAll();
2017-05-05 16:36:13 +08:00
< / script >
< / body >
< / html >
