在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

 

 

 

你可能感兴趣的:(Vue,日常总结)