Gracias, Wikipedia.
ShareCode
Permalink: http://www.treeweb.es/u/974/ 01/02/2011

ShareCode

1 <div style="position: fixed; top: 0; left: 0; bottom: 0; width: 48%; overflow-y: auto;">2  <div style="padding: 16px;">3  The following is <strong>Jedi</strong>, a JSON editor. You can edit numbers, strings and booleans. It4  is also possible collapse arrays and objects.<br>5  6  Edit something and see the events in the right panel.<br>7  <br>8  </div>9  <div id="container"></div>10  <h2>Code example</h2>11  <pre id="code-example"></pre>12 </div>13 14 <div style="position: fixed; top: 0; right: 0; bottom: 0; width: 48%; overflow-y: auto;">15  <h2>Events</h2>16  <div id="events" style="font-family: monospace;"></div>17 </div>18 19 <script type="text/javascript">20 21  function print_event(key, value) {22  var events = document.getElementById('events');23  var msg = document.createElement('div');24  msg.innerHTML = '<strong>'+key+'</strong> = '+JSON.stringify(value);25  26  if (null === events.firstChild) {27  events.appendChild(msg);28  } else {29  events.insertBefore(msg, events.firstChild);30  }31  32  events.insertBefore(msg, last);33  }34 35 </script>36 37 <script id="jedi-code" type="text/javascript">38 var my_json = {39  age: 28,40  name: "manolo",41  married: false,42  colors: ["red", "blue", "green"],43  address: {44  street: "Elm",45  number: 7,46  },47  friends: [48  {49  name: "Fulanito",50  surname: "Fulanez",51  married: true,52  },53  {54  name: "Menganito",55  surname: "Menganez",56  married: false,57  },58  ],59 };60 61 var jedi = new Jedi();62 jedi.setData(my_json);63 jedi.event_change = function(key, value) {64  print_event(key, value);65 };66 67 var container = document.getElementById('container');68 container.appendChild(jedi.dom);69 </script>70 71 <script type="text/javascript">72 73  var code = document.getElementById('jedi-code');74  var pre = document.getElementById('code-example');75  pre.innerHTML = code.innerHTML;76 77 </script>78 


Este ShareCode tiene versiones:
  1. JSON editor aaa bbbb ... (25/03/2015)
  2. The following is Jedi, a J... (29/07/2015)
  3. The following is Jedi, a J... (15/09/2015)
  4. The following is Jedi, a J... (13/11/2017)
Enlace
El enlace para compartir es: