在vue项目里使用Monaco Editor

你的名字 2022-04-23 05:54 1871阅读 0赞

项目中本来使用的是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][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][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][https_microsoft.github.io_monaco-editor_api_index.html]

[https_github.com_Microsoft_monaco-editor_blob_master_docs_integrate-esm.md]: https://github.com/Microsoft/monaco-editor/blob/master/docs/integrate-esm.md
[http_npm.taobao.org_package_monaco-editor-webpack-plugin]: http://npm.taobao.org/package/monaco-editor-webpack-plugin
[https_microsoft.github.io_monaco-editor_api_index.html]: https://microsoft.github.io/monaco-editor/api/index.html