monaco-editor 在实际项目中的使用

monaco官方文档: https://microsoft.github.io/monaco-editor/api/index.html

安装：

npm install monaco-editor

// main.js中
import * as monaco from 'monaco-editor'
Vue.prototype.$monaco = monaco

vue组件：

<template>
  <div>
    <!-- sql container-->
    <div :id="id" class="sql-container"></div>
  </div>
</template>

<script>
import { format } from 'sql-formatter'
import { monacoOptions } from '../../config/config'
export default {
  name: 'ContentSql',
  props: {
    id: String
  },
  data () {
    return {
      // sql editor
      editor: null,
      // sql value
      value: ''
    }
  },
  computed: {
  },
  methods: {
    /** init */
    init () {
      this.createEditor()
    },

    /** create editor */
    createEditor () {
      // 我这里的id是从父组件传入的
      const el = document.getElementById(this.id)
      el.innerHTML = ''
      this.editor = this.$monaco.editor.create(el, {
        value: this.value,
        language: 'sql',
        // 其他配置写到配置文件中
        ...monacoOptions
      })

      // 监听编辑器content变化事件
      this.editor.onDidChangeModelContent(() => {
        ...
      })
    },

    /** sql格式化，我用的是sql-formatter */
    sqlFormat () {
      if (this.editor.getValue()) {
        let str = format(this.editor.getValue())
        // sql语句中插入变量是${test},但是格式化后变为$ { test },自动添加了空格
        // 所以在这使用正则匹配去除空格
        // ${}格式去空格
        str = str.replace(/\$ {([^}]*)}/g, function () {
          // replace方法第二个参数是函数时请关注arguments
          return '${' + arguments[1].trim() + '}'
        })
        
        // 编辑器设置值使用setValue
        this.editor.setValue(str)
      }
    },

    /** validate sql */
    validateSql () {
      return new Promise((resolve, reject) => {
        // 获取编辑器中的sql
        const sql = this.editor.getValue()
        // 获取编辑器中选中的sql
        const selectSql = this.editor.getModel().getValueInRange(this.editor.getSelection())
        if (!sql) {
          reject(new Error('未输入sql语句'))
        }
        resolve(selectSql || sql)
      })
    },
      
    /** 业务逻辑 */
    startSql () {
      this.validateSql().then((executeCode) => {
        // 在这获取执行sql...
      }, (err) => {
        this.$message.warning(err.message)
      })
    },

    /** editor layout */
    editorLayout () {
      const dom = document.getElementById(this.id)
      if (dom) {
        this.editor.layout({
          height: dom.clientHeight,
          width: dom.clientWidth
        })
      }
    },

    /** dispose */
    dispose () {
      if (this.editor) {
        this.editor.dispose()
        this.editor = null
      }
    }
  },
  watch: {
  },
  created () {
  },
  mounted () {
    // 在mounted中调用init
    this.init()
      
    // 监听resize事件,编辑器尺寸自适应
    window.addEventListener('resize', () => {
      this.editorLayout()
    })
  },
  beforeUpdate () {
  },
  updated () {
  },
  beforeDestroy () {
  }
}
</script>

<style lang="scss">
</style>

config.js

const monacoOptions = {
  theme: 'vs-dark', // vs，hc-black，vs-dark
  scrollBeyondLastLine: true,
  lineNumbers: 'on',
  overviewRulerBorder: true, // 滚动条的边框
  minimap: {
    enabled: false
  },
  scrollbar: {
    verticalScrollbarSize: 8,
    horizontalScrollbarSize: 8
  },
  editorOptions: {
    selectOnLineNumbers: true,
    roundedSelection: false,
    cursorStyle: 'line', // 光标样式
    automaticLayout: false, // 自动布局
    glyphMargin: true, // 字形边缘
    useTabStops: false,
    fontSize: 28, // 字体大小
    autoIndent: true // 自动缩进
  }
}

export {
  monacoOptions
}