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

Question

I am trying to initialize a text/code editor using Microsoft Monaco .我正在尝试使用Microsoft Monaco初始化文本/代码编辑器。 I would like to use core JavaScript or even jQuery but no NodeJS dependency .我想使用核心 JavaScript甚至 jQuery 但没有 NodeJS 依赖。 Is that possible?那可能吗？

Some relevant examples:一些相关的例子：

Get the value of Monaco Editor 获取摩纳哥编辑器的价值

Example in jsFiddle jsFiddle 中的示例

I have the following code, which is not working:我有以下代码，但它不起作用：

    <!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>

Can anyone help?任何人都可以帮忙吗？

Answer 1

I've added a working example below.我在下面添加了一个工作示例。 Regarding your other question:关于你的另一个问题：

I would like to use core JavaScript or even jQuery but no NodeJS dependency.我想使用核心 JavaScript 甚至 jQuery 但没有 NodeJS 依赖。 Is that possible?那可能吗？

monaco-editor IS written in JavaScript (TypeScript compiled to JavaScript) and does not use jQuery. monaco-editor是用 JavaScript 编写的（TypeScript 编译为 JavaScript），不使用 jQuery。 Node is not really relevant in the context you've described. Node 在您描述的上下文中并不真正相关。

Please let me know if this helps.请让我知道这可不可以帮你。

 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>

Answer 2

You can also add editor as simple js code without requirejs.您还可以将编辑器添加为简单的 js 代码，而无需 requirejs。

Download repo from monaco-editor从monaco-editor下载 repo
Build monaco-editor for browser为浏览器构建 monaco-editor

cd monaco-editor && npm run build-website cd monaco-editor && npm 运行构建网站

You can copy module from website/node_modules/monaco-editor folder created after build,您可以从构建后创建的 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>

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

问题描述

2 个解决方案

解决方案1
18 已采纳 2019-07-16 14:08:33

解决方案2
0 2022-08-14 03:23:55

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

问题描述

2 个解决方案

解决方案1 18 已采纳 2019-07-16 14:08:33

解决方案2 0 2022-08-14 03:23:55

解决方案1
18 已采纳 2019-07-16 14:08:33

解决方案2
0 2022-08-14 03:23:55