vue3.0-monaco组件封装

组件代码(vue3+ts)

链接：https://pan.baidu.com/s/12ZkaRuPAkQo8UKiNS-fhtA?pwd=fb2a 
提取码：fb2a

功能

• SQL语法提示
• JSON格式化(ctrl+s保存格式化)

组件代码

<template>
  <div
    ref="main"
    class="codeEditBox editor-container"
    style="width: 100%; height: 400px;overflow: hidden;"
  />
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue'
import * as monaco from 'monaco-editor'
import { language } from 'monaco-editor/esm/vs/basic-languages/sql/sql'
import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'

self.MonacoEnvironment = {
  getWorker(workerId, label) {
    console.log('label', label)
    if (label === 'json') {
      return new JsonWorker()
    }
    return new EditorWorker()
  },
}

const { keywords } = language
const main = ref()
const tables = {
  users: ['name', 'id', 'email', 'phone', 'password'],
  roles: ['id', 'name', 'order', 'created_at', 'updated_at', 'deleted_at'],
}

let editor: monaco.editor.IStandaloneCodeEditor

const props = defineProps({
  initValue: {
    type: String,
    default: '',
  },
  language: {
    type: String,
    default: 'sql',
  },
})

const emit = defineEmits(['update:initValue', 'change', 'ctrlS'])

const defaultOptions: any = {
  // theme, // 主题
  value: props.initValue, // 默认显示的值
  language: props.language, // 语言
  folding: true, // 是否折叠
  minimap: {
    // 关闭小地图
    enabled: false,
  },
  tabSize: 2,
  wordWrap: 'on',
  autoIndent: true,
  wrappingIndent: 'indent',
  foldingHighlight: true, // 折叠等高线
  foldingStrategy: 'indentation', // 折叠方式  auto | indentation
  showFoldingControls: 'always', // 是否一直显示折叠 always | mouseover
  disableLayerHinting: true, // 等宽优化
  emptySelectionClipboard: false, // 空选择剪切板
  selectionClipboard: true, // 选择剪切板
  automaticLayout: true, // 自动布局
  // overviewRulerBorder: false, // 不要滚动条的边框
  codeLens: true, // 代码镜头
  scrollBeyondLastLine: true, // 滚动完最后一行后再滚动一屏幕
  colorDecorators: true, // 颜色装饰器
  accessibilitySupport: 'on', // 辅助功能支持  "auto" | "off" | "on"
  lineNumbers: 'on', // 行号 取值： "on" | "off" | "relative" | "interval" | function
  lineNumbersMinChars: 5, // 行号最小字符   number
  // enableSplitViewResizing: 'on',
  // readOnly: false, // 是否只读  取值 true | false
  fixedOverflowWidgets: true,
  quickSuggestions: true,
  // acceptSuggestionOnEnter: 'on',
  theme: 'vs',
  formatOnPaste: true, // 粘贴时自动格式化
}

onMounted(() => {
  initAutoCompletion()
  init()
})

onUnmounted(() => {
  editor.dispose()
})

function init() {
  // 使用 - 创建 monacoEditor 对象
  editor = monaco.editor.create(
    document.querySelector('.codeEditBox') as HTMLElement,
    defaultOptions,
  )

  // 监听值的变化
  editor.onDidChangeModelContent((val: any) => {
    const text = editor.getValue()
    emit('update:initValue', text)
  })
}

// 覆盖默认ctrl+s浏览器保存
onMounted(() => {
  window.addEventListener('keydown', handleKeyDown)
})
const handleKeyDown = (event) => {
  if (event.ctrlKey && event.key === 's') {
    editor.getAction('editor.action.formatDocument').run()
    event.preventDefault() // 阻止浏览器默认的保存操作

    // 执行调试
    emit('ctrlS')
  }
}

/**
 * @description: 初始化自动补全
 */
function initAutoCompletion() {
  monaco.languages.registerCompletionItemProvider('sql', {
    // 触发提示的字符
    triggerCharacters: ['.', ' ', ...keywords],
    provideCompletionItems: (model, position) => {
      let suggestions: any = []
      // 行号，列号
      const { lineNumber, column } = position
      // 光标之前的所有字符，即从这一行的 0 到当前的字符
      const textBeforePointer = model.getValueInRange({
        startLineNumber: lineNumber,
        startColumn: 0,
        endLineNumber: lineNumber,
        endColumn: column,
      })

      // trim() 取消两边空格，保证拆分出来前后都不是空值
      // \s是指空白，包括空格、换行、tab缩进等所有的空白
      const words = textBeforePointer.trim().split(/\s+/)

      // 最后的一个有效词
      const lastWord = words[words.length - 1]

      if (lastWord.endsWith('.')) {
        // 如果这个词以 . 结尾，那么认为是希望补全表的字段
        // 拿到真实的表名，把 . 去掉
        const tableName = lastWord.slice(0, lastWord.length - 1)
        if (Object.keys(tables).includes(tableName)) {
          suggestions = [...getFieldsSuggest(tableName)]
        }
      } else if (lastWord === '.') {
        // 如果这个词本身就是一个 . 即点前面是空的，那么什么都不用补全了
        // 按理说这应该是个语法错误
        suggestions = []
      } else {
        // 其他时候都补全表名，以及关键字
        suggestions = [...getTableSuggest(), ...getKeywordsSuggest()]
      }

      return {
        suggestions,
      }
    },
  })
}

/**
 * @description: 获取关键字的补全列表
 * @tips: CompletionItemKind 的所有枚举可以在monaco.d.ts 文件中找到，有二十多个，取需即可
 */
function getKeywordsSuggest() {
  return keywords.map((key) => ({
    label: key, // 显示的名称
    kind: monaco.languages.CompletionItemKind.Keyword,
    insertText: key, // 真实补全的值
  }))
}

/**
 * @description: 获取表名的补全列表
 */
function getTableSuggest() {
  return Object.keys(tables).map((key) => ({
    label: key, // 显示的名称
    kind: monaco.languages.CompletionItemKind.Variable,
    insertText: key, // 真实补全的值
  }))
}

function setValue(value) {
  editor.setValue(value || '')
}

/**
 * @description: 根据表名获取字段补全列表
 * @param {*} tableName
 */
function getFieldsSuggest(tableName) {
  const fields = tables[tableName]
  if (!fields) {
    return []
  }
  return fields.map((name) => ({
    label: name,
    kind: monaco.languages.CompletionItemKind.Field,
    insertText: name,
  }))
}

defineExpose({
  setValue,
})
</script>
<style>
.editor-container {
  border: 1px solid #ccc;
}
</style>

解析

editor.onDidChangeModelContent当编辑器内容发生变化时触发，如：输入、删除、粘贴等

修改编辑器值

由于在外部动态改变initValue的值无法更新编辑器的值，所以添加setValue接口给父组件调用

使用setValue设置编辑器的值

使用

    <MonacoEditor
          language="JSON"
          v-model:initValue="clickItem.form"
          ref="monacoRef"
        />