Implemented an example synchronizing two editors

2018-08-06 14:48:40 +02:00 · 2018-08-06 14:48:40 +02:00 · 235410c59f
parent d49518a9ba
commit 235410c59f
1 changed files with 61 additions and 0 deletions
--- a/examples/16_synchronize_editors.html
+++ b/examples/16_synchronize_editors.html
@ -0,0 +1,61 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+  <title>JSONEditor | Synchronize two editors</title>
+
+  <link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
+  <script src="../dist/jsoneditor.js"></script>
+
+  <style type="text/css">
+    body {
+      font-family: sans-serif;
+    }
+
+    #jsoneditor1,
+    #jsoneditor2 {
+      width: 500px;
+      height: 500px;
+      margin-right: 10px;
+      display: inline-block;
+    }
+  </style>
+</head>
+<body>
+
+<p>
+  Keep two editors synchronized using <code>onChange</code> and <code>update</code>.
+</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'
+  };
+
+  // create editor 1
+  var editor1 = new JSONEditor(document.getElementById('jsoneditor1'), {
+    onChange: function () {
+      editor2.update(editor1.get());
+    }
+  });
+  editor1.set(json);
+
+  // create editor 2
+  var editor2 = new JSONEditor(document.getElementById('jsoneditor2'), {
+    onChange: function () {
+      editor1.update(editor2.get());
+    }
+  });
+  editor2.set(json);
+
+</script>
+</body>
+</html>