在浏览器中使用简单的JavaScript或jQuery如何初始化Microsoft Monaco编辑器

Question

在浏览器中使用简单的JavaScript或jQuery如何初始化Microsoft Monaco编辑器

javascriptjquerymonaco-editor

18

我正在尝试使用Microsoft Monaco初始化文本/代码编辑器。我想使用核心JavaScript甚至jQuery，但不依赖于NodeJS。这是否可行？

以下是一些相关示例：

获取Monaco Editor的值

在jsFiddle中的示例

我有以下代码，但它不起作用：

    <!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body>

<div id="container" style="width:800px;height:600px;border:1px solid grey"></div>

<script type="text/javascript" src="https://microsoft.github.io/monaco-editor/node_modules/monaco-editor/min/vs/loader.js"></script>


<script>
require.config({ paths: { 'vs': 'monaco-editor/min/vs' }});
require(['vs/editor/editor.main'], function() {
    window.editor = monaco.editor.create(document.getElementById('container'),                 {
        value: [
            'function x() {',
            '\tconsole.log("Hello world!");',
            '}'
        ].join('\n'),
        language: 'javascript'
    });
});

function save() {
   // get the value of the data
   var value = window.editor.getValue()
   saveValueSomewhere(value);     
}


</script>
</body>
</html>

有人能帮忙吗？

- Geocrafter

2个回答

2

您可以将编辑器作为简单的js代码添加到项目中，而不需要使用requirejs。

以下是需要翻译的内容：

从monaco-editor下载代码库。
为浏览器构建monaco-editor。

在终端输入命令：cd monaco-editor && npm run build-website

您可以从构建后创建的website/node_modules/monaco-editor文件夹中复制模块。

<!DOCTYPE html>
<html>
  <head>
      <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
      <link
          rel="stylesheet"
          data-name="vs/editor/editor.main"
          href="../node_modules/monaco-editor/min/vs/editor/editor.main.css"
      />
  </head>
  <body>
      <h2>Monaco Editor Sync Loading Sample</h2>
      <div id="container" style="width: 800px; height: 600px; border: 1px solid grey"></div>

      <script>
          var require = { paths: { vs: '../node_modules/monaco-editor/min/vs' } };
      </script>
      <script src="../node_modules/monaco-editor/min/vs/loader.js"></script>
      <script src="../node_modules/monaco-editor/min/vs/editor/editor.main.nls.js"></script>
      <script src="../node_modules/monaco-editor/min/vs/editor/editor.main.js"></script>

      <script>
          var editor = monaco.editor.create(document.getElementById('container'), {
              value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
              language: 'javascript'
          });
      </script>
  </body>
</html>

- Madan Ram

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Peter · Accepted Answer

我在下面添加了一个可用的示例。关于你的另一个问题：

我想使用核心JavaScript甚至jQuery，但不依赖NodeJS。这可能吗？

monaco-editor 是用JavaScript编写的（TypeScript编译成JavaScript），并且不使用jQuery。在您描述的情况下，Node实际上并不相关。

请告诉我这是否有所帮助。

require.config({ paths: { 'vs': 'https://unpkg.com/monaco-editor@latest/min/vs' }});
window.MonacoEnvironment = { getWorkerUrl: () => proxy };

let proxy = URL.createObjectURL(new Blob([`
 self.MonacoEnvironment = {
  baseUrl: 'https://unpkg.com/monaco-editor@latest/min/'
 };
 importScripts('https://unpkg.com/monaco-editor@latest/min/vs/base/worker/workerMain.js');
`], { type: 'text/javascript' }));

require(["vs/editor/editor.main"], function () {
 let editor = monaco.editor.create(document.getElementById('container'), {
  value: [
   'function x() {',
   '\tconsole.log("Hello world!");',
   '}'
  ].join('\n'),
  language: 'javascript',
  theme: 'vs-dark'
 });
});

html, body, #container {
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 overflow: hidden;
}

<script src="https://unpkg.com/monaco-editor@latest/min/vs/loader.js"></script>
<div id="container"></div>