hungerzs
/
json-editor


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
							<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>CSS Integration JSON Editor Example</title>

    <!-- Materialize CSS, Material Icons -->
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <style>
        html { font-size: 12px; line-height: 1.3; }
    </style>

    <!-- Scripts. -->
    <script src="https://cdn.jsdelivr.net/npm/@json-editor/json-editor/dist/jsoneditor.min.js"></script>
    <script>
        // Set the default CSS theme and icon library globally
        JSONEditor.defaults.theme = 'materialize';
        JSONEditor.defaults.iconlib = 'materialicons';
    </script>

  </head>
  <body>
    <div class="container">

        <div class="row">
            <div class="col s12">
                <h1>Materialize CSS &ndash; JSON Editor Example</h1>
            </div>
        </div>

        <div class="row">
            <div class="col s6">
                <p>JSON Editor supports these popular CSS frameworks:</p>
                <ul>
                    <li>Bootstrap 2</li>
                    <li>Bootstrap 3</li>
                    <li>Foundation 3</li>
                    <li>Foundation 4</li>
                    <li>Foundation 5</li>
                    <li>jQuery UI</li>
                    <li>
                      Materialize <span class="grey-text">(shown here, see <a href="http://materializecss.com/">http://materializecss.com/</a>)</span>
                    </li>
                </ul>
            </div>
            <div class="col s6">
                <p>JSON Editor supports these popular icon libraries:</p>
                <ul>
                    <li>Bootstrap 2 Glyphicons</li>
                    <li>Bootstrap 3 Glyphicons</li>
                    <li>Foundicons 2</li>
                    <li>Foundicons 3</li>
                    <li>jQueryUI</li>
                    <li>Font Awesome 3</li>
                    <li>Font Awesome 4</li>
                    <li>
                      Material Icons <span class="grey-text">(shown here, see <a href="https://material.io/icons/">https://material.io/icons/</a>)</span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="row">
            <div class="col s12">
                <button id="submit" class="btn waves-effect waves-light">
                    Submit (console.log)
                    <i class="material-icons right">send</i>
                </button>
                <button id="restore"  class="btn waves-effect waves-light">Restore to Default</button>
                <span id="valid_indicator" class="badge"></span>
            </div>
        </div>
        <div class="row">
            <div id="editor_holder" class="col s12"></div>
        </div>
    </div>

    <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>

    <script>
      // This is the starting value for the editor
      // We will use this to seed the initial editor 
      // and to provide a "Restore to Default" button.
      var starting_value = {
        name: "John Smith",
        age: 35,
        gender: "male",
        location: {
          city: "San Francisco",
          state: "California"
        },
        pets: [
          {
            name: "Spot",
            type: "dog",
            fixed: true
          },
          {
            name: "Whiskers",
            type: "cat",
            fixed: false
          }
        ],
        "cars": [
            {
                manufacturer: "Ford",
                model: "Mustang"
            },
            {
                manufacturer: "Lamborghini",
                model: "Diablo"
            }
        ]
      };
      
      // Initialize the editor
      var editor = new JSONEditor(document.getElementById('editor_holder'),{
        // Enable fetching schemas via ajax
        ajax: true,
        
        // The schema for the editor
        schema: {
          $ref: "person.json",
          format: "grid"
        },
        
        // Seed the form with a starting value
        startval: starting_value
      });
      
      // Hook up the submit button to log to the console
      document.getElementById('submit').addEventListener('click',function() {
        // Get the value from the editor
        console.log(editor.getValue());
      });
      
      // Hook up the Restore to Default button
      document.getElementById('restore').addEventListener('click',function() {
        editor.setValue(starting_value);
      });
      
      // Hook up the validation indicator to update its 
      // status whenever the editor changes
      editor.on('change',function() {
        // Get an array of errors from the validator
        var errors = editor.validate();
        
        var indicator = document.getElementById('valid_indicator');
        
        // Not valid
        if(errors.length) {
          indicator.className = 'badge red';
          indicator.textContent = 'invalid';
        }
        // Valid
        else {
          indicator.className = 'badge green white-text';
          indicator.textContent = 'valid';
        }
      });
    </script>
  </body>
</html>