在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文檔是真難看啊，我也是各種搜索實現的相關功能·····