Monaco编辑器与VueJS的集成
Monaco编辑器与VueJS的集成
提问于 2021-04-16 04:55:14
在使用VueJS时，按照将Monaco编辑器与Webpack集成的示例，shown here会失败。
webpack.config.js：
// eslint-disable-next-line @typescript-eslint/no-var-requires
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
// eslint-disable-next-line @typescript-eslint/no-var-requires
const path = require('path');
module.exports = {
entry: './index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.js'
},
module: {
rules: [{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}, {
test: /\.ttf$/,
use: ['file-loader']
}]
},
plugins: [
new MonacoWebpackPlugin()
]
};App.vue：
<template>
<div id="container"></div>
</template>
<script>
import * as monaco from 'monaco-editor'
export default {
mounted() {
monaco.editor.create(document.getElementById('container'), {
value: [
'function x() {',
'\tconsole.log("Hello world!");',
'}'
].join('\n'),
language: 'javascript'
});
},
};
</script>
<style>
#container{
height: 100vh;
overflow: hidden;
}
</style>此时将出现编辑器，并突出显示语法。但是，键入会导致抛出意外的用法错误。
我遗漏了哪一步？谢谢!
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-04-18 02:56:05
将https://github.com/suren-atoyan/monaco-loader与VueJS一起使用。\
import loader from '@monaco-editor/loader';
export default {
mounted() {
const wrapper = document.getElementById('editor')
loader.init().then(monaco => {
monaco.editor.create(wrapper, {
value: 'const name = "Peter"',
});
});
},
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67115931
复制相关文章
相似问题
腾讯云开发者
