<template>
<div>
<div class="textareaBox" ref="textarea"></div>
</div>
</template>
<script>
import * as monaco from 'monaco-editor'
// import customKeywords from './customKeywords'
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
window.MonacoEnvironment = {
// 提供一個(gè)定義worker路徑的全局變量
getWorker (_, label) {
if (label === 'json') {
return new jsonWorker()
}
if (label === 'css' || label === 'scss' || label === 'less') {
return new cssWorker()
}
if (label === 'html' || label === 'handlebars' || label === 'razor') {
return new htmlWorker()
}
if (label === 'typescript' || label === 'javascript') {
return new tsWorker()
}
return new editorWorker() // 基礎(chǔ)功能文件苛让， 提供了所有語(yǔ)言通用功能 無(wú)論使用什么語(yǔ)言菇曲，monaco都會(huì)去加載他。
}
}
export default {
name: 'codeMirror',
props: {
hiddentip: {
type: Boolean,
default: false
},
// 語(yǔ)言 目前只有 html css js
language: {
type: String,
default: 'javascript'
}
},
data () {
return {
monacoEditor: null,
code: ''
}
},
destroyed () {
this.destroyCodeMorror()
},
methods: {
initCodeMirror () {
if (this.language == 'javascript') {
monaco.languages.typescript.typescriptDefaults.setEagerModelSync(true)
monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
noSemanticValidation: true,
noSyntaxValidation: false
})
monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
target: monaco.languages.typescript.ScriptTarget.ES2020,
allowNonTsExtensions: true
})
} else if (this.language == 'json') {
monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
validate: true,
enableSchemaRequest: true
})
}
this.monacoEditor = monaco.editor.create(this.$refs.textarea, {
theme: 'vs-dark', // 主題
value: this.code, // 默認(rèn)顯示的值
language: this.language,
folding: true, // 是否折疊
foldingHighlight: true, // 折疊等高線
foldingStrategy: 'auto', // 折疊方式
showFoldingControls: 'always', // 是否一直顯示折疊
disableLayerHinting: true, // 等寬優(yōu)化
emptySelectionClipboard: false, // 空選擇剪切板
selectionClipboard: false, // 選擇剪切板
automaticLayout: true, // 自動(dòng)布局
codeLens: true, // 代碼鏡頭
scrollBeyondLastLine: false, // 滾動(dòng)完最后一行后再滾動(dòng)一屏幕
colorDecorators: true, // 顏色裝飾器
accessibilitySupport: 'on', // 輔助功能支持"auto" | "off" | "on"
lineNumbers: 'on', // 行號(hào) 取值： "on" | "off" | "relative" | "interval" | function
lineNumbersMinChars: 4, // 行號(hào)最小字符 number
enableSplitViewResizing: false,
readOnly: false, //是否只讀 取值 true | false
fontSize: 16
})
this.monacoEditor.onDidChangeModelContent(() => {
this.$emit('change', this.monacoEditor.getValue())
})
let self = this
Object.defineProperty(this, 'code', {
configurable: true, // 表示能否通過(guò)delete刪除屬性结序，能否再次修改屬性描述符，默認(rèn)false
enumerable: true, // 表示該屬性是否可枚舉（for...in循環(huán)、Object.keys()等），默認(rèn)false
get: function () {
return self.monacoEditor.getValue()
},
set: function (val) {
return val
}
})
},
initCustomLanguage () {
monaco.languages.registerCompletionItemProvider('javascript', {
provideCompletionItems: function (model, position) {
// 獲取當(dāng)前行數(shù)
const line = position.lineNumber
// 獲取當(dāng)前列數(shù)
const column = position.column
// 獲取當(dāng)前輸入行的所有內(nèi)容
const content = model.getLineContent(line)
// 通過(guò)下標(biāo)來(lái)獲取當(dāng)前光標(biāo)后一個(gè)內(nèi)容指郁，即為剛輸入的內(nèi)容
const sym = content[column - 2]
var word = model.getWordUntilPosition(position)
var range = {
startLineNumber: position.lineNumber,
endLineNumber: position.lineNumber,
startColumn: word.startColumn,
endColumn: word.endColumn
}
//---------------------------------------------------
//上面的代碼僅僅是為了獲取sym，即提示符
//---------------------------------------------------
var suggestions = []
//直接提示踩窖，以下為javascript語(yǔ)句關(guān)鍵詞提示
var javascriptList = [
'var',
'let',
'const',
'Promise',
'$tu',
'new',
'for',
'forEach',
'etx.meta2d'
]
for (var i in javascriptList) {
suggestions.push({
label: javascriptList[i], // 顯示的提示內(nèi)容
kind: monaco.languages.CompletionItemKind['Keyword'], // 用來(lái)顯示提示內(nèi)容后的不同的圖標(biāo)
insertText: javascriptList[i], // 選擇后粘貼到編輯器中的文字
detail: '', // 提示內(nèi)容后的說(shuō)明
range: range
})
}
return {
suggestions: suggestions
}
},
triggerCharacters: ['']
})
},
destroyCodeMorror () {
this.monacoEditor.dispose()
},
_initialize () {
this.initCodeMirror()
this.initCustomLanguage() // 自定義提示詞語(yǔ)
}
}
}
</script>
<style scoped>
.textareaBox {
height: 500px;
font-size: 16px;
font-weight: 800;
font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica,
Segoe UI, Arial, Roboto, PingFang SC, miui, Hiragino Sans GB,
Microsoft Yahei, sans-serif, Avenir;
}
.textareaBox .cm-activeLine {
background-color: transparent;
}
</style>
{
"name": "mate2d",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"devDependencies": {
"@vitejs/plugin-vue2": "^2.3.1",
"vite": "^5.4.10"
},
"dependencies": {
"axios": "^1.7.7",
"codemirror": "^6.0.1",
"echarts": "^5.5.1",
"element-ui": "^2.15.14",
"jquery": "^3.7.1",
"monaco-editor": "0.30.1",
"vue": "2.7.14",
"vuex": "3.6.2"
}
}
// vite.config.js
import vue from '@vitejs/plugin-vue2'
import { resolve } from 'path'
export default {
plugins: [vue()],
server: {
host: '192.168.8.30', // can be overwritten by process.env.HOST
port: 1081
},
base: './',
resolve: {
alias: {
'@': resolve(__dirname, './src')
}
},
build: {
minify: false
}
}
