Vue引⼊代码代码编辑器monaco-editor并⾃定义语法提⽰
介绍
说起`monaco-editor` 可能⼤半部分⼈都没⽤过，但是说起vsCode我相信⼤部分前端都多多少少⽤过吧，说⽩了这玩意就是vscode的同胞兄弟，很久以前微软公司有个叫 Monaco Workbench的项⽬，后来这个项⽬⼀部分发展为了vsCode 也就是你们安装
1.安装依赖
npm install monaco-editor或者yarn add monaco-editor怎么装，选你开⼼的就好
npm install monaco-editor-webpack-plugin或者yarn add monaco-editor-webpack-plugin这个必须安装，不然跑不起来
2.修改webPack
⽼vue⽤f.js，新vue⽤fig.js ps: vue3.0的还没做过咋整不知道。
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
...
plugins: [
...
new MonacoWebpackPlugin()
]
};
使⽤说明
1. 选⼀个标签作为编辑器渲染的节点
<div id="container"></div> <!--宽⾼⾃⾏设定 --> 注意！！！必须设定宽⾼！！
2.引⼊monaco
import * as monaco from 'monaco-editor';
export default{
data(){
return {
editor:null,//⽂本编辑器
}
},
mounted(){
this.initEditor();
},
methods:{
initEditor(){
// 初始化编辑器，渲染DOM
this.editor = ElementById('container'), {
value:'',//编辑器初始显⽰⽂字也是编辑器的绑定值
language:'sql',//⽀持的语⾔
automaticLayout: true,//是否开启⾃动布局
theme:'vs-dark' //官⽅⾃带三种主题vs ⽩⾊, hc-black ⿊⾊, or vs-dark ⾮常⿊
});
},
getValue(){
Value(); //获取编辑器中的⽂本
}
}
}
代码提⽰
isterCompletionItemProvider('sql', {
provideCompletionItems: function (model, position) {
// 获取当前⾏数
const line = position.lineNumber;
// 获取当前列数
const column = lumn;
// 获取当前输⼊⾏的所有内容
const content = LineContent(line)
// 通过下标来获取当前光标后⼀个内容，即为刚输⼊的内容
const sym = content[column - 2];
var textUntilPosition = ValueInRange({
startLineNumber: 1,
startColumn: 1,
endLineNumber: position.lineNumber,
endColumn: lumn
});
var word = WordUntilPosition(position);
var range = {
startLineNumber: position.lineNumber,
endLineNumber: position.lineNumber,
startColumn: word.startColumn,
endColumn: dColumn
};
//---------------------------------------------------
//上⾯的代码仅仅是为了获取sym，即提⽰符
//---------------------------------------------------
var suggestions = [];
if (sym === "$") {
//...
/
/拦截到⽤户输⼊$，开始设置提⽰内容，同else中代码⼀致，⾃⾏拓展
} else {
//直接提⽰，以下为sql语句关键词提⽰
var sqlStr = [
'SELECT', 'FROM', 'WHERE', 'AND',
'OR', 'LIMIT', 'ORDER BY', 'GROUP BY',
'LEFT', 'ON', 'if(){}', 'for(){}',
'size', 'get()', 'substring', 'return'
];
for (var i in sqlStr) {
suggestions.push({
label: sqlStr[i], // 显⽰的提⽰内容
kind: monaco.languages.CompletionItemKind['Function'], // ⽤来显⽰提⽰内容后的不同的图标
insertText: sqlStr[i], // 选择后粘贴到编辑器中的⽂字
detail: '', // 提⽰内容后的说明
range: range
});
}
}
return {
suggestions: suggestions
};
},多文本编辑器editor什么意思
triggerCharacters: ["$", ""]
});