index.html 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>Monaco Editor under nodewebkit</title>
  6. <!--link rel="stylesheet" data-name="vs/editor/editor.main" href="/node_modules/monaco-editor/min/vs/editor/editor.main.css"-->
  7. <!--link rel="stylesheet" type="text/css" href="/resources/css/flex-boxes.css"-->
  8. <style type="text/css">
  9. body,
  10. #container {
  11. margin: 0px;
  12. padding: 0px;
  13. box-sizing: border-box;
  14. }
  15. body {
  16. height: 100vh;
  17. overflow: hidden;
  18. }
  19. #container {
  20. overflow: hidden;
  21. height: 100vh;
  22. }
  23. .toolbox {
  24. height: 200px;
  25. }
  26. </style>
  27. </head>
  28. <body>
  29. <div id="container"></div>
  30. </body>
  31. <!--script>
  32. // Monaco uses a custom amd loader that over-rides node's require.
  33. // Keep a reference to node's require so we can restore it after executing the amd loader file.
  34. var nodeRequire1 = require;
  35. </script-->
  36. <!--script src="/node_modules/monaco-editor/min/vs/loader1.js"></script-->
  37. <script>
  38. var ERequire = require('../../node_modules/monaco-editor/min/vs/loader.js');
  39. //__dirname == root path of you application
  40. ERequire.config({
  41. baseUrl: 'file:///' + __dirname + '/node_modules/monaco-editor/min/'
  42. });
  43. // workaround monaco-css not understanding the environment
  44. self.module = undefined;
  45. // workaround monaco-typescript not understanding the environment
  46. self.process.browser = true;
  47. ERequire(['vs/editor/editor.main'], function () {
  48. var editor = monaco.editor.create(document.getElementById('container'), {
  49. value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
  50. language: 'javascript',
  51. theme: 'vs-dark'
  52. });
  53. });
  54. </script>
  55. </html>