1 <div style="position:absolute; height: 100px; left: 0; right: 0; top: 0; text-align: center; font-size: 50px;">2 <span>J</span><span style="color: silver;">SON</span> <span>edi</span><span style="color: silver;">tor</span>3 4 <ruby> aaa <rb> bbbb </rb> </ruby>5 6 </div>7 8 <div style="position:absolute; top: 100px; left: 0; right: 0; bottom: 0; margin: 16px;">9 <div style="position: absolute; top: 0; left: 0; bottom: 0; width: 48%; overflow-y: auto;">10 <div style="padding: 16px;">11 The following is <strong>Jedi</strong>, a JSON editor. You can edit numbers, strings and booleans. It12 is also possible collapse arrays and objects.<br>13 14 Edit something and see the events in the right panel.<br>15 <br>16 </div>17 <div id="container"></div>18 <h2>Code example</h2>19 <pre id="code-example"></pre>20 </div>21 22 <div style="position: absolute; top: 0; right: 0; bottom: 0; width: 48%; overflow-y: auto;">23 <h2>Events</h2>24 <div id="events" style="font-family: monospace;"></div>25 </div>26 </div>27 28 <script type="text/javascript">29 30 function print_event(key, value) {31 var events = document.getElementById('events');32 var msg = document.createElement('div');33 msg.innerHTML = '<strong>'+key+'</strong> = '+JSON.stringify(value);34 35 if (null === events.firstChild) {36 events.appendChild(msg);37 } else {38 events.insertBefore(msg, events.firstChild);39 }40 41 events.insertBefore(msg, last);42 }43 44 </script>45 46 <script id="jedi-code" type="text/javascript">47 var my_json = {48 age: 28,49 name: "manolo",50 married: false,51 colors: ["red", "blue", "green"],52 address: {53 street: "Elm",54 number: 7,55 },56 friends: [57 {58 name: "Fulanito",59 surname: "Fulanez",60 married: true,61 },62 {63 name: "Menganito",64 surname: "Menganez",65 married: false,66 },67 ],68 };69 70 var jedi = new Jedi();71 jedi.setData(my_json);72 jedi.event_change = function(key, value) {73 print_event(key, value);74 };75 76 var container = document.getElementById('container');77 container.appendChild(jedi.dom);78 </script>79 80 <script type="text/javascript">81 82 var code = document.getElementById('jedi-code');83 var pre = document.getElementById('code-example');84 pre.innerHTML = code.innerHTML;85 86 </script>87 88 89 90 <style type="text/css">91 body {92 font-family: sans-serif;93 }94 </style>Este ShareCode tiene versiones:
- JJSONedieditor ... (25/03/2015)
- JSON editor aaa bbbb ... (18/09/2021)
Enlace
El enlace para compartir es: