Editor.html 1.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6. <title>Editor</title>
  7. <style type="text/css" media="screen">
  8. body {
  9. overflow: hidden;
  10. }
  11. #editor {
  12. margin: 0;
  13. position: absolute;
  14. top: 0;
  15. bottom: 0;
  16. left: 0;
  17. right: 0;
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <pre id="editor"></pre>
  23. <script src="./source/ace/ace.js" type="text/javascript" charset="utf-8"></script>
  24. <script src="./source/ace/ext-language_tools.js"></script>
  25. <script>
  26. var editor;
  27. function codeLoaded(value) {
  28. document.getElementsByTagName('pre')[0].innerHTML = value;
  29. editor = ace.edit("editor");
  30. editor.setOptions({
  31. enableBasicAutocompletion: true,
  32. enableSnippets: true,
  33. enableLiveAutocompletion: true
  34. });
  35. editor.setTheme("ace/theme/monokai");
  36. editor.session.setMode("ace/mode/typescript");
  37. editor.getSession().on('change', function(e) {
  38. window.atomicQuery({request: 'change',
  39. persistent: false,
  40. onSuccess: function(response) { },
  41. onFailure: function(error_code, error_message) {console.log("Error on change")}});
  42. });
  43. }
  44. function loadCode(codeUrl)
  45. {
  46. var xmlHttp = new XMLHttpRequest();
  47. xmlHttp.onreadystatechange = function() {
  48. if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
  49. codeLoaded(xmlHttp.responseText);
  50. }
  51. xmlHttp.open("GET", codeUrl, true); // true for asynchronous
  52. xmlHttp.send(null);
  53. }
  54. </script>
  55. </body>
  56. </html>