2017-05-05 16:36:13 +08:00
<!DOCTYPE HTML>
2020-09-23 16:23:38 +08:00
< html lang = "en" >
2017-05-05 16:36:13 +08:00
< head >
2020-09-23 16:23:38 +08:00
< meta charset = "utf-8" >
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 >
2019-08-29 21:45:32 +08:00
const json = [
2017-05-07 21:32:31 +08:00
{
firstName: 'John',
lastName: 'Doe',
age: 28
}
2019-08-29 21:45:32 +08:00
]
2017-05-05 16:36:13 +08:00
2019-08-29 21:45:32 +08:00
const options = {
templates: [
{
text: 'Person',
title: 'Insert a Person Node',
className: 'jsoneditor-type-object',
field: 'PersonTemplate',
value: {
'firstName': 'John',
'lastName': 'Do',
'age': 28
}
},
{
text: 'Address',
title: 'Insert a Address Node',
field: 'AddressTemplate',
value: {
'street': '',
'city': '',
'state': '',
'ZIP code': ''
}
}
]
}
2017-05-05 16:36:13 +08:00
// create the editor
2019-08-29 21:45:32 +08:00
const container = document.getElementById('jsoneditor')
const editor = new JSONEditor(container, options, json)
editor.expandAll()
2017-05-05 16:36:13 +08:00
< / script >
< / body >
< / html >
