[英]How to initialize Microsoft Monaco editor in a browser using simple JavaScript or jQuery
我正在尝试使用Microsoft Monaco初始化文本/代码编辑器。 我想使用核心 JavaScript甚至 jQuery 但没有 NodeJS 依赖。 那可能吗?
一些相关的例子:
我有以下代码,但它不起作用:
<!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>
任何人都可以帮忙吗?
我在下面添加了一个工作示例。 关于你的另一个问题:
我想使用核心 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>
您还可以将编辑器添加为简单的 js 代码,而无需 requirejs。
从monaco-editor下载 repo
为浏览器构建 monaco-editor
cd monaco-editor && npm 运行构建网站
<;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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.