Monaco Editor在线编辑器搭建教程

学习文章要努力，但是不要急！今天的这篇文章《Monaco Editor在线编辑器搭建教程》将会介绍到等等知识点，如果你想深入学习文章，可以关注我！我会持续更新相关文章的，希望对大家都能有所帮助！

首先通过npm或CDN引入Monaco Editor，然后创建容器并调用monaco.editor.create()初始化实例，配置language和theme设置语言与主题，最后通过registerCompletionItemProvider和setModelMarkers实现自动补全与错误提示，完成在线代码编辑器搭建。

Monaco Editor 是由微软开发的浏览器端代码编辑器，也就是 Visual Studio Code 的核心编辑器组件。它功能强大，支持语法高亮、智能提示、错误检查、代码折叠、自动补全等特性，非常适合用来构建在线代码编辑器。以下是快速搭建一个基础在线代码编辑的基本步骤。

引入 Monaco Editor

使用 Monaco Editor 最简单的方式是通过 monaco-editor npm 包结合 Webpack 或 Vite 等打包工具。也可以通过 CDN 快速引入进行测试。

npm install monaco-editor

然后在项目中导入：

import * as monaco from 'monaco-editor';

方法二：CDN 引入（适合原型或演示）

在 HTML 文件中加入：

<script src="https://unpkg.com/monaco-editor@latest/min/vs/loader.js"></script>

初始化编辑器实例

创建一个容器元素用于承载编辑器，并调用 monaco.editor.create() 初始化。

HTML 结构：

<div id="container"   style="max-width:100%"></div>

JavaScript 初始化：

require.config({ paths: { 'vs': 'https://unpkg.com/monaco-editor@latest/min/vs' } });
require(['vs/editor/editor.main'], function() {
  monaco.editor.create(document.getElementById('container'), {
    value: 'function hello() {\n\tconsole.log("Hello, Monaco!");\n}',
    language: 'javascript',
    theme: 'vs-dark',
    automaticLayout: true
  });
});

automaticLayout: true 非常重要，它让编辑器自动适应容器尺寸变化。

配置语言与主题

Monaco 支持多种编程语言，设置 language 参数即可切换语法高亮和提示行为。

例如：

• language: 'html'
• language: 'css'
• language: 'typescript'
• language: 'json'

内置主题包括：

• vs - 浅色主题
• vs-dark - 深色主题
• hc-black - 高对比度黑色

也可自定义主题，通过 monaco.editor.defineTheme 实现。

增强功能：自动补全与错误提示

Monaco 允许你扩展语言功能，比如添加自定义补全项或模拟诊断信息（如语法错误）。

示例：为 JavaScript 添加简单的补全提示：

monaco.languages.registerCompletionItemProvider('javascript', {
  provideCompletionItems: () => {
    return {
      suggestions: [
        {
          label: 'myFunction',
          kind: monaco.languages.CompletionItemKind.Function,
          insertText: 'function myFunction() {}',
          documentation: 'Insert a custom function'
        }
      ]
    };
  }
});

添加错误提示（模拟）：

monaco.editor.setModelMarkers(editor.getModel(), 'owner', [{
  severity: monaco.MarkerSeverity.Error,
  message: 'Missing semicolon',
  startLineNumber: 2,
  startColumn: 24,
  endLineNumber: 2,
  endColumn: 25
}]);

基本上就这些。通过以上步骤，你可以快速集成 Monaco Editor 到网页中，打造一个具备专业 IDE 特性的在线代码编辑器。关键是正确加载资源、初始化编辑器，并根据需要扩展语言功能。虽然配置稍复杂，但灵活性极高，适合做在线 IDE、低代码平台或技术博客的交互式代码块。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。