Sha256: d965a1c63cede50d1d525c92f85318550396241874a3b630026a5af813d0650c

Contents?: true

Size: 1.44 KB

Versions: 3

Compression:

Stored size: 1.44 KB

Contents

<!DOCTYPE HTML>
<html>
<head>
  <title>JSONEditor | Switch mode</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">

  <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;
    }

    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 options = {
    mode: 'tree',
    modes: ['code', 'form', 'text', 'tree', 'view'], // allowed modes
    onError: function (err) {
      alert(err.toString());
    },
    onModeChange: function (newMode, oldMode) {
      console.log('Mode switched from', oldMode, 'to', newMode);
    }
  };

  var json = {
    "array": [1, 2, 3],
    "boolean": true,
    "null": null,
    "number": 123,
    "object": {"a": "b", "c": "d"},
    "string": "Hello World"
  };

  var editor = new JSONEditor(container, options, json);
</script>
</body>
</html>

Version data entries

3 entries across 3 versions & 1 rubygems

Version Path
statixite-1.0.2 vendor/assets/bower_components/jsoneditor/examples/03_switch_mode.html
statixite-1.0.1 vendor/assets/bower_components/jsoneditor/examples/03_switch_mode.html
statixite-1.0.0 vendor/assets/bower_components/jsoneditor/examples/03_switch_mode.html