组件代码自取(vue3.0+ts)
链接:https://pan.baidu.com/s/1LlGbx59Y9UxEM0ZAcf29oA?pwd=s7ey
提取码:s7ey
文件结构
- monacoEditor
- language
- customLanguage.js
- index.js
- index.vue
部分代码
<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的值无法更新编辑器的值,所以添加watch监听initValue的值动态设置进编辑器
watch(() => props.initValue, (newVal) => {
editor.setValue(newVal)
})
引发输入,monaco组件的光标会回到开始,所以废弃该监听,封装一个setValue组件API,抛出。
function setValue(value) {
editor.setValue(value || '')
}
defineExpose({
setValue,
})
父组件调用
monacoRef.value.setValue(item.form || '')
使用
<MonacoEditor
language="JSON"
v-model:initValue="clickItem.form"
ref="monacoRef"
/>