vsCode 之 Monaco Editor 在 vue-cli3.0 中的使用方法

# 开始安装

安装 monaco-editor 包

npm install monaco-editor --save

安装 monaco-editor-webpack-plugin 插件，这个必须安装，不然起不来

npm install monaco-editor-webpack-plugin --save

# 配置文件

在 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

或者

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

# 在 vue 中使用

添加容器

<div ref="main"></div>

引入组件

import * as monaco from 'monaco-editor/esm/vs/editor/editor.main.js'
import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution'

1
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

语言支持（当然支持自定义语言）

var modesIds = monaco.languages.getLanguages().map(function(lang) { return lang.id; });

文件改动状态

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

更改编辑器语言

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

更改编辑器配置

//此例为更改编辑器为只读模式,其余以此类推
this.editor.updateOptions({readOnly:true})

1
2

触发编辑器事件

//此为格式化代码,anything无用，后一个参数为action事件，自行查找，我也就找到这么一个
this.editor.trigger('anything','editor.action.formatDocument');

1
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

代码提示

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

# 编辑器插件（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)

#Vue

上次更新: 2024/01/30, 00:35:17

← Vite项目构建优化之移除console.log和其他生产日志 vue cli3 中的使用Luckysheet和Luckyexcel→