摘要：
divide=“容器”>；&书信电报；从“vue property decorator”导入*asmonacofrom'mono-editor'；monacoEditor；mounted（）｛this.monacoEditor=monaco.editor.create（document.getElementById（'container'），
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-dev2. 修改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文档是真难看啊，我也是各种搜索实现的相关功能·····