文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用简单的JavaScript或jQuery在浏览器中初始化Microsoft摩纳哥编辑器

问如何使用简单的JavaScript或jQuery在浏览器中初始化Microsoft摩纳哥编辑器
EN

Stack Overflow用户

提问于 2019-07-16 00:07:10

回答 2查看 11.9K关注 0票数 14

我正在尝试使用微软摩纳哥初始化文本/代码编辑器。我想使用、核心、JavaScript、甚至jQuery，但是没有NodeJS依赖性。这有可能吗？

一些相关的例子：

获取摩纳哥编辑器的值

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>

有人能帮忙吗？

javascript

jquery

monaco-editor

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-07-16 14:08:33

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

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

摩纳哥-编辑 是用JavaScript (TypeScript编译成JavaScript)编写的，不使用jQuery。节点在您所描述的上下文中并不真正相关。

如果这有帮助，请告诉我。

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>

票数 25

Stack Overflow用户

发布于 2022-08-14 03:23:55

您也可以将编辑器添加为简单的js代码，而不需要js。

从摩纳哥-编辑下载回购
构建摩纳哥-浏览器编辑器

摩纳哥-编辑& npm运行建设-网站

您可以从构建后创建的网站/节点_模块/摩纳哥编辑器文件夹中复制模块，

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/57048510

复制

相似问题

问如何使用简单的JavaScript或jQuery在浏览器中初始化Microsoft摩纳哥编辑器
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用简单的JavaScript或jQuery在浏览器中初始化Microsoft摩纳哥编辑器EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用简单的JavaScript或jQuery在浏览器中初始化Microsoft摩纳哥编辑器
EN