Vue2中使用Monaco Editor的教程详解

monaco-editor:"0.45.0"
monaco-editor-webpack-plugin:"7.1.0"

const { defineConfig } = require('@vue/cli-service')
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    // webpack 配置
    plugins: [
      // 其他插件...
      new MonacoWebpackPlugin(),
    ],
  },
  
})

<template>
  <div>
    <div ref="editorContainer" style="height: 500px; width: 500px;" class="editor-container"></div>
  </div>
</template>

import * as monaco from "monaco-editor";

export default {
  name: "Editor",
  data() {
    return {
      // Monaco Editor 实例
      editor: null,
      // T9 自动完成项提供者实例
      hoverProvider: null,
      // 语言注册实例
      languages: null,
      // 初始代码
      code: "",
    };
  },
  mounted() {
    // 在组件挂载后初始化编辑器
    this.initEditor();
  },
  beforeDestroy() {
    // 在组件销毁前处理，销毁编辑器和相关提供者
    this.disposeEditor();
  },
  methods: {
    initEditor() {
      // 使用指定配置初始化 Monaco Editor
      this.editor = monaco.editor.create(this.$refs.editorContainer, {
        // 初始代码
        value: this.code,
        // 指定语言为 JavaScript
        language: "javascript",
        // 主题配置
        theme: "vs-dark", // 使用暗色主题
        // 其他编辑器配置选项
        readOnly: false, // 是否只读
        automaticLayout: true, // 自动布局
        lineNumbers: "on", // 显示行号
        fontFamily: "Consolas, 'Courier New', monospace", // 字体设置
        fontSize: 14, // 字体大小
        tabSize: 2, // 制表符大小
        wordWrap: "on", // 自动换行
        scrollBeyondLastLine: false, // 是否允许滚动超过最后一行
        minimap: {
          enabled: true, // 是否显示缩略图
        },
      });

      // 为 JavaScript 语言注册 T9 自动完成项提供者
      monaco.languages.registerCompletionItemProvider("javascript", {
        provideCompletionItems: (model, position) => {
          const word = model.getWordUntilPosition(position);
          const suggestions = [
            {
              label: "console",
              kind: monaco.languages.CompletionItemKind.Function,
              insertText: "console",
              range: {
                startLineNumber: position.lineNumber,
                startColumn: word.startColumn,
                endLineNumber: position.lineNumber,
                endColumn: word.endColumn,
              },
            },
            // 添加其他 T9 提示项
            {
              label: "guid",
              kind: monaco.languages.CompletionItemKind.Function,
              insertText: "guid",
              range: model.getWordAtPosition(position).range,
              detail: "xxxxx",
            },
          ];

          return {
            suggestions: suggestions,
          };
        },
      });

      // 为 JavaScript 语言注册悬停提供者
      monaco.languages.registerHoverProvider("javascript", {
        provideHover: (model, position) => {
          const guid = model.getWordAtPosition(position);
          if (guid) {
            return {
              contents: [
                {
                  value: `自定义提示: ${guid.word}`,
                },
              ],
              range: model.getWordAtPosition(position).range,
            };
          }
        },
      });
    },
    disposeEditor() {
      // 在组件销毁前处理，销毁编辑器并注销悬停提供者和语言注册
      if (this.editor) {
        this.editor.dispose();
      }
      if (this.hoverProvider) {
        this.hoverProvider.dispose();
      }
      if (this.languages) {
        this.languages.dispose();
      }
    },
    shouldShowHover(word) {
      // 定义显示悬停的条件
      // 例如，仅在单词为 'guid' 时显示悬停
      return word === "guid";
    },
  },
};

<style scoped>
  /* 可以在这里添加一些样式 */
  .editor-container {
    padding: 50px;
  }
</style>

<template>
  <div>
    <!-- 其他组件或元素 -->

    <!-- 包含 CodeEditor 组件 -->
    <CodeEditor :code="yourJavaScriptCode" />

    <!-- 其他组件或元素 -->
  </div>
</template>

<script>
import CodeEditor from "@/components/CodeEditor.vue";

export default {
  components: {
    CodeEditor,
  },
  data() {
    return {
      yourJavaScriptCode: "console.log('Hello, World!');",
    };
  },
};
</script>