vsCode 之 Monaco Editor 在 vue-cli3.0 中的使用方法
# 开始安装
安装 monaco-editor
包
npm install monaco-editor --save
1
安装 monaco-editor-webpack-plugin
插件,这个必须安装,不然起不来
npm install monaco-editor-webpack-plugin --save
1
# 配置文件
在 vue.config.js
文件中配置如下:
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
module.exports = {
chainWebpack(config) {
config.plugin('monaco').use(new MonacoWebpackPlugin())
},
}
1
2
3
4
5
6
2
3
4
5
6
或者
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
module.exports = {
chainWebpack: config => {
config.plugin('monaco-editor').use(MonacoWebpackPlugin, [
{
// Languages are loaded on demand at runtime
languages: ['json', 'go', 'css', 'html', 'java', 'javascript', 'less', 'markdown', 'mysql', 'php', 'python', 'scss', 'shell', 'redis', 'sql', 'typescript', 'xml'], // ['abap', 'apex', 'azcli', 'bat', 'cameligo', 'clojure', 'coffee', 'cpp', 'csharp', 'csp', 'css', 'dart', 'dockerfile', 'ecl', 'fsharp', 'go', 'graphql', 'handlebars', 'hcl', 'html', 'ini', 'java', 'javascript', 'json', 'julia', 'kotlin', 'less', 'lexon', 'lua', 'm3', 'markdown', 'mips', 'msdax', 'mysql', 'objective-c', 'pascal', 'pascaligo', 'perl', 'pgsql', 'php', 'postiats', 'powerquery', 'powershell', 'pug', 'python', 'r', 'razor', 'redis', 'redshift', 'restructuredtext', 'ruby', 'rust', 'sb', 'scala', 'scheme', 'scss', 'shell', 'solidity', 'sophia', 'sql', 'st', 'swift', 'systemverilog', 'tcl', 'twig', 'typescript', 'vb', 'xml', 'yaml'],
features: ['format', 'find', 'contextmenu', 'gotoError', 'gotoLine', 'gotoSymbol', 'hover' , 'documentSymbols'] //['accessibilityHelp', 'anchorSelect', 'bracketMatching', 'caretOperations', 'clipboard', 'codeAction', 'codelens', 'colorPicker', 'comment', 'contextmenu', 'coreCommands', 'cursorUndo', 'dnd', 'documentSymbols', 'find', 'folding', 'fontZoom', 'format', 'gotoError', 'gotoLine', 'gotoSymbol', 'hover', 'iPadShowKeyboard', 'inPlaceReplace', 'indentation', 'inlineHints', 'inspectTokens', 'linesOperations', 'linkedEditing', 'links', 'multicursor', 'parameterHints', 'quickCommand', 'quickHelp', 'quickOutline', 'referenceSearch', 'rename', 'smartSelect', 'snippets', 'suggest', 'toggleHighContrast', 'toggleTabFocusMode', 'transpose', 'unusualLineTerminators', 'viewportSemanticTokens', 'wordHighlighter', 'wordOperations', 'wordPartOperations']
}
])
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 在 vue 中使用
添加容器
<div ref="main"></div>
1
引入组件
import * as monaco from 'monaco-editor/esm/vs/editor/editor.main.js'
import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution'
1
2
2
使用
// 使用 - 创建 monacoEditor 对象
this.monacoEditor = monaco.editor.create(this.$refs.main, {
// theme: 'vs-dark', // 主题
// value: '', // 默认显示的值
language: 'json',
folding: true, // 是否折叠
foldingHighlight: true, // 折叠等高线
foldingStrategy: 'indentation', // 折叠方式 auto | indentation
showFoldingControls: 'always', // 是否一直显示折叠 always | mouseover
disableLayerHinting: true, // 等宽优化
emptySelectionClipboard: false, // 空选择剪切板
selectionClipboard: false, // 选择剪切板
automaticLayout: true, // 自动布局
codeLens: false, // 代码镜头
scrollBeyondLastLine: false, // 滚动完最后一行后再滚动一屏幕
colorDecorators: true, // 颜色装饰器
accessibilitySupport: 'off', // 辅助功能支持 "auto" | "off" | "on"
lineNumbers: 'on', // 行号 取值: "on" | "off" | "relative" | "interval" | function
lineNumbersMinChars: 5, // 行号最小字符 number
enableSplitViewResizing: false,
readOnly: true //是否只读 取值 true | false
})
// 获取 编辑框中当前的值
const value = this.monacoEditor.getValue()
// 编辑 监听内容变化
this.monacoEditor.onDidChangeModelContent(() => {
console.log('目前内容为:', this.monacoEditor.getValue())
})
// 设置 data:想更新进去的值
this.monacoEditor.setModel(monaco.editor.createModel(data))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
语言支持(当然支持自定义语言)
var modesIds = monaco.languages.getLanguages().map(function(lang) { return lang.id; });
1
文件改动状态
export default{
data(){
return {
editor:null,//文本编辑器
isSave:true,//文件改动状态,是否保存
oldValue:'' //保存后的文本
}
},
methods:{
initEditor(){
// 初始化编辑器,确保dom已经渲染
this.editor = monaco.editor.create(document.getElementById('container'), {
value:'',//编辑器初始显示文字
language:'sql',//语言支持自行查阅demo
automaticLayout: true,//自动布局
theme:'vs-dark' //官方自带三种主题vs, hc-black, or vs-dark
});
this.editor.onKeyUp(() => {
// 当键盘按下,判断当前编辑器文本与已保存的编辑器文本是否一致
if(this.editor.getValue() != this.oldValue){
this.isSave = false;
}
});
},
//保存编辑器方法
saveEditor(){
this.oldValue = this.editor.getValue();
...保存逻辑
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
更改编辑器语言
export default{
data(){
return {
editor:null,//文本编辑器
}
},
methods:{
initEditor(){
// 初始化编辑器,确保dom已经渲染
this.editor = monaco.editor.create(document.getElementById('container'), {
value:'',//编辑器初始显示文字
language:'sql',//语言支持自行查阅demo
automaticLayout: true,//自动布局
theme:'vs-dark' //官方自带三种主题vs, hc-black, or vs-dark
});
},
changeModel(){
var oldModel = this.editor.getModel();//获取旧模型
var value = this.editor.getValue();//获取旧的文本
//创建新模型,value为旧文本,id为modeId,即语言(language.id)
//modesIds即为支持语言
//var modesIds = monaco.languages.getLanguages().map(function(lang) { return lang.id; });
var newModel = monaco.editor.createModel(value,id);
//将旧模型销毁
if(oldModel){
oldModel.dispose();
}
//设置新模型
this.editor.setModel(newModel);
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
更改编辑器配置
//此例为更改编辑器为只读模式,其余以此类推
this.editor.updateOptions({readOnly:true})
1
2
2
触发编辑器事件
//此为格式化代码,anything无用,后一个参数为action事件,自行查找,我也就找到这么一个
this.editor.trigger('anything','editor.action.formatDocument');
1
2
2
获取选中内容
//简单方法,后面的就别用了。。。
this.editor.getModel().getValueInRange(this.editor.getSelection())
//获取编辑器选中的参数,包括起始行等等
var selection = this.editor.getSelection();
//获取当前选中的文本
var text = currentFn(editor,selection.startLineNumber,selection.startColumn,selection.endLineNumber,selection.endColumn);
function currentFn(monacoEditor, startLineNumber, startColumn, endLineNumber, endColumn) {
let currentText = '' //选中文字的内容
let num = 0;//累计回车的数量
let startIndex = null;//截取编辑器内容的起始下标
let endIndex = null;//截取编辑器内容的结束下标
// monacoEditor.getValue().split('') : 获取编辑器内容,并拆成数组,并把每一个字符作为数组的每一项
if (startLineNumber < endLineNumber) {//当起始行<结束行(方向:从上到下,从左到右)
monacoEditor.getValue().split('').map((item, index) => {
if (startLineNumber === 1) {//判断起始行当前行数,为1 则前面没有回车
startIndex = startColumn - 1;//获取起始下标
if (item === '\n') {
num += 1;//累计回车数量(针对于结束行)
if (num === endLineNumber - 1) {//获取结束行最近的回车的下标+结束行的结束列
endIndex = index + endColumn
}
}
} else {//判断起始行当前行数,大于1 则前面有回车
if (item === '\n') {//累计回车数量
num += 1
if (num === startLineNumber - 1) {//获取起始行最近的回车的下标+起始行的起始列
startIndex = index + startColumn
}
if (num === endLineNumber - 1) {//获取结束行最近的回车的下标+结束行的结束列
endIndex = index + endColumn
}
}
}
})
} else if (startLineNumber > endLineNumber) {//当起始行>结束行(方向:从下到上,从右到左)
monacoEditor.getValue().split('').map((item, index) => {
if (endLineNumber === 1) {//判断结束行当前行数,为1 则前面没有回车
startIndex = endColumn - 1;//获取起始下标
if (item === '\n') {
num += 1;//累计回车数量(针对于起始行)
if (num === startLineNumber - 1) {//获取结束下标:起始行最近的回车的下标+起始行的起始列
endIndex = index + startColumn
}
}
} else {//判断结束行当前行数,大于1 则前面有回车
if (item === '\n') {//累计回车数量
num += 1
if (num === endLineNumber - 1) {//获取结束行最近的回车的下标+结束行的结束列
startIndex = index + endColumn
}
if (num === startLineNumber - 1) {//获取起始行最近的回车的下标+起始行的起始列
endIndex = index + startColumn
}
}
}
})
} else if (startLineNumber === endLineNumber) {//当起始行=结束行(方向:从左到右,从右到左)
monacoEditor.getValue().split('').map((item, index) => {
if (endLineNumber === 1) {
startIndex = startColumn < endColumn ? startColumn - 1 : endColumn - 1
endIndex = startColumn > endColumn ? startColumn - 1 : endColumn - 1
} else {
if (item === '\n') {
num += 1
if (num === endLineNumber - 1) {
startIndex = startColumn < endColumn ? startColumn + index : endColumn + index
endIndex = startColumn > endColumn ? startColumn + index : endColumn + index
}
}
}
})
}
currentText = monacoEditor.getValue().slice(startIndex, endIndex)
return currentText
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
代码提示
monaco.languages.registerCompletionItemProvider('sql', {
provideCompletionItems: function(model, position) {
// 获取当前行数
const line = position.lineNumber;
// 获取当前列数
const column = position.column;
// 获取当前输入行的所有内容
const content = model.getLineContent(line)
// 通过下标来获取当前光标后一个内容,即为刚输入的内容
const sym = content[column - 2];
var textUntilPosition = model.getValueInRange({startLineNumber: 1, startColumn: 1, endLineNumber: position.lineNumber, endColumn: position.column});
var word = model.getWordUntilPosition(position);
var range = {
startLineNumber: position.lineNumber,
endLineNumber: position.lineNumber,
startColumn: word.startColumn,
endColumn: word.endColumn
};
//---------------------------------------------------
//上面的代码仅仅是为了获取sym,即提示符
//---------------------------------------------------
var suggestions = [];
if(sym == "$"){
//...
//拦截到用户输入$,开始设置提示内容,同else中代码一致,自行拓展
}else{
//直接提示,以下为sql语句关键词提示
var sqlStr = ['SELECT','FROM','WHERE','AND','OR','LIMIT','ORDER BY','GROUP BY'];
for(var i in sqlStr){
suggestions.push({
label: sqlStr[i], // 显示的提示内容
kind: monaco.languages.CompletionItemKind['Function'], // 用来显示提示内容后的不同的图标
insertText: sqlStr[i], // 选择后粘贴到编辑器中的文字
detail: '', // 提示内容后的说明
range:range
});
}
}
return {
suggestions: suggestions
};
},
triggerCharacters: ["$",""]
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
# 编辑器插件(vue-monaco-editor-pro)
vue-monaco-editor-pro
是基于 Monaco editor 开发的简易版 web 端代码编辑器 Vue 组件。
GitHub 地址:https://github.com/zlluGitHub/vue-monaco-editor-pro (opens new window)
# 参考资料
官方參考地址:https://microsoft.github.io/monaco-editor/ (opens new window) GitHub地址:https://github.com/microsoft/monaco-editor (opens new window)
上次更新: 2024/01/30, 00:35:17
- 01
- Node与GLIBC_2.27不兼容解决方案08-19
- 02
- Git清空本地文件跟踪缓存08-13