monaco-editor类似于vscode功能，可以实现javascript、sql、json等查看编辑功能，最近在做Vue实现monaco-editor脚本对比和脚本查看功能以及自定义高亮字段

实现sql脚本查看功能以及配置

加上随机数防止多次点击重复加载多个脚本查看
<div
  ref="monaco"
  :key="Math.random()"
/>
<script>
import * as monaco from 'monaco-editor'
import {conf, language} from 'monaco-editor/esm/vs/basic-languages/sql/sql'
data() {
   return {
       value: '',
       editor: null
   }
},
mounted(){
this.initEditor()
},
methods: {
    initEditor(){
      // 初始化编辑器，确保dom已经渲染
        this.editor = monaco.editor.create(
          this.$refs.editor, {
            value: this.value,//编辑器初始显示文字
            roundedSelection: false,
            language:'sql',//语言支持自行查阅demo
            automaticLayout: true,//自动布局
            readOnly: false,
            selectOnLineNumbers: true,
            minimap: { // 关闭代码缩略图
              enabled: false // 是否启用预览图
            },
            theme:'vs' //官方自带三种主题vs, hc-black, or vs-dark
        })
        language.keywords.push('C1','C2') // 自定义高亮字段
        monaco.languages.setMonarchTokensProvider('sql', language);
    },
    getValue(){
      editor.getValue(); //获取编辑器中的文本
    },
   }
</script>

实现脚本对比，能定位到哪一行sql脚本不同,以及除开指定的字段高亮，可以自定义字段高亮

<div
  ref="container"
  :key="Math.random()"
  style="height:100%;width:100%"
/>
<script>
import * as monaco from 'monaco-editor'
import {conf, language} from 'monaco-editor/esm/vs/basic-languages/sql/sql'
let monacoDiffInstance = null
data() {
   return {
       sqlData: '',
       oldSqlData: '', // 自定义赋值
       language: 'sql' // 对比语言
   }
},
mounted(){
this.initEditor()
},
methods: {
    initEditor(){
      // 初始化编辑器，确保dom已经渲染
       monacoDiffInstance = monaco.editor.createDiffEditor(
          this.$refs['container'], {
            automaticLayout: true,//自动布局
            readOnly: false,
            selectOnLineNumbers: true,
            hideCursorInOverviewRuler: false,
            overviewRulerLanes: 0,
            overviewRulerBorder: true,
            theme:'vs' //官方自带三种主题vs, hc-black, or vs-dark
          })
          language.keywords.push('aa','aa') // 自定义需要高亮的字段
          monaco.languages.setMonarchTokensProvider('sql', language);
          monacoDiffInstance.setModel({
              original: monaco.editor.createModel(this.sqlData, this.language), // 最开始sql版本
              modified: monaco.editor.createModel(this.oldSqlData, this.language) // 修改之后的版本对比
        })
      },
    getValue(){
      editor.getValue(); //获取编辑器中的文本
    },
   }
</script>