StardewValley
/
jsoneditor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added example synchronizing two editors

This commit is contained in:
jos 2016-10-28 09:36:05 +02:00
parent a399aef0ea
commit 25ecb2dfab
10 changed files with 68 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@ -143,7 +143,8 @@ jsoneditor:
This will generate the file `./dist/jsoneditor.js` and
`./dist/jsoneditor-minimalist.js` and corresponding source maps.
- To automatically build when a source file has changed:
- For development, start a develop server which automatically updates the
library when a source file has changed:
```
npm start

2
examples/01_basic_usage.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE HTML>
<html>
<head>
<title>JSONEditor | Basic usage</title>
<title>Basic usage | JSONEditor</title>
<script src="../dist/jsoneditor.js"></script>

2
examples/02_viewer.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE HTML>
<html>
<head>
<title>JSONEditor | Viewer</title>
<title>Viewer | JSONEditor</title>
<script src="../dist/jsoneditor.js"></script>

2
examples/03_switch_mode.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE HTML>
<html>
<head>
<title>JSONEditor | Switch mode</title>
<title>Switch mode | JSONEditor</title>
<!-- when using the mode "code", it's important to specify charset utf-8 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

2
examples/04_load_and_save.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE HTML>
<html>
<head>
<title>JSONEditor | Load and save</title>
<title>Load and save | JSONEditor</title>
<script src="../dist/jsoneditor.js"></script>

2
examples/08_custom_ace.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE HTML>
<html>
<head>
<title>JSONEditor | Custom Ace Editor</title>
<title>Custom Ace Editor | JSONEditor</title>
<!-- we use the minimalist jsoneditor, which doesn't have Ace Editor included -->
<script src="../dist/jsoneditor-minimalist.js"></script>

58
examples/09_synchronize_two_editors.html Normal file
View File

@ -0,0 +1,58 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Synchronize two editors | JSONEditor</title>
<script src="../dist/jsoneditor.js"></script>
<style type="text/css">
body {
font-family: arial, sans-serif;
}
#jsoneditor1,
#jsoneditor2 {
display: inline-block;
width: 350px;
height: 500px;
margin-right: 24px;
}
</style>
</head>
<body>
<p>
This example demonstrates how to keep two editors synchronized by listening for
the onChange event.
</p>
<div id="jsoneditor1"></div>
<div id="jsoneditor2"></div>
<script>
var json = {
'array': [1, 2, 3],
'boolean': true,
'null': null,
'number': 123,
'object': {'a': 'b', 'c': 'd'},
'string': 'Hello World'
}
var editor1 = jsoneditor(document.getElementById('jsoneditor1'), {
onChange: function (patch, revert) {
editor2.patch(patch)
}
})
editor1.set(json)
var editor2 = jsoneditor(document.getElementById('jsoneditor2'), {
onChange: function (patch, revert) {
editor1.patch(patch)
}
})
editor2.set(json)
</script>
</body>
</html>

2
examples/_05_custom_fields_editable.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE HTML>
<html>
<head>
<title>JSONEditor | Custom editable fields</title>
<title>Custom editable fields | JSONEditor</title>
<script src="../dist/jsoneditor.js"></script>

2
examples/_06_custom_styling.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE HTML>
<html>
<head>
<title>JSONEditor | Custom styling</title>
<title>Custom styling | JSONEditor</title>
<script src="../dist/jsoneditor.js"></script>

2
examples/_07_json_schema_validation.html
View File

@ -1,7 +1,7 @@
<!DOCTYPE HTML>
<html>
<head>
<title>JSONEditor | JSON schema validation</title>
<title>JSON schema validation | JSONEditor</title>
<script src="../dist/jsoneditor.js"></script>