Vue引入Monaco Editor

Monaco Editor 是微软开源的基于 VS Code 的代码编辑器,运行在浏览器环境中。编辑器提供代码提示,智能建议等功能。供开发人员远程更方便的编写代码。

在做可视化平台的时候,之前用的是CodeMirror,但是发现功能相对来说还是没有Monaco Editor功能强大,毕竟VS Code是多么流行和强大,大家是有目共睹的,于是就有了替换编辑器的理由。

安装

npm install monaco-editor@0.21.2 --save
npm install monaco-editor-webpack-plugin --save //这个必须安装,不然起不来

配置

webpack.base.conf.js:

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
...
 
module.exports = {
  ...
  plugins: [
    ...
    new MonacoWebpackPlugin()
  ]
};

或者
vue.config.js

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
...
chainWebpack: config => {
  config.plugin('monaco-editor').use(MonacoWebpackPlugin, [
    {
      // Languages are loaded on demand at runtime
      languages: ['javascript', 'html', 'css', 'scss']
    }
  ])
}

封装

代码比较简单,就不过多解释了。

<template>
  <div class="monaco-editor" ref="editor" :style="style"></div>
</template>

<script>
//全部引入
import * as monaco from 'monaco-editor'
//按需引入
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
import 'monaco-editor/esm/vs/basic-languages/html/html.contribution'
import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution'
import 'monaco-editor/esm/vs/basic-languages/css/css.contribution'
import 'monaco-editor/esm/vs/basic-languages/scss/scss.contribution'
import 'monaco-editor/esm/vs/editor/contrib/find/findController.js'
export default {
  name: 'monaco-editor',
  //引入组件
  props: {
    width: {
      type: [String, Number],
      default: '100%'
    },
    height: {
      type: [String, Number],
      default: '100%'
    },
    code: {
      type: String,
      default: '// code \n'
    },
    theme: {
      type: String,
      default: 'vs-dark' // vs, hc-black
    },
    language: {
      type: String,
      default: 'html'
    },
    options: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    //这里存放数据
    return {
      editor: null, //文本编辑器
      codeOptions: {
        value: this.code, //编辑器初始显示文字
        language: this.language, //语言支持自行查阅demo
        readOnly: true, //只读
        scrollBeyondLastLine: false, //底部代码不留白
        theme: this.theme, //官方自带三种主题vs, hc-black, or vs-dark
        roundedSelection: true,
        ...this.option
      }
    };
  },
  //监听属性 类似于data概念
  computed: {
    style() {
      const { width, height } = this;
      const fixedWidth = /(%|px)/.test(width) ? width : width + 'px';
      const fixedHeight = /(%|px)/.test(height) ? height : height + 'px';
      return {
        width: fixedWidth,
        height: fixedHeight
      };
    }
  },
  //监控data中的数据变化
  watch: {
    code: {
      handler(newName) {
        this.setValue(newName);
      }
    }
  },
  //方法集合
  methods: {
    initEditor() {
      // 初始化编辑器,确保dom已经渲染
      this.editor = monaco.editor.create(this.$refs.editor, this.codeOptions);
    },
    getValue() {
      this.editor.getValue(); //获取编辑器中的文本
    },
    setValue(val) {
      this.editor.setValue(val); //设置编辑器中的文本
    }
  },
  //生命周期 - 挂载完成(可以访问DOM元素)
  mounted() {
    this.initEditor();
  },
  //生命周期 - 销毁完成
  destroyed() {
    this.editor.dispose();
  }
};
</script>

使用就不过多解释了,至于更多方法,就得去查下官方文档了。

仅有一条评论

  1. 回复

    自从微软免费VS Code,大批程序员的福利

添加新评论