MonacoEditor.html 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  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. // TODO: figure out how to make this be loaded in by the extension instead of being hard-coded in the html page
  31. meta: {
  32. './editorCore/modules/typescript.js': {
  33. format: 'global',
  34. exports: 'ts',
  35. }
  36. },
  37. map: {
  38. vs: 'source/monaco/vs'
  39. }
  40. });
  41. // Load up the monaco editor and set it up to be able to be configured
  42. require.config({
  43. paths: {
  44. 'vs': 'source/monaco/vs'
  45. }
  46. });
  47. /*window.MonacoEnvironment = {
  48. getWorkerUrl: function(workerId, label) {
  49. return 'source/monaco-editor-worker-loader-proxy.js';
  50. }
  51. };
  52. */
  53. var editorPromise = new Promise((resolve, reject) => {
  54. require(['vs/editor/editor.main'], function() {
  55. //var editor = monaco.editor.create(document.getElementById('editor'), {
  56. //language: 'typescript'
  57. //});
  58. var editor = monaco.editor.create(document.getElementById('editor'));
  59. System.import('./source/editorCore/interop').then((module) => {
  60. module.default.getInstance().setEditor(editor);
  61. resolve();
  62. });
  63. });
  64. });
  65. // Functions exposed to the host editor. These
  66. // are hooked in here so that they are available immediately from the host
  67. // and when called will bring in the interop as a promise and call it once
  68. // it has been loaded
  69. function HOST_loadCode(url) {
  70. editorPromise.then(() => {
  71. System.import('./source/editorCore/interop').then((module) => {
  72. module.default.getInstance().loadCode(url);
  73. });
  74. });
  75. }
  76. function HOST_saveCode() {
  77. System.import('./editorCore/interop').then((module) => {
  78. module.default.getInstance().saveCode();
  79. });
  80. }
  81. function HOST_resourceRenamed(path, newPath) {
  82. System.import('./editorCore/interop').then((module) => {
  83. module.default.getInstance().resourceRenamed(path, newPath);
  84. });
  85. }
  86. function HOST_resourceDeleted(path) {
  87. System.import('./editorCore/interop').then((module) => {
  88. module.default.getInstance().resourceDeleted(path);
  89. });
  90. }
  91. function HOST_preferencesChanged() {
  92. System.import('./editorCore/interop').then((module) => {
  93. module.default.getInstance().preferencesChanged();
  94. });
  95. }
  96. // System.import('./source/editorCore/interop').then((module) => {
  97. // module.default.getInstance().editorLoaded();
  98. // });
  99. </script>
  100. </body>
  101. </html>