jsoneditor/test/test_build.html

87 lines
1.8 KiB
HTML
Raw Normal View History

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
2015-03-01 04:02:39 +08:00
<link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
<script src="../dist/jsoneditor.js"></script>
<style type="text/css">
body {
font: 10.5pt arial;
color: #4d4d4d;
line-height: 150%;
width: 500px;
padding-left: 40px;
}
code {
background-color: #f5f5f5;
}
#jsoneditor {
2018-08-25 21:22:37 +08:00
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<p>
Switch editor mode using the mode box.
Note that the mode can be changed programmatically as well using the method
<code>editor.setMode(mode)</code>, try it in the console of your browser.
</p>
<form>
<div id="jsoneditor"></div>
</form>
<script>
var container, options, json, editor;
container = document.getElementById('jsoneditor');
options = {
mode: 'tree',
modes: ['code', 'form', 'text', 'tree', 'view'], // allowed modes
onError: function (err) {
alert(err.toString());
},
onChange: function () {
console.log('change');
},
onChangeJSON: function (json) {
console.log('onChangeJSON', json);
},
onChangeText: function (text) {
console.log('onChangeText', text);
},
indentation: 4,
escapeUnicode: true
};
json = {
"array": [1, 2, [3,4,5]],
"boolean": true,
"color": "#82b92c",
"htmlcode": '&quot;',
"escaped_unicode": '\\u20b9',
"unicode": '\u20b9,\uD83D\uDCA9',
"return": '\n',
"null": null,
"number": 123,
"object": {"a": "b", "c": "d"},
"string": "Hello World",
2018-08-23 00:00:56 +08:00
"timestamp": 1534952749890,
"url": "http://jsoneditoronline.org"
};
editor = new JSONEditor(container, options, json);
console.log('json', json);
console.log('string', JSON.stringify(json));
</script>
</body>
</html>