由于项目演进,codemirror已经不能满足,需要更强大的json和sql编辑器,经过多方筛选,最终选择了Monaco-editor。
基本使用
"monaco-editor": "0.21.3", //由于我们需要json的注释功能,所以选择了21版本的包
"monaco-editor-webpack-plugin": "2.1.0" //配合上边的版本
import * as monaco from "monaco-editor";
import {language as sqlLanguage} from "monaco-editor/esm/vs/basic-languages/sql/sql"
初始化对象
<div id="monaco" style="height: 400vh; width: 50vw"></div>
this.monacoEditor = monaco.editor.create(document.getElementById("monaco"),
{
language: `sql`, //设置语言
value: `CREATE TABLE dbo.EmployeePhoto`,
foldingImportsByDefault: true,
foldingStrategy: "indentation", // 代码可分小段折叠
theme: "vs-dark", //主题
scrollbar: {
verticalScrollbarSize: 8,
horizontalScrollbarSize: 8,
},
minimap: { //是否需要缩略图
enabled: true,
},
autoIndent: true, // 自动布局
automaticLayout: false, // 自动布局
formatOnPaste: true, //是否粘贴自动格式化
renderValidationDecorations: "on",
}
);
增加高亮
这里需要引入你需要的语言包
import "monaco-editor/esm/vs/language/json/monaco.contribution";
import "monaco-editor/esm/vs/basic-languages/sql/sql.contribution";
自定义提示
import completion from "./components/complete"; //导入自定义提示
complete.js如下
export default [
/** * 内置函数 */
{
label: '_ABS(val:number)',
kind: monaco.languages.CompletionItemKind.Function,
insertText: '_ABS(${1:val})',
insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
detail: '返回指定参数的绝对值'
}, {
label: '_COS(val:number)',
kind: monaco.languages.CompletionItemKind.Function,
insertText: '_COS(${1:val})',
insertTextRules: monaco.languages.CompletionItemInsertTextRule.InsertAsSnippet,
detail: '求指定角度的余弦值'
}
]
kind为枚举类型,可根据自定义提示类型选择,可选值有 Function、Keyword、Text、Method、Event、Operator、Unit、Value、Constant、Enum、Color等
if(!monaco.languages.registerCompletionItemProvider['sql']){ //这里为了防止提示展示多次
monaco.languages.registerCompletionItemProvider("sql", {
provideCompletionItems: (model,position) => {
monaco.languages.registerCompletionItemProvider['sql'] = true
var textUntilPosition = model.getValueInRange({startLineNumber:position.lineNumber,
startColumn: 1,
endLineNumber: position.lineNumber,
endColumn: position.column,
})
const match = textUntilPosition.match(/(\S+)$/)
const suggestions =[]
let tmp = [...completion]
tmp.forEach((item)=>{
if(item.label.indexOf(match[0].toUpperCase())!==-1){
suggestions.push({...item})
}
})
const keys = ['keywords','operators','builtinFunctions']
keys.forEach((v)=>{
sqlLanguage[v].forEach((item)=>{ //sqlLanguage通过引入 ,可以获取到当前语言的关键字和操作和内置函数等
if(item.indexOf(match[0].toUpperCase())!==-1){
suggestions.push({
label:item.toLowerCase(),
kind:monaco.languages.CompletionItemKind.Keyword,
insertText:item.toLowerCase()
})
}
})
})
return { suggestions: suggestions};
},
});
}
QQ录屏20230215171945
自定义主题
我这里是在vs-dark的基础上定义的主题配色文章来源:https://www.toymoban.com/news/detail-736698.html
monaco.editor.defineTheme('tech',{
base:'vs-drak',
inherit:true,
rules:[{background:'#081641'}],
colors:{
// 相关颜色属性配置
'editor.background':'#081641',
// "editor.foreground': '#0eeeeg'
// "editor.lineHighlightBackground': "#0e0FF20.
// 'editorLineNumber.foreground':#998899
// 'editor.selectionBackground': "#88000030"
// "editor.inactiveSelectionBackground": "#88000015
}
})
效果图如下
图上是json的效果,格式化和注释以及报错的效果。文章来源地址https://www.toymoban.com/news/detail-736698.html
到了这里,关于Monaco-editor使用指南,遇到问题详解的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!