Question

我正在尝试使用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>

有人可以帮忙吗？

Answer 1

我在下面添加了一个工作示例。关于您的其他问题：

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

monaco-editor IS 用JavaScript编写（TypeScript编译为JavaScript），并且不使用jQuery。在您所描述的上下文中，Node并不重要。

请告诉我这是否有帮助。

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

let proxy = URL.createObjectURL(new Blob([`
	self.MonacoEnvironment = {
		baseUrl: 'https://unpkg.com/monaco-editor@0.17.1/min/'
	};
	importScripts('https://unpkg.com/monaco-editor@0.17.1/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://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.17.1/min/vs/loader.js"></script>
<div id="container"></div>

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

1 个答案: