在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文档是真难看啊，我也是各类搜索实现的相关功能·····