MonacoEditor.html 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  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. // Need to override how Monaco web workers are getting resolved since for some reason they can't get located properly
  38. // inside the Monaco editor code
  39. window.MonacoEnvironment = {
  40. getWorkerUrl: function(workerId, label) {
  41. return 'source/monaco/vs/base/worker/' + workerId;
  42. }
  43. };
  44. var setupEditor = new Promise((resolve, reject) => {
  45. require(['vs/editor/editor.main'], function() {
  46. var editor = monaco.editor.create(document.getElementById('editor'));
  47. // Make sure the editor resizes when the window resizes
  48. window.onresize = ()=>{
  49. editor.layout();
  50. }
  51. System.import('./source/editorCore/interop').then((module) => {
  52. module.default.getInstance().setEditor(editor);
  53. module.default.getInstance().editorLoaded();
  54. resolve(module.default);
  55. });
  56. });
  57. });
  58. // Functions exposed to the host editor. These
  59. // are hooked in here so that they are available immediately from the host
  60. // and when called will bring in the interop as a promise and call it once
  61. // it has been loaded
  62. function HOST_loadCode(url) {
  63. setupEditor.then((interop) => {
  64. interop.getInstance().loadCode(url);
  65. });
  66. }
  67. function HOST_saveCode() {
  68. setupEditor.then((interop) => {
  69. interop.getInstance().saveCode();
  70. });
  71. }
  72. function HOST_resourceRenamed(path, newPath) {
  73. setupEditor.then((interop) => {
  74. interop.getInstance().resourceRenamed(path, newPath);
  75. });
  76. }
  77. function HOST_resourceDeleted(path) {
  78. setupEditor.then((interop) => {
  79. interop.getInstance().resourceDeleted(path);
  80. });
  81. }
  82. function HOST_preferencesChanged(jsonProjectPrefs, jsonApplicationPrefs) {
  83. setupEditor.then((interop) => {
  84. let prefs = {
  85. projectPreferences: JSON.parse(jsonProjectPrefs),
  86. applicationPreferences: JSON.parse(jsonApplicationPrefs)
  87. };
  88. interop.getInstance().preferencesChanged(prefs);
  89. });
  90. }
  91. function HOST_invokeShortcut(shortcut) {
  92. setupEditor.then((interop) => {
  93. interop.getInstance().invokeShortcut(shortcut);
  94. });
  95. }
  96. function HOST_formatCode() {
  97. setupEditor.then((interop) => {
  98. interop.getInstance().formatCode();
  99. });
  100. }
  101. function HOST_gotoLineNumber(lineNumber) {
  102. setupEditor.then((interop) => {
  103. interop.getInstance().gotoLineNumber(lineNumber);
  104. });
  105. }
  106. function HOST_gotoTokenPos(tokenPosition) {
  107. setupEditor.then((interop) => {
  108. interop.getInstance().gotoPos(tokenPosition);
  109. });
  110. }
  111. </script>
  112. </body>
  113. </html>