我有兴趣在Vue.js支持的Electron项目中使用Monaco编辑器 .
到目前为止:
Microsoft提供Electron Sample(我运行正常)
摩纳哥有各种各样的东西 - 但它们似乎都没有完全支持Electron开箱即用 .
看起来最有希望的是vue-monaco,但我遇到了正确整合它的问题 .
AMD要求?
这是Microsoft示例中与Electron一起使用的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Monaco Editor!</title>
</head>
<body>
<h1>Monaco Editor in Electron!</h1>
<div id="container" style="width:500px;height:300px;border:1px solid #ccc"></div>
</body>
<script>
// Monaco uses a custom amd loader that overrides node's require.
// Keep a reference to node's require so we can restore it after executing the amd loader file.
var nodeRequire = global.require;
</script>
<script src="../node_modules/monaco-editor/min/vs/loader.js"></script>
<script>
// Save Monaco's amd require and restore Node's require
var amdRequire = global.require;
global.require = nodeRequire;
</script>
<script>
// require node modules before loader.js comes in
var path = require('path');
function uriFromPath(_path) {
var pathName = path.resolve(_path).replace(/\\/g, '/');
if (pathName.length > 0 && pathName.charAt(0) !== '/') {
pathName = '/' + pathName;
}
return encodeURI('file://' + pathName);
}
amdRequire.config({
baseUrl: uriFromPath(path.join(__dirname, '../node_modules/monaco-editor/min'))
});
// workaround monaco-css not understanding the environment
self.module = undefined;
// workaround monaco-typescript not understanding the environment
self.process.browser = true;
amdRequire(['vs/editor/editor.main'], function() {
var editor = monaco.editor.create(document.getElementById('container'), {
value: [
'function x() {',
'\tconsole.log("Hello world!");',
'}'
].join('\n'),
language: 'javascript'
});
});
</script>
</html>
我正在使用的模块允许这样的事情:
<template>
<monaco-editor :require="amdRequire" />
</template>
<script>
export default {
methods: {
amdRequire: window.amdRequire
// Or put this in `data`, doesn't really matter I guess
}
}
</script>
我似乎无法弄清楚如何获得Electon vue中定义的正确的 amdRequire
变量 . 我相信如果我能够征服这一切,其他一切都变得简单 .
电子常见问题提到了这个问题(我认为):I can not sue jQuery/RequireJS/Meteor/AngularJS in Electron
示例代码
我将一个示例项目放在GitHub https://github.com/jeeftor/Vue-Monaco-Electron上,"offending"组件位于./src/renderer/components/Monaco.vue
摘要
How can I get this Monaco Editor to load correctly inside of a Vue.js component that will be run inside electron?
谢谢你尽你所能的帮助 .
1 回答
我做的差不多,只是没有额外的vue-monaco组件 . 在经历了相当多的努力之后,我可以解决这个问题:
我刚刚拿了电子amd样品并调整了一下 . 我在组件的创建函数中调用了
loadMonacoEditor
函数 .为了不解决
Not allowed to load local resource: file:///C:/.../node_modules/monaco-editor/min/vs/editor/editor.main.css
问题,您还必须设置在你的
BrowserWindow
的实例中 .