详解Monaco-Editor插件在Vue2.X中使用

---

前言

提示：以下是本篇文章正文内容，下面案例可供参考

一、Monaco-Editor是什么？

Monaco-Editor 通俗讲就是在线的vscode。方便远程工作人员在线开发。

二、使用步骤

1.下载包

npm install monaco-editor@^0.23.0 --save-dev

npm install monaco-editor-webpack-plugin@^3.0.1 --save-dev

2.新建monacoeditor.vue文件

<template>
  <div
    ref="container"
    class="monaco-editor"
    style="height:500px;margin-top:70px"
  ></div>
</template>

<script>
import * as monaco from 'monaco-editor'


export default {
  name: 'AcMonaco',
  inject: ['reload'],
  props: {
    opts: {
      type: Object,
      default () {
        return {}
      }
    },
    height: {
      type: Number,
      default: 300
    },
    isDiff: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      // 主要配置
      defaultOpts: {
        value: '', // 编辑器的值
        theme: 'vs-dark', // 编辑器主题：vs, hc-black, or vs-dark，更多选择详见官网
        roundedSelection: true, // 右侧不显示编辑器预览框
        autoIndent: true // 自动缩进
      },
      // 编辑器对象
      monacoEditor: {},
      oldValue: '',
      newValue: ''
    }
  },
  watch: {
    opts: {
      handler () {
        this.reload()
      },
      deep: true
    }
  },
  mounted () {
    this.init()
    this.shuru()
  },
  methods: {
    init () {
      // 初始化container的内容，销毁之前生成的编辑器
      this.$refs.container.innerHTML = ''
      // 生成编辑器配置
      let editorOptions = Object.assign(this.defaultOpts, this.opts)
      if (!this.isDiff) {
        // 初始化编辑器实例
        this.monacoEditor = monaco.editor.create(this.$refs.container, editorOptions)
        // 编辑器内容发生改变时触发
        this.monacoEditor.onDidChangeModelContent(() => {
          this.$emit('change', this.monacoEditor.getValue())
        })
      } else {
        this.oldValue = this.readLocalFile('./testCode1.js');
        this.newValue = this.readLocalFile('./testCode2.js');
        editorOptions.readOnly = true;
        editorOptions.language = 'javascript'
        // editorOptions.inlineHints = true;
        // 初始化编辑器实例
        this.monacoDiffInstance = monaco.editor.createDiffEditor(this.$refs['container'], editorOptions)
        this.monacoDiffInstance.setModel({
          original: monaco.editor.createModel(this.oldValue, editorOptions.language),
          modified: monaco.editor.createModel(this.newValue, editorOptions.language)
        })

      }
    },
    upDateDiff (val) {
      this.monacoDiffInstance.updateOptions({
        renderSideBySide: !val
      });
    },
    // 供父组件调用手动获取值
    getVal () {
      return this.monacoEditor.getValue()
    },
    // 读取本地文件函数
    readLocalFile (fileUrl) {
      let xhr = null
      if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest()
      } else {
        // eslint-disable-next-line
        xhr = new ActiveXObject('Microsoft.XMLHTTP')
      }
      const okStatus = document.location.protocol === 'file' ? 0 : 200
      xhr.open('GET', fileUrl, false)
      xhr.overrideMimeType('text/html;charset=utf-8')
      xhr.send(null)
      return (xhr.status === okStatus ? xhr.responseText : null)
    },
    shuru(){
        this.monacoEditor.setValue('hy')
    }
  }
}
</script>

配置plugins

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin') // 引入
 plugins: [
      new webpack.NormalModuleReplacementPlugin(/msun-lib-ui[/\\]lib[/\\]styles[/\\](.*)\.css/),
      new MonacoWebpackPlugin()
    ]

All

const webpack = require('webpack');

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin') // 引入


module.exports = {
    plugins: [
      new webpack.NormalModuleReplacementPlugin(/msun-lib-ui[/\\]lib[/\\]styles[/\\](.*)\.css/),
      new MonacoWebpackPlugin()
    ]
  }；

新建 index.vue

---

引入monacoeditor.vue,所以文件名字不要起错

<template>
  <div>
    <div id="app">
      <img
        alt="Vue logo"
        style="width: 200px; height: 200px"
        src="./assets/logo.png"
      />
      <h1>Easy-CodeEditor</h1>
      <div style="position: relative; height: 40px; line-height: 40px">
        <div style="position: absolute; left: 0; top: 0">
          样式风格：
          <el-select
            v-model="opts.theme"
            placeholder="请选择"
            size="mini"
            @change="changeTheme"
          >
            <el-option
              v-for="item in sets.theme"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
          <el-switch
            style="margin: 10px"
            v-model="isDiff"
            active-text="开启代码比较"
            inactive-text="关闭代码比较"
            @change="reload"
          >
          </el-switch>
        </div>
        <el-checkbox
          v-model="inlineDiff"
          @change="inlineDiffChange"
          v-if="isDiff"
          >行内比较</el-checkbox
        >
        <div v-if="!isDiff">
          语言：
          <el-select
            v-model="opts.language"
            placeholder="请选择"
            size="mini"
            @change="changeLanguage"
          >
            <el-option
              v-for="item in sets.language"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
          <el-button
            style="margin: 0 10px"
            type="primary"
            size="mini"
            @click="getValue"
            >获取内容</el-button
          >
        </div>
      </div>
    </div>
    <div>
      <!--调用子组件-->
      <monaco
        ref="monaco"
        v-if="containerReload"
        :opts="opts"
        @change="changeValue"
        :isDiff="isDiff"
        :height="600"
      ></monaco>
    </div>
  </div>
</template>

<script>


import monaco from './components/monacoeditor'
export default {
  components: { monaco },
  data () {
    return {
      sets: {
        language: {
          'apex': 'apex',
          'azcli': 'azcli',
          'bat': 'bat',
          'c': 'c',
          'clojure': 'clojure',
          'coffeescript': 'coffeescript',
          'cpp': 'cpp',
          'csharp': 'csharp',
          'csp': 'csp',
          'css': 'css',
          'dockerfile': 'dockerfile',
          'fsharp': 'fsharp',
          'go': 'go',
          'graphql': 'graphql',
          'handlebars': 'handlebars',
          'html': 'html',
          'ini': 'ini',
          'java': 'java',
          'javascript': 'javascript',
          'json': 'json',
          'kotlin': 'kotlin',
          'less': 'less',
          'lua': 'lua',
          'markdown': 'markdown',
          'msdax': 'msdax',
          'mysql': 'mysql',
          'objective-c': 'objective-c',
          'pascal': 'pascal',
          'perl': 'perl',
          'pgsql': 'pgsql',
          'php': 'php',
          'plaintext': 'plaintext',
          'postiats': 'postiats',
          'powerquery': 'powerquery',
          'powershell': 'powershell',
          'pug': 'pug',
          'python': 'python',
          'r': 'r',
          'razor': 'razor',
          'redis': 'redis',
          'redshift': 'redshift',
          'ruby': 'ruby',
          'rust': 'rust',
          'sb': 'sb',
          'scheme': 'scheme',
          'scss': 'scss',
          'shell': 'shell',
          'sol': 'sol',
          'sql': 'sql',
          'st': 'st',
          'swift': 'swift',
          'tcl': 'tcl',
          'typescript': 'typescript',
          'vb': 'vb',
          'xml': 'xml',
          'yaml': 'yaml'
        },
        theme: {
          'vs': 'vs',
          'vs-dark': 'vs-dark',
          'hc-black': 'hc-black'
        }
      },
      opts: {
        value: '',
        readOnly: false, // 是否可编辑
        language: 'javascript', // 语言类型
        theme: 'vs-dark' // 编辑器主题
      },
      isDiff: true,
      inlineDiff: false,
      containerReload: true
    }
  },
  provide () {
    return {
      reload: this.reload
    }
  },
  // 
  mounted () {
    // 创建一个新的xhr对象
  },
  methods: {
    changeLanguage (val) {
      this.opts.language = val
    },
    changeTheme (val) {
      this.opts.theme = val
    },
    // 手动获取值
    getValue () {
      this.$message.info('代码已输出至控制台');
      console.log('输出代码:' + this.$refs.monaco.getVal())
    },
    // 内容改变自动获取值
    changeValue (val) {
      console.log(val)
    },
    async reload () {
      this.containerReload = false
      await this.$nextTick()
      this.containerReload = true
    },
    inlineDiffChange (val) {
      this.$refs.monaco.upDateDiff(val)
    }
  }
}
</script>

<style>
</style>

---

样图如下

总结

提示此文章转载并总结于节省钱作者。