[英]How can I integrate Monaco with Vue.js?
I created a fresh vue application and ran npm install -s monaco-editor
, then I changed my App.vue to look like this:我创建了一个新的 vue 应用程序并运行
npm install -s monaco-editor
,然后我将 App.vue 更改为如下所示:
<template>
<div id="app" style="width: 500px; height: 500px;">
<div ref="editor" style="width: 500px; height: 500px;"></div>
</div>
</template>
<script>
import * as monaco from 'monaco-editor';
export default {
name: 'app',
async mounted() {
const el = this.$refs.editor;
this.editor = monaco.editor.create(el, {
value: "console.log('hello world');",
language: 'javascript',
});
},
};
</script>
When I run the application, I see the following in the JavaScript console:当我运行应用程序时,我在 JavaScript 控制台中看到以下内容:
Could not create web worker(s). Falling back to loading web worker code in main thread, which might cause UI freezes. Please see https://github.com/Microsoft/monaco-editor#faq simpleWorker.js:31
You must define a function MonacoEnvironment.getWorkerUrl or MonacoEnvironment.getWorker 2 simpleWorker.js:33
Error: "Unexpected usage"
loadForeignModule editorSimpleWorker.js:494
_foreignProxy webWorker.js:54
languageFeatures.js:209
_doValidate languageFeatures.js:209
I've tried searching for the error but most threads seem to focus on accessing files via file:/// which I am not doing (I'm accessing the node webserver).我已经尝试搜索错误,但大多数线程似乎都专注于通过 file:/// 访问文件,我没有这样做(我正在访问节点网络服务器)。
Additionally, the editor does not render correctly unless height is explicitly specified - I don't think that's expected behavior.此外,除非明确指定高度,否则编辑器无法正确呈现 - 我认为这不是预期的行为。
How can I make monaco-editor work correctly in Vue?如何让 monaco-editor 在 Vue 中正常工作? I would like to avoid unofficial third-party wrappers such as https://github.com/egoist/vue-monaco if possible for support reasons.
如果可能,出于支持原因,我想避免使用非官方的第三方包装器,例如https://github.com/egoist/vue-monaco 。
Node/Vue newbie, so please be nice! Node/Vue 新手,请善待!
Monaco acceses workers by file://
by default, but it is not work in web. Monaco 默认通过
file://
访问 worker,但在 web 中不起作用。
You should replace it with http://
by setting MonacoEnviorment manually or using Monaco Webpack Plugin .您应该通过手动设置 MonacoEnviorment 或使用Monaco Webpack Plugin将其替换为
http://
。
Refer to the official docs参考官方文档
Try specifying the monaco webpack
plugin in your webpack config:尝试在 webpack 配置中指定 monaco
webpack
插件:
const monacoWebpackPlugin = require('monaco-editor/webpack')
...
plugins: [
new monacoWebpackPlugin()
]
Or install monaco-editor-webpack-plugin and try using that instead:或者安装monaco-editor-webpack-plugin并尝试使用它:
const monacoWebpackPlugin = require('monaco-editor-webpack-plugin')
...
plugins: [
new monacoWebpackPlugin()
]
As for the height
and width
, you can either listen to the window resize and call editor.layout()
or calculate the container size and pass the size to the editor.layout()
method (1) .至于
height
和width
,您可以听 window 调整大小并调用editor.layout()
或计算容器大小并将大小传递给editor.layout()
方法(1) 。
Or you can try something from other posted answers in similar threads, for example:或者,您可以尝试类似主题中其他已发布答案的内容,例如:
<div ref="editor" class="monaco-editor"></div>
.monaco-editor {
height: 100vh;
overflow: hidden;
}
body {
margin: 0;
padding: 0;
}
Or something like this:或者是这样的:
.monaco-editor {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
max-height: 100% !important;
margin: 0;
padding: 0;
overflow: hidden;
}
I have found this for vue.js我为 vue.js 找到了这个
https://www.npmjs.com/package/monaco-editor-vue https://www.npmjs.com/package/monaco-editor-vue
this might help you这可能会帮助你
You need to match the Vue CLI version with monaco-editor and monaco-editor-webpack-plugin您需要将Vue CLI 版本与monaco-editor和monaco-editor-webpack-plugin 匹配
Vue2: Because vue2 is using webpack 4, we need to install: Vue2:因为vue2使用的是webpack 4,所以我们需要安装:
npm i monaco-editor@0.30.1
npm i monaco-editor-webpack-plugin@6.0.0
Vue3 (if you have Vue CLI 5 probably it is based on webpack 5. If CLI 4 solution is the same like for Vue2) Vue3 (如果您有 Vue CLI 5,它可能基于 webpack 5。如果 CLI 4 解决方案与 Vue2 相同)
npm i monaco-editor (> = 0.31. *)
npm i monaco-editor-webpack-plugin 7.0.0
vue.config.js: vue.config.js:
const monacoWebpackPlugin = require("monaco-editor-webpack-plugin");
module.exports = {
configureWebpack: {
plugins: [new monacoWebpackPlugin()],
},
};
Source: https://www.npmjs.com/package/monaco-editor-webpack-plugin https://github.com/microsoft/monaco-editor/issues/2903来源: https://www.npmjs.com/package/monaco-editor-webpack-plugin https://github.com/microsoft/monaco-editor/issues/2903
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.