jsoneditor/examples/01_basic_usage.html

<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">

  <title>JSONEditor | Basic usage</title>

  <link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
  <script src="../dist/jsoneditor.js"></script>

  <style type="text/css">
    #jsoneditor {
      width: 500px;
      height: 500px;
    }
  </style>
</head>
<body>
<p>
  <button id="setJSON">Set JSON</button>
  <button id="getJSON">Get JSON</button>
</p>
<div id="jsoneditor"></div>

<script>
  // create the editor
  const container = document.getElementById('jsoneditor')
  const options = {}
  const editor = new JSONEditor(container, options)

  // set json
  document.getElementById('setJSON').onclick = function () {
    const json = {
      'array': [1, 2, 3],
      'boolean': true,
      'color': '#82b92c',
      'null': null,
      'number': 123,
      'object': {'a': 'b', 'c': 'd'},
      'time': 1575599819000,
      'string': 'Hello World',
      'onlineDemo': 'https://jsoneditoronline.org/'
    }
    editor.set(json)
  }

  // get json
  document.getElementById('getJSON').onclick = function () {
    const json = editor.get()
    alert(JSON.stringify(json, null, 2))
  }
</script>
</body>
</html>
Added more examples. 2013-01-06 05:19:38 +08:00			`<!DOCTYPE HTML>`
Defined charset="utf-8" and lang="en" in all examples 2020-09-23 16:23:38 +08:00			`<html lang="en">`
Added more examples. 2013-01-06 05:19:38 +08:00			`<head>`
Defined charset="utf-8" and lang="en" in all examples 2020-09-23 16:23:38 +08:00			`<meta charset="utf-8">`

Refactored JSONEditor sourcecode to AMD modules 2014-05-30 04:13:37 +08:00			`<title>JSONEditor \| Basic usage</title>`
Using brace to load Ace. Ace and jsonlint are now packed by default with JSONEditor. Removed all redundant build stuff for the assets. 2015-02-28 04:54:04 +08:00
Moved the distribution files from root to the ./dist folder 2015-03-01 03:47:23 +08:00			`<link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">`
			`<script src="../dist/jsoneditor.js"></script>`
Using brace to load Ace. Ace and jsonlint are now packed by default with JSONEditor. Removed all redundant build stuff for the assets. 2015-02-28 04:54:04 +08:00
Switched everything to 2-space indentation 2013-11-16 01:11:50 +08:00			`<style type="text/css">`
			`#jsoneditor {`
			`width: 500px;`
			`height: 500px;`
			`}`
			`</style>`
Added more examples. 2013-01-06 05:19:38 +08:00			`</head>`
			`<body>`
Switched everything to 2-space indentation 2013-11-16 01:11:50 +08:00			`<p>`
			`<button id="setJSON">Set JSON</button>`
			`<button id="getJSON">Get JSON</button>`
			`</p>`
			`<div id="jsoneditor"></div>`
Added more examples. 2013-01-06 05:19:38 +08:00
Using brace to load Ace. Ace and jsonlint are now packed by default with JSONEditor. Removed all redundant build stuff for the assets. 2015-02-28 04:54:04 +08:00			`<script>`
Switched everything to 2-space indentation 2013-11-16 01:11:50 +08:00			`// create the editor`
Rewrite code styling of browser examples 2019-08-29 21:45:32 +08:00			`const container = document.getElementById('jsoneditor')`
			`const options = {}`
			`const editor = new JSONEditor(container, options)`
Added more examples. 2013-01-06 05:19:38 +08:00
Switched everything to 2-space indentation 2013-11-16 01:11:50 +08:00			`// set json`
			`document.getElementById('setJSON').onclick = function () {`
Rewrite code styling of browser examples 2019-08-29 21:45:32 +08:00			`const json = {`
Switched everything to 2-space indentation 2013-11-16 01:11:50 +08:00			`'array': [1, 2, 3],`
			`'boolean': true,`
Implement color picker. Expose `VanillaPicker`, `ace`, and `Ajv`. 2018-08-22 18:10:15 +08:00			`'color': '#82b92c',`
Switched everything to 2-space indentation 2013-11-16 01:11:50 +08:00			`'null': null,`
			`'number': 123,`
			`'object': {'a': 'b', 'c': 'd'},`
add timestampFormat (#863) * add timestampFormat * use createTextNode instead innerHTML 2019-12-11 18:34:24 +08:00			`'time': 1575599819000,`
Multi-select mouse events now honor the event's window (#1098) * Multi-select mouse events now honor the event's window This prevents errors from opening JSONEditor in a child window (such as `window.open` or third-party libraries like react-new-window). * Add a demo of showing a JSONEditor in a child window * Minor spelling fixes * Further improvements to new window support Use `event.view` instead of the global `window`. Copy VanillaPicker styles in the example so that the color picker is correctly styled. * Add 'noopener' This helps security; otherwise, JavaScript running in the context of the new window can access the original window object via the `window.opener` property, even if it's a different origin. * Update modal handling for new windows There are two approaches we could take; we could use the existing modalAnchor property and make callers responsible for setting it, or we could modify the default handling to default to the node's container body. For now, I chose to make callers responsible. Rename showTransformModal's `anchor` parameter to `container`; as far as I can tell, `anchor` didn't work properly. 2020-09-23 16:06:12 +08:00			`'string': 'Hello World',`
			`'onlineDemo': 'https://jsoneditoronline.org/'`
Rewrite code styling of browser examples 2019-08-29 21:45:32 +08:00			`}`
			`editor.set(json)`
			`}`
Added more examples. 2013-01-06 05:19:38 +08:00
Switched everything to 2-space indentation 2013-11-16 01:11:50 +08:00			`// get json`
			`document.getElementById('getJSON').onclick = function () {`
Rewrite code styling of browser examples 2019-08-29 21:45:32 +08:00			`const json = editor.get()`
			`alert(JSON.stringify(json, null, 2))`
			`}`
Switched everything to 2-space indentation 2013-11-16 01:11:50 +08:00			`</script>`
Added more examples. 2013-01-06 05:19:38 +08:00			`</body>`
			`</html>`