在vue项目中使用monaco-editor

Posted 2020-12-27 xhappyness

monaco-editor： https://github.com/Microsoft/monaco-editor

在ESM中的使用官方也有对应文档：https://github.com/Microsoft/monaco-editor/blob/master/docs/integrate-esm.md

现基于vue-cli2的项目做具体步骤说明：

1. 安装：

cnpm install monaco-editor --save

cnpm install monaco-editor-webpack-plugin --save-dev

 

2. 修改webpack.base.conf.js配置文件

const MonacoWebpackPlugin = require(‘monaco-editor-webpack-plugin‘);
...

module.exports = {
  ...
  plugins: [
    ...
    new MonacoWebpackPlugin()
  ]
};

 

3. 在对应的组件中使用

.vue

<template>
  <div>
     <div id="container" ></div>
  </div>
</template>

.ts

import { Vue, Component, Watch } from "vue-property-decorator"
import * as monaco from ‘monaco-editor‘;

@Component({

})

export default class Parent extends Vue {
    ...
    value = ‘初始sql语句‘；
    monacoEditor;
    mounted() {
          this.monacoEditor = monaco.editor.create(document.getElementById(‘container‘), {
                value: this.value,
                language: ‘sql‘
            });
    }
}

注意：要等container渲染成功才能monaco.editor.create

 

-------------------------------------------------------------------------------------------- 其他问题 -----------------------------------------------------------------------------------------

 

1. 怎么用代码方式改变this.monacoEditor的value值？

答： this.monacoEditor.setValue(newValue);