MonacoEditor.html 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  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. <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  7. <title>Editor</title>
  8. <style type="text/css" media="screen">
  9. body {
  10. overflow: hidden;
  11. }
  12. #editor {
  13. margin: 0;
  14. position: absolute;
  15. top: 0;
  16. bottom: 0;
  17. left: 0;
  18. right: 0;
  19. }
  20. </style>
  21. </head>
  22. <body>
  23. <pre id="editor"></pre>
  24. <script src="./source/systemjs/system.js" type="text/javascript" charset="utf-8"></script>
  25. <script src="./source/monaco/vs/loader.js"></script>
  26. <script>
  27. System.config({
  28. "baseURL": "./",
  29. "defaultJSExtensions": true
  30. });
  31. // Load up the monaco editor and set it up to be able to be configured
  32. require.config({
  33. paths: {
  34. 'vs': 'source/monaco/vs'
  35. }
  36. });
  37. var setupEditor = new Promise((resolve, reject) => {
  38. require(['vs/editor/editor.main'], function() {
  39. var editor = monaco.editor.create(document.getElementById('editor'));
  40. // Make sure the editor resizes when the window resizes
  41. window.onresize = ()=>{
  42. editor.layout();
  43. }
  44. System.import('./source/editorCore/interop').then((module) => {
  45. module.default.getInstance().setEditor(editor);
  46. module.default.getInstance().editorLoaded();
  47. resolve(module.default);
  48. });
  49. });
  50. });
  51. // Functions exposed to the host editor. These
  52. // are hooked in here so that they are available immediately from the host
  53. // and when called will bring in the interop as a promise and call it once
  54. // it has been loaded
  55. function HOST_loadCode(url) {
  56. setupEditor.then((interop) => {
  57. interop.getInstance().loadCode(url);
  58. });
  59. }
  60. function HOST_saveCode() {
  61. setupEditor.then((interop) => {
  62. interop.getInstance().saveCode();
  63. });
  64. }
  65. function HOST_resourceRenamed(path, newPath) {
  66. setupEditor.then((interop) => {
  67. interop.getInstance().resourceRenamed(path, newPath);
  68. });
  69. }
  70. function HOST_resourceDeleted(path) {
  71. setupEditor.then((interop) => {
  72. interop.getInstance().resourceDeleted(path);
  73. });
  74. }
  75. function HOST_preferencesChanged(jsonProjectPrefs, jsonApplicationPrefs) {
  76. setupEditor.then((interop) => {
  77. let prefs = {
  78. projectPreferences: JSON.parse(jsonProjectPrefs),
  79. applicationPreferences: JSON.parse(jsonApplicationPrefs)
  80. };
  81. interop.getInstance().preferencesChanged(prefs);
  82. });
  83. }
  84. </script>
  85. </body>
  86. </html>