hungerzs
/
json-editor


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
							<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <script src="../../dist/jsoneditor.js"></script>
</head>
<body>

<textarea class="debug" cols="30" rows="10"></textarea>
<button class='get-value'>Get Value</button>
<div class='container'></div>

<script>
  var container = document.querySelector('.container');
  var debug = document.querySelector('.debug');
  var getValue = document.querySelector('.get-value');

  var schema = {
    "type": "object",
    "title": "readOnly",
    "properties": {
      "string": {
        "title": "string",
        "type": "string",
        "readOnly": true,
        "default": "some value"
      },
      "number": {
        "title": "number",
        "type": "number",
        "readOnly": true,
        "default": 5.5
      },
      "integer": {
        "title": "integer",
        "type": "integer",
        "readOnly": true,
        "default": 5
      },
      "multiselect": {
        "title": "multiselect",
        "type": "array",
        "format": "multiselect",
        "uniqueItems": true,
        "readOnly": true,
        "items": {
          "type": "string",
          "enum": ["value1","value2"]
        }
      },
      "select": {
        "title": "select",
        "type": "boolean",
        "readOnly": true
      },
      rating: {
        "title": "rating",
        "readOnly": true,
        "type": "integer",
        "format": "rating",
        "maximum": "5",
        "exclusiveMaximum": false
      },
      checkbox: {
        "title": "checkbox",
        "format": "checkbox",
        "type": "boolean",
        "readOnly": true
      }
    }
  };

  var editor = new JSONEditor(container, {
    schema: schema
  });

  getValue.addEventListener('click', function () {
    debug.value = JSON.stringify(editor.getValue());
  });

</script>

</body>
</html>