gpt4 book ai didi

javascript - 让 Monaco 与 Vuejs 和 Electron 一起工作

转载 作者:搜寻专家 更新时间:2023-10-30 22:20:42 25 4
gpt4 key购买 nike

我有兴趣使用 Monaco编辑在Vue.js支持Electron项目。

到目前为止:

Microsoft 提供了一个 Electron Sample (我已经运行并正常工作)

有多种vue.js npm repos对于 monaco - 然而它们中没有一个似乎开箱即用地完全支持 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 变量。我相信如果我能克服这一点,其他一切都会变得简单。

Electron 常见问题解答提到了一些关于此的内容(我认为):I can not sue jQuery/RequireJS/Meteor/AngularJS in Electron

示例代码

我在 GitHub 上放了一个示例项目 https://github.com/jeeftor/Vue-Monaco-Electron “有问题的”组件在 ./src/renderer/components/Monaco.vue

总结

如何让这个 Monaco Editor 正确加载到将在 electron 中运行的 Vue.js 组件中?

感谢您提供的任何帮助。

最佳答案

我做的几乎一样,只是没有额外的 vue-monaco 组件。经过一番努力,我可以解决问题:

function loadMonacoEditor () {
const nodeRequire = global.require

const loaderScript = document.createElement('script')

loaderScript.onload = () => {
const amdRequire = global.require
global.require = nodeRequire

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 () {
this.monaco.editor.create(document.getElementById('container'), {
value: [
'function x() {',
'\tconsole.log("Hello world!");',
'}'
].join('\n'),
language: 'javascript'
})
})
}

loaderScript.setAttribute('src', '../node_modules/monaco-editor/min/vs/loader.js')
document.body.appendChild(loaderScript)
}

我刚刚拿了 electron-amd 样本并稍微调整了一下。我在组件的创建函数中调用了 loadMonacoEditor 函数。

为了不获取 Not allowed to load local resource: file:///C:/.../node_modules/monaco-editor/min/vs/editor/editor.main.css问题,你还得设置

webPreferences: {
webSecurity: false
}

在您的 BrowserWindow 实例中。

关于javascript - 让 Monaco 与 Vuejs 和 Electron 一起工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49774331/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com