vue-element（五）高亮编辑器（Monaco）组件

参考

Vue项目中使用高亮编辑器（Monaco）: https://blog.csdn.net/breavo_raw/article/details/88080451

一、monaco安装和插件配置

安装monaco

npm install monaco-editor -S

安装monaco-editor-webpack-plugin

npm install monaco-editor-webpack-plugin -S

配置monaco-editor-webpack-plugin插件
在build/webpack.base.conf.js中新增如下配置

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

二、组件化

1.template

2. script

• 引入monaco和element-resize-detector

// 高亮编辑器
import * as monaco from 'monaco-editor'
// 监控组件尺寸变化
// 安装: npm install element-resize-detector --save
import elementResizeDetectorMaker from 'element-resize-detector'

• 组件参数定义

export default {
  props: {
    value: String, // 需要高亮的代码
    language: String, // 语言类型
    readOnly: Boolean // 是否自读，true：自读，不可修改；false：可以修改
  },
  data () {
    return {
      languages: ['apex', 'azcli', 'bat', 'clojure', 'coffee', 'cpp', 'csharp', 'csp', 'css', 'dockerfile', 'fsharp', 'go', 'handlebars', 'html', 'ini', 'java', 'javascript', 'json', 'less', 'lua', 'markdown', 'msdax', 'mysql', 'objective', 'perl', 'pgsql', 'php', 'postiats', 'powerquery', 'powershell', 'pug', 'python', 'r', 'razor', 'redis', 'redshift', 'ruby', 'rust', 'sb', 'scheme', 'scss', 'shell', 'solidity', 'sql', 'st', 'swift', 'typescript', 'vb', 'xml', 'yaml'],
      themes: ['vs', 'hc-black', 'vs-dark'], 
      theme: 'vs-dark', // 编辑器风格
      editorOptions: {
        selectOnLineNumbers: true,
        roundedSelection: false,
        readOnly: this.readOnly, // 只读
        cursorStyle: 'line', // 光标样式
        automaticLayout: false, // 自动布局
        glyphMargin: true, // 字形边缘
        useTabStops: false,
        fontSize: 28, // 字体大小
        autoIndent: false // 自动布局
      }
    }
  }
}

• 新建初始化方法

methods: {
  initEditor () {
      let self = this
      self.$refs.editor.innerHTML = ''
      self.monacoEditor = monaco.editor.create(self.$refs.editor, {
        value: self.currentValue,
        language: self.language,
        theme: self.theme, // vs, hc-black, or vs-dark
        readOnly: self.readOnly,
        editorOptions: self.editorOptions
      })
      self.$emit('onMounted', self.monacoEditor)// 编辑器创建完成回调
      self.monacoEditor.onDidChangeModelContent(function (event) { // 编辑器内容changge事件
        self.currentValue = self.monacoEditor.getValue()
        self.$emit('onCodeChange', self.monacoEditor.getValue(), event)
      })
      // 自定义键盘事件
      self.monacoEditor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S, function () {
        self.$emit('onCommit', self.monacoEditor.getValue(), self.monacoEditor)
      })
      self.monacoEditor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyMod.Alt | monaco.KeyCode.KEY_S, function () {
        // 自定义快捷操作
      })
    }
}

• 数据双向绑定

  computed: {
    // v-model 实现数据双向绑定
    currentValue: {
      get: function () {
        return this.value
      },
      set: function (value) {
        this.$emit('input', value)
      }
    }
  }

• 挂载时初始化以及父元素尺寸监控

  mounted () {
    this.initEditor()
    let erd = elementResizeDetectorMaker()
    let that = this
    erd.listenTo(that.$refs.editorContainer, function (el) {
      that.$nextTick(function () {
        // 使echarts尺寸重置
        that.initEditor()
      })
    })
  }

• 设置配置修改的方法

methods: {
    changeLanguage (val) {
      monaco.editor.setModelLanguage(this.monacoEditor.getModel(), val)
    },
    changeTheme (val) {
      monaco.editor.setTheme(val)
    },
    changeOptions () {
      // 修改配置
      this.monacoEditor.updateOptions(this.editorOptions)
    }
}

• 样式设置，尺寸跟随父元素变化

  .editor-container {
    height: 100%;
    position: relative;
  }
  .monaco-editor{
    height: 100%;
    position: relative;
  }

三、使用

import WbEditor from '@/components/wbEditor'
export default {
  name: 'index',
  components: {WbEditor},
  data () {
    return {
      value: 'map(lambda x, y: x + y, [1, 3, 5, 7, 9], [2, 4, 6, 8, 10])'
    }
  }
}

四、效果