string-ace-editor.html 1.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8"/>
  5. <title>string-ace-editor</title>
  6. <!-- json editor -->
  7. <script src="../../dist/jsoneditor.js"></script>
  8. <!-- ace-editor -->
  9. <script src="./../../node_modules/ace-builds/src-noconflict/ace.js"></script>
  10. </head>
  11. <body>
  12. <textarea class="debug" cols="30" rows="10"></textarea>
  13. <button class='get-value'>Get Value</button>
  14. <div class='container'></div>
  15. <script>
  16. var container = document.querySelector('.container');
  17. var debug = document.querySelector('.debug');
  18. var schema = {
  19. "type": "array",
  20. "title": "string-ace-editor",
  21. "items": {
  22. "type": "object",
  23. "properties": {
  24. "editor": {
  25. "type": "string",
  26. "format": "yaml"
  27. }
  28. }
  29. }
  30. };
  31. JSONEditor.plugins.ace.theme = 'twilight';
  32. var editor = new JSONEditor(container, {
  33. schema: schema
  34. });
  35. document.querySelector('.get-value').addEventListener('click', function () {
  36. debug.value = JSON.stringify(editor.getValue());
  37. });
  38. </script>
  39. </body>
  40. </html>