vue+monato-editor代码编辑高亮，sql变化监听（组件化）--＞优化具体语言引入

一、概念

Monaco Editor 是支持VS Code的代码编辑器 。描述代码编辑器功能的好页面在 这里。
它在 MIT 许可下获得许可，并支持 Edge、Chrome、Firefox、Safari 和 Opera。
移动浏览器或移动 Web 框架不支持 Monaco 编辑 器。
microsoft/monaco-editor代码仓库

二、使用步骤

• 引用依赖

package.json，
添加
"monaco-editor": "^0.21.2",
"monaco-editor-webpack-plugin": "^7.0.1",（简化使用）

• 找到webpack的配置文件（别弄到babel的配置文件里了，启动会造成babel的报错），我们这的webpack是分的多

const HtmlWebpackPlugin = require('html-webpack-plugin')
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
plugins: [
//HtmlWebpackPlugin别管，这里只是写例子，免得加这种数组不知道怎么加
        new HtmlWebpackPlugin({
            title: 'Message Bridge'
        }),
        new MonacoWebpackPlugin()
    ]
    

三、组件

<template>
  <div id="container" ></div> <!--宽高自行设定 -->
</template>

<script>
// 简化使用，不然得自己看需要什么，自己找在依赖中单个引用（这是个基本的总的）
import * as monaco from 'monaco-editor/esm/vs/editor/editor.main'
export default {
    props: {
      sql: {
        type: String,
        default () {
          return ''
        }
      }
    },
    data() {
        return {
            editor: null,
            mysql: ''
        }
    },
    watch: {
      sql(val) {
        console.log('sql');
        this.setValue(val)

      },
      mysql(val) {
        console.log('my', val);
        this.handleChange()
      }
    },
    mounted() {
      this.initEditor();
    },
    methods: {
        initEditor() {
             //  初始化编辑器，确保dom已经渲染
            this.editor = monaco.editor.create(document.getElementById('container'), {
                value: '', // 编辑器初始显示文字
                language: 'sql', // 语言支持自行查阅demo
                automaticLayout: true, // 自动布局
                theme: 'vs-dark' // 官方自带三种主题vs, hc-black, or vs-dark
            });
            this.setValue(this.sql)
            //monaco-editor原生内容变化事件监听设置
            this.editor.onDidChangeModelContent((event) => {
              const newValue = this.getValue();
              this.$emit('changeSql', newValue)
              })
            // document.getElementsByTagName('textarea')[0].value = this.sql
        },
        getValue() {
        //这个是plugin的方法，不然得项上面document那样自己从元素变化event的target下获取内容，麻烦
            return this.editor.getValue();
        },
        setValue(sql) {
        //这个是plugin的方法
            this.editor.setValue(sql);
        }
    }
}
</script>
//div无法直接高度为100%，得让所有父级设置高度
<style lang="scss" scoped>
#container {
  height: 97%;
}
</style>

四、优化

• 找到我们引入的main
  
• 寻找我们需要的sql语言配置
  
• 重新引入，修改组件引入信息

import * as monaco from 'monaco-editor/esm/vs/editor/edcore.main';
// import * as monaco from 'monaco-editor/esm/vs/editor/editor.main'
// 具体需要引入具体语言
import 'monaco-editor/esm/vs/basic-languages/sql/sql.contribution'