一款开源、高颜值的网页版代码编辑器

戳上方蓝字“极客之家”关注我！

把一个 vscode 代码编辑器引入到 vue 项目分几步?

安装 Monaco Editor
封装组件
使用组件

搞定~! 言归正传，下面我们来深入浅出的分析一下如何将 VSCode编辑器引入到 vue 前端项目。

Monaco Editor

Monaco Editor 是由 Microsoft 开发的一款基于 Web 技术的开源代码编辑器，它是 Visual Studio Code 编辑器的核心。Monaco Editor 可以嵌入到网页中，提供类似于 Visual Studio Code 的编辑体验。

官方地址: microsoft.github.io…^[1]

优势及功能

轻量且高性能： Monaco Editor 是一款轻量级的编辑器，具有出色的性能。它专注于提供快速的代码编辑体验，适用于大型前端项目。
支持多种语言： Monaco Editor 支持多种编程语言，包括但不限于 JavaScript、TypeScript、HTML、CSS、JSON、Python 等。你可以根据项目需要切换不同的语言模式。
强大的语法高亮和代码提示： Monaco Editor 提供了高度可定制的语法高亮和代码提示功能，使得代码更易于阅读和编写。
智能代码补全： 编辑器具有智能的代码补全功能，可以根据你的输入和上下文提供准确的建议，提高编码效率。
支持多光标编辑： Monaco Editor 允许你使用多个光标进行同时编辑，从而更加灵活地进行代码重构和编辑。
集成调试支持： 在 VSCode 中内置的调试器可以与 Monaco Editor 集成，使得在编辑器中进行代码调试变得更加方便。
支持多种主题： Monaco Editor 提供了多种主题，你可以根据个人喜好选择适合你的编辑器外观。
可定制性强： Monaco Editor 具有丰富的配置选项和 API，可以根据项目需求进行高度的定制。你可以更改字体、颜色主题、键绑定等。
支持远程开发： 由于 Monaco Editor 是基于 Web 技术的，它支持远程开发，你可以在浏览器中访问代码并进行编辑，而不必在本地安装开发环境。
开源和活跃的社区： Monaco Editor 是开源项目，拥有活跃的社区支持和更新。这意味着你可以从社区中获得帮助，解决问题，并参与到项目的发展中。

安装方式

支持本地下载、npm 以及 CDN 等多种方式

npm install monaco-editor@0.45.0

在 vue 2 中封装 monaco-editor 组件

创建 MonacoEditor.vue 文件：创建一个 Vue 组件文件，例如 MonacoEditor.vue：

<!-- MonacoEditor.vue -->
<template>
  <div ref="editor" class="monaco-editor-container"></div>
</template>

<script>
// 引入 Monaco Editor
import * as monaco from 'monaco-editor';

export default {
  props: {
    // 代码内容
    code: {
      type: String,
      default: '',
    },
    // 编辑器语言
    language: {
      type: String,
      default: 'javascript',
    },
    // 编辑器主题
    theme: {
      type: String,
      default: 'vs-light', // 或 'vs-dark'
    },
  },
  data() {
    return {
      editor: null,
    };
  },
  mounted() {
    // 初始化编辑器
    this.initEditor();
  },
  watch: {
    // 监听代码内容变化
    code(newCode) {
      if (this.editor) {
        // 设置编辑器内容
        this.editor.setValue(newCode);
      }
    },
  },
  methods: {
    // 初始化编辑器
    initEditor() {
      // 创建 Monaco Editor 实例
      this.editor = monaco.editor.create(this.$refs.editor, {
        value: this.code,
        language: this.language,
        theme: this.theme,
      });

      // 监听编辑器内容变化
      this.editor.onDidChangeModelContent(() => {
        // 触发父组件更新代码内容
        this.$emit('update:code', this.editor.getValue());
      });
    },
  },
  beforeDestroy() {
    // 在组件销毁前销毁编辑器实例
    if (this.editor) {
      this.editor.dispose();
    }
  },
};
</script>

<style scoped>
.monaco-editor-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>

使用组件

<template>
  <div>
    <!-- 使用封装的 MonacoEditor 组件，并传递相关属性 -->
    <MonacoEditor
      v-model="code"
      :language="language"
      :theme="theme"
    />
  </div>
</template>

<script>
// 引入 MonacoEditor 组件
import MonacoEditor from '@/components/MonacoEditor.vue'; // 请根据实际路径进行调整

export default {
  components: {
    MonacoEditor,
  },
  data() {
    return {
      // 初始化代码内容
      code: 'console.log("你好，Monaco 编辑器！");',
      // 初始化编辑器语言
      language: 'javascript',
      // 初始化编辑器主题
      theme: 'vs-light',
    };
  },
};
</script>

常用配置属性：

常用方法：

更多的配置选项和 API，可以参考 Monaco Editor 的官方文档。

monaco-editor 如何隐藏右键菜单的默认项

以隐藏默认 Copy 和 Paste项为例

import * as monaco from 'monaco-editor/esm/vs/editor/editor.main';
import * as actions from 'monaco-editor/esm/vs/platform/actions/common/actions';

mounted(){
  // 此处省略 初始化manaco-editor
  
  // 获取 Monaco Editor 的菜单项注册表
    let menus = actions.MenuRegistry._menuItems;

    // 查找编辑器上下文菜单的注册条目
    let contextMenuEntry = [...menus].find(entry => entry[0]._debugName == 'EditorContext');

    // 从上下文菜单的注册条目中提取菜单项
    let contextMenuLinks = contextMenuEntry[1];

    // 要移除的菜单项的命令ID列表
    let removableIds = ['editor.action.clipboardCopyAction', 'editor.action.clipboardPasteAction'];

    // 移除菜单项的函数
    let removeById = (list, ids) => {
      let node = list._first;
      do {
        // 检查当前菜单项是否应该移除
        let shouldRemove = ids.includes(node.element?.command?.id);
        if (shouldRemove) {
          // 如果应该移除，则从链表中移除当前节点
          list._remove(node);
        }
      } while ((node = node.next)); // 遍历链表
    };

    // 通过调用 removeById 函数移除特定的菜单项
    removeById(contextMenuLinks, removableIds);
}