jsoneditor/test/test_history_actions.html at 2ca9d8680284f546df2358e297b7c3af766e6791 · josdejong/jsoneditor · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">

  <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 {
      width: 500px;
      height: 500px;
    }
  </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>

<div id="jsoneditor"></div>

<script>
  var container = document.getElementById('jsoneditor');

  var historyAction = {
    'undo':function(params) { alert('undo params = ' + JSON.stringify(params)); },
    'redo':function(params) { alert('redo params = ' + JSON.stringify(params)); }
  }

  var options = {
    mode: 'tree',
    modes: ['code', 'form', 'text', 'tree', 'view'], // allowed modes
    onError: function (err) {
      console.error(err);
    }
  };

  var json = {
    "firstName": "Jos",
    "lastName": "de Jong",
    gender: null,
    "age": 34.2,
    "hobbies": [
        "programming",
        "movies",
        "bicycling"
    ]
  };

  var editor = new JSONEditor(container, options, json);

  // submit the custom action
  editor._onAction(historyAction, {oldNode:'oldNode',newNode:'newNode'});

  // call undo and redo
  editor._onUndo();
  editor._onRedo();

  console.log('json', json);
</script>
</body>
</html>