将 Monaco 编辑器与 VueJS 集成

Question

使用 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>

编辑器出现并有语法高亮显示。但是，键入会引发意外的使用错误。

我错过了哪一步？谢谢！

Answer 1

在 VueJS 中使用 https://github.com/suren-atoyan/monaco-loader。\

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"',
      });
    });
  },
}

将 Monaco 编辑器与 VueJS 集成

Integrating Monaco Editor with VueJS

webpack

vue.js

monaco-editor