在vue项目中使用monaco-editor

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);

 

 

PS: 本人基于monaco-editor实现了一个针对sql语言的自定义提示、以及对函数的hover提示。了解monaco-editor的控制行数字不显示、右侧小代码区域不显示、滚动不显示等样式问题。大家有问题欢迎互相交流。

monaco-ediotr文档是真难看啊，我也是各种搜索实现的相关功能·····