https://github.com/microsoft/monaco-editor/issues/2217
https://github.com/microsoft/monaco-editor/issues/2084
<template>
<div :id="'codeEditBox' + index" class="codeEditBox" v-if="isChange"></div>
</template>
let editors
let editor
onBeforeUnmount(() => { // 在销毁后清空 好像只用一个就行
editor.dispose()
editors.dispose()
})
onUnmounted(() => { // 在销毁后清空 好像只用一个就行
editor.dispose()
editors.dispose()
})
nextTick(() => {
monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
noSemanticValidation: true,
noSyntaxValidation: false
})
monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
target: monaco.languages.typescript.ScriptTarget.ES2016,
allowNonTsExtensions: true
})
let a = 'codeEditBox' + props.index // 封装的组件 多个标签页 id需要不同
!editor
? (editor = monaco.editor.create(document.getElementById(a) as HTMLElement, {
// value: text.value, // 编辑器初始显示文字
value: props.inputList.script1, // 编辑器初始显示文字
language: 'python' || 'sql', // 语言支持自行查阅demo
automaticLayout: true, // 自适应布局
theme: 'hc-dark', // 官方自带三种主题vs, hc-black, or vs-dark
foldingStrategy: 'indentation',
renderLineHighlight: 'all', // 行亮
selectOnLineNumbers: true, // 显示行号
minimap: {
enabled: false
},
readOnly: false, // 只读
fontSize: 12, // 字体大小
scrollBeyondLastLine: false, // 取消代码后面一大段空白
overviewRulerBorder: false // 不要滚动条的边框
}))
: editor.setValue('')
// console.log(editor)
// 监听值的变化
editor.onDidChangeModelContent((val: any) => {
text.value = editor.getValue()
})
editors = monaco.languages.registerCompletionItemProvider('python', {
provideCompletionItems: function () {
let suggestions = []
// 这个keywords就是python.js文件中有的
pythonLanguage.keywords.forEach((item) => {
suggestions.push({
label: item,
kind: monaco.languages.CompletionItemKind.Keyword,
insertText: item
})
})
return {
// 最后要返回一个数组
suggestions: suggestions
}
}
})
})