重慶金融公司網站建設,單位網站建設匯報,網站建設的英語,電子商務網站開發(fā)技術的背景原文鏈接#xff1a;Vue3Monaco Editor封裝及SQL編輯器實現(xiàn) Ping通途說 0. 前言 最近收到需求#xff0c;老板想要在前端自定義SQL語句然后查詢。安全性我強調了幾次#xff0c;仍然拗不過老板#xff0c;那就干吧...只能在語句檢查和權限上注意一下#xff0c;例如…原文鏈接Vue3Monaco Editor封裝及SQL編輯器實現(xiàn) Ping通途說0. 前言最近收到需求老板想要在前端自定義SQL語句然后查詢。安全性我強調了幾次仍然拗不過老板那就干吧...只能在語句檢查和權限上注意一下例如嚴格的語句檢查和創(chuàng)建一個僅有單表查權限的數(shù)據庫用戶執(zhí)行語句。項目其他地方都使用了Monaco Editor所以在這里直接復用之前封裝的組件文章也會貼出封裝的代碼有需要可以自取。若你沒有聽過這個編輯器那應該聽過VSCode吧Monaco就是VSCode的核心編輯器組件。目前編輯器內置全套配件語法檢查、格式化等的語言有TypeScript、JavaScript、HTML和JSON其他語言就要自己去配置。Monaco開放的APIMonaco Editor1. 基礎功能實現(xiàn)有些教程官方也這么教會教直接用import * as monaco from monaco-editor;來將整個依賴庫導入這樣的后果就是打包出來的Monaco整整占用4MB左圖而我們按需導入后體積驟降2.5MB右圖因此如果你的項目和服務器帶寬對加載速度有要求的可以使用以下方式導入Monacoimport * as monaco from monaco-editor/esm/vs/editor/editor.api;這樣做的代價就是除了最基礎的編輯框所有的右鍵菜單、語言高亮提示、語法提示等所有擴展功能都需要自己手動導入。直接來看最基礎的Monaco Editor組件封裝template div refcontainer :classw-full min-h-[450px] :style{ height: height }/div /template script setup import monaco-editor/esm/vs/editor/contrib/contextmenu/browser/contextmenu.js; // 右鍵顯示菜單 import monaco-editor/esm/vs/editor/contrib/folding/browser/folding.js; // 折疊 import monaco-editor/esm/vs/editor/contrib/format/browser/formatActions.js; // 格式化代碼 import monaco-editor/esm/vs/editor/contrib/suggest/browser/suggestController.js; // 代碼聯(lián)想提示 import monaco-editor/esm/vs/editor/contrib/tokenization/browser/tokenization.js; // 代碼聯(lián)想提示 import * as monaco from monaco-editor/esm/vs/editor/editor.api; import EditorWorker from monaco-editor/esm/vs/editor/editor.worker?worker; import JSONWorker from monaco-editor/esm/vs/language/json/json.worker?worker; import monaco-editor/esm/vs/language/json/monaco.contribution; // JSON代碼高亮提示 import { nextTick, onMounted, ref, toRaw, watch } from vue; // 容器對象 const container ref(null) // 編輯器對象 const editor ref(null) // input 事件 const emit defineEmits([update:value]) const props defineProps({ value: { type: String, default: , }, language: { type: String, default: json, }, theme: { type: String, default: vs, }, readOnly: { type: Boolean, default: false, }, height: { type: String, default: 450px, }, wordWrap: { type: String, default: on, }, }) self.MonacoEnvironment { getWorker(workId, label) { if (label json) { return new JSONWorker() } return new EditorWorker() }, getWorkerUrl(moduleId, label) { if (label json) { return ./json.worker.bundle.js } return ./editor.worker.bundle.js }, } function updateValue(value) { // 更新值 提供給父組件使用 if (value) { const model monaco.editor.getModels()[0] model.setValue(value.toString()) } } defineExpose({ updateValue, }) onMounted(() { // 確保容器已經渲染完成后再創(chuàng)建編輯器 nextTick(() { editor.value monaco.editor.create(container.value, { value: props.value, language: props.language, scrollBeyondLastLine: false, theme: props.theme, wordWrap: props.wordWrap, automaticLayout: true, minimap: { enabled: false, }, readOnly: props.readOnly, }) editor.value.onDidChangeModelContent(() { const value toRaw(editor.value).getValue() emit(update:value, value) }) }) }) // 監(jiān)聽value prop變化更新編輯器內容 watch( () props.value, (newValue) { if (editor.value) { const model toRaw(editor.value).getModel() if (model newValue ! toRaw(editor.value).getValue()) { model.setValue(newValue || ) } } }, ) watch( () props.readOnly, (newValue) { toRaw(editor.value).updateOptions({ readOnly: newValue, }) }, ) /script封裝的組件實現(xiàn)了以下功能支持JSON語言模式可通過language參數(shù)指定支持的編程語言JSON語法高亮、代碼自動折疊、右鍵上下文菜單、JSON代碼格式化、JSON智能代碼提示和自動補全支持傳入配置value編輯器內容值支持雙向綁定language編程語言類型默認JSON需要預先配置好對應語言的參數(shù)才能使用語言高亮和智能提示theme編輯器主題默認vs暗黑模式就是vs-darkreadonly動態(tài)調整是否只讀模式height編輯框容器高度wordWrap是否自動換行數(shù)據同步在編輯框輸入和內部修改的內容由v-model進行雙向綁定要使用這個組件先假設當前組件名稱為“MonacoEditor.vue”然后就能在需要使用中的組件導入然后綁定值并傳入參數(shù)。需要注意的是傳入值必須為字符串傳回值也是字符串這就意味著當前頁面需要正常使用JSON就需要使用computed實時計算template div classmx-auto w-full h-[450px] MonacoEditor languagejson :valueformatRawText v-model:valueeditText :themetheme dark ? vs-dark : vs :readOnlyreadOnly / /div /template script setup import MonacoEditor from /components/editor/MonacoEditor.vue import { computed, ref, watch } from vue const rawText ref({}) const editText ref({}) const readOnly ref(false) const theme ref(dark) const formatRawText computed(() { try { if (typeof rawText object) { return JSON.stringify(JSON.parse(rawText), null, 2) } return config } catch { return {} } }) watch(editText.value,(){ if(editText.value editText.value ! {}){ try { const parsedText JSON.parse(editText.value) editText.value parsedText } catch(e){ console.log(解析發(fā)生錯誤,e) } } })另外如果你仔細觀察組件的導入支持JSON功能的庫有import JSONWorker from monaco-editor/esm/vs/language/json/json.worker?worker; import monaco-editor/esm/vs/language/json/monaco.contribution; // JSON代碼高亮提示文章一開始也提到官方提供了4種語言的深度支持如果你需要使用他們可以模仿JSON引用庫的方式來引用其他三項的依賴2. MySQL語言支持template div refcontainer :classw-full min-h-[450px] :style{ height: height }/div /template script setup import monaco-editor/esm/vs/basic-languages/mysql/mysql.contribution.js; import monaco-editor/esm/vs/basic-languages/mysql/mysql.js; import { language as mysqlLanguage } from monaco-editor/esm/vs/basic-languages/mysql/mysql.js; import monaco-editor/esm/vs/editor/contrib/contextmenu/browser/contextmenu.js; // 右鍵顯示菜單 import monaco-editor/esm/vs/editor/contrib/folding/browser/folding.js; // 折疊 import monaco-editor/esm/vs/editor/contrib/format/browser/formatActions.js; // 格式化代碼 import monaco-editor/esm/vs/editor/contrib/suggest/browser/suggestController.js; // 代碼聯(lián)想提示 import monaco-editor/esm/vs/editor/contrib/tokenization/browser/tokenization.js; // 代碼聯(lián)想提示 import * as monaco from monaco-editor/esm/vs/editor/editor.api; import EditorWorker from monaco-editor/esm/vs/editor/editor.worker?worker; import JSONWorker from monaco-editor/esm/vs/language/json/json.worker?worker; import monaco-editor/esm/vs/language/json/monaco.contribution; // JSON代碼高亮提示 import { nextTick, onMounted, ref, toRaw, watch } from vue; // 容器對象 const container ref(null) // 編輯器對象 const editor ref(null) // input 事件 const emit defineEmits([update:value]) const props defineProps({ value: { type: String, default: , }, language: { type: String, default: json, }, theme: { type: String, default: vs, }, readOnly: { type: Boolean, default: false, }, height: { type: String, default: 450px, }, wordWrap: { type: String, default: on, }, }) self.MonacoEnvironment { getWorker(workId, label) { if (label json) { return new JSONWorker() } if (label mysql) { return new MySQLWorker() } return new EditorWorker() }, getWorkerUrl(moduleId, label) { if (label json) { return ./json.worker.bundle.js } if (label mysql) { return ./mysql.worker.bundle.js } return ./editor.worker.bundle.js }, } function updateValue(value) { // 更新值 提供給父組件使用 if (value) { const model monaco.editor.getModels()[0] model.setValue(value.toString()) } } defineExpose({ updateValue, }) onMounted(() { // 確保容器已經渲染完成后再創(chuàng)建編輯器 nextTick(() { editor.value monaco.editor.create(container.value, { value: props.value, language: props.language, scrollBeyondLastLine: false, theme: props.theme, wordWrap: props.wordWrap, automaticLayout: true, minimap: { enabled: false, }, readOnly: props.readOnly, }) monaco.languages.register({ id: mysql }) if (props.language mysql) { //注冊片段 const keywords mysqlLanguage.keywords.map(item ({ label: item, kind: monaco.languages.CompletionItemKind.Keyword, insertText: item, detail: MySQL Keyword })) monaco.languages.registerCompletionItemProvider(mysql, { // 設置觸發(fā)自動補全的字符 triggerCharacters: [ , ., (, ], provideCompletionItems: (model, position) { // 獲取當前行的所有文本 const word model.getWordUntilPosition(position); const range { startLineNumber: position.lineNumber, endLineNumber: position.lineNumber, startColumn: word.startColumn, endColumn: word.endColumn }; // 返回所有關鍵詞和自定義片段 return { suggestions: [{ label: queryUser, kind: monaco.languages.CompletionItemKind.Snippet, insertText: SELECT ${1:user_id},${2:open_id},${3:age},${4:params},${5:created_at} FROM user, insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet, documentation: 查詢用戶信息, range: range }, ...keywords.map(keyword ({ ...keyword, range: range }))] } }, }) } editor.value.onDidChangeModelContent(() { const value toRaw(editor.value).getValue() emit(update:value, value) }) }) }) // ... exist // 監(jiān)聽value prop變化更新編輯器內容 watch( () props.value, (newValue) { if (editor.value) { const model toRaw(editor.value).getModel() if (model newValue ! toRaw(editor.value).getValue()) { model.setValue(newValue || ) } } }, ) watch( () props.readOnly, (newValue) { toRaw(editor.value).updateOptions({ readOnly: newValue, }) }, ) /script通過代碼高亮可以發(fā)現(xiàn)我們導入了mysql的語法高亮支持然后在111行注冊語言。在113行中遍歷官方提供關鍵字列表并加入到編輯器中因為直接導入是沒有用的打字沒有提示。第120行我們定義了在什么時候觸發(fā)關鍵詞提示目前空格括號反引號等這些在MySQL語句一般接的就是關鍵詞了。在這里你也可以將從服務器獲取的表名也導入進去。然后136行我們自定義了一個片段用于快捷輸入我們常用的SQL片段設置完成后我們可以通過輸入queryUser來快捷使用SQL片段。片段中使用了${1:user_id}這種代表插槽用戶可按Tab鍵快速切換到下一個插槽中填數(shù)據如果不填就使用插槽內部默認的字段非常的方便