Monaco Editor 的基本使用及 Vue 组件封装_monaco-editor

Monaco Editor 是一个功能强大且灵活的代码编辑器，它是 VS Code 中使用的编辑器的基础，并且可以轻松集成到 Web 应用程序中。在本文中，我们将介绍如何基本使用 Monaco Editor，并通过封装 Vue 组件来更方便地在 Vue 项目中使用。

步骤一：Monaco Editor 的基本使用

1. 首先，在项目中安装 monaco-editor 和 monaco-editor-webpack-plugin，以安装0.24.0版本为例，我这里用的node版本是16的，安装的时候需要注意版本的兼容，比如node 14版本安装会报错

npm install monaco-editor@0.24.0 --force
npm install monaco-editor-webpack-plugin@3.1.0 --force
1
2

2. 在 Vue 组件中引入 Monaco Editor：

import * as monaco from 'monaco-editor';
1

3. 创建一个容器来显示 Monaco Editor

 <div ref="codeContainer" class="coder-editor"/>
1

4. 初始化 Monaco Editor：

const editor = monaco.editor.create(document.getElementById('editor'), {
  value: 'const hello = "Hello World!"',
  language: 'javascript',
});
1
2
3
4

步骤二：封装 Vue 组件

为了方便在 Vue 项目中重复使用 Monaco Editor，我们可以封装成一个 Vue 组件。以下是简单的封装方法
codeeditor.vue

<template>
  <div>
    <div ref="codeContainer" class="coder-editor"/>
  </div>
</template>

<script>
import * as monaco from 'monaco-editor'

export default {
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    language: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      monacoEditor: null, // 语言编辑器,
      monacoEditorConfig: {
        automaticLayout: true, // 自动布局
        theme: 'vs-dark', // 官方自带三种主题vs, hc-black, or vs-dark
        minimap: {
          enabled: true // 关闭小地图
        },
        lineNumbers: 'on' // 隐藏控制行号
      }
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      if (this.$refs.codeContainer) {
        // 初始化编辑器，确保dom已经渲染
        const config = Object.assign({}, this.monacoEditorConfig, {
          language: this.language,
          value: this.value
        })
        this.monacoEditor = monaco.editor.create(
          this.$refs.codeContainer,
          config
        )
        // 编辑器绑定事件
        this.monacoEditorBindEvent()
      }
    },
    // 销毁编辑器
    monacoEditorDispose () {
      this.monacoEditor && this.monacoEditor.dispose()
    },
    // 获取编辑器的值
    getCodeVal () {
      const content = this.monacoEditor && this.monacoEditor.getValue()
      if (!content) {
        this.$message.error('不能为空, 提交失败')
      }
      return content
    },
    // 编辑器事件
    monacoEditorBindEvent () {
      if (this.monacoEditor) {
        // 实时获取编辑器的值
        this.monacoEditor.onDidChangeModelContent(() => {
          this.$emit('change', this.monacoEditor.getValue())
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .coder-editor {
    width: 100%;
    height: 300px;
    border: 1px solid rgba(0, 0, 0, 0.08);
  }
</style>

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
79
80
81
82
83
84
85
86
87
88
89

在使用的是vue文件中引用即可：

import CodeEditor from '@/components/CodeEditor'
<code-editor
              ref="editor"
              v-model="exampleData.formData.metadataString"
              language="JSON"
            />
1
2
3
4
5
6

总结

通过以上步骤，我们了解了如何基本使用 Monaco Editor，并封装成 Vue 组件以便在 Vue 项目中使用。Monaco Editor 提供了强大的代码编辑功能，而封装为 Vue 组件则让我们更方便地在项目中集成和使用。希望本文对您有所帮助！如果您有任何问题或想进一步了解，请随时与我联系。祝您编程愉快！