在vue项目里使用Monaco Editor

项目中本来使用的是codemirror，但是index.html中需要引入很多js和css，使用起来感觉不太方便（可能是水平有限，用的不对）

1，安装monaco-editor和monaco-editor-webpack-plugin

npm install monaco-editor monaco-editor-webpack-plugin

2，引入项目

参照官网GitHub（https://github.com/Microsoft/monaco-editor/blob/master/docs/integrate-esm.md），

采用的是如下配置

1》webpack.config.js

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
const path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.js'
  },
  module: {
    rules: [{
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    }]
  },
  plugins: [
    new MonacoWebpackPlugin({
      output:'./static/js/monaco-editor',
      languages:['javascript','css']
    })
  ]
};

具体配置见http://npm.taobao.org/package/monaco-editor-webpack-plugin

2》

import * as monaco from 'monaco-editor';

this.editor = monaco.editor.create(document.getElementById('container'), {
  value: '',
  language: 'javascript'
  theme: 'vs-dark',
  formatOnPaste: true,
  scrollbar:{
    verticalScrollbarSize: 5
  }
});

通过this.editor.setValue(value)设置内容

      this.editor.getValue()获取内容

通过monaco.editor.setTheme()来设置主题，官方提供有3种，‘vs’（默认）, 'vs-dark', 'hc-dark'。 也可以通过monaco.editor.defineTheme(themeName， themeData)来自定义主题，详见API文档： https://microsoft.github.io/monaco-editor/api/index.html