Monaco Editor -岩石教程

特色

多语言支持: 支持 JavaScript、TypeScript、Python、C++ 等多种编程语言的语法高亮和代码提示。
智能编辑功能: 提供智能代码补全、语法错误提示、代码折叠等功能。
可扩展性: 支持插件和自定义扩展，用户可以根据需要定制编辑器功能。
强大的 API: 提供丰富的 API，便于集成和定制各种编辑功能。
响应式设计: 支持桌面浏览器，不支持移动浏览器。

安装方式

使用 npm 安装：

npm install monaco-editor

安装后，会有以下目录结构：

/esm: ESM 版本，适用于如 webpack 等模块打包工具。
/dev: AMD 打包，未压缩版本。
/min: AMD 打包，压缩版本。
/min-maps: 压缩版本的源映射。
monaco.d.ts: 定义编辑器 API 的 TypeScript 类型声明文件。

使用方式

以下是一个基本的示例，展示如何在网页中集成 Monaco Editor：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Monaco Editor</title>
  <script src="https://cdn.jsdelivr.net/npm/monaco-editor/min/vs/loader.js"></script>
  <style>
    #container {
      width: 800px;
      height: 600px;
      border: 1px solid grey;
    }
  </style>
</head>
<body>
  <div id="container"></div>
  <script>
    require.config({ paths: { 'vs': 'https://cdn.jsdelivr.net/npm/monaco-editor/min/vs' }});
    require(['vs/editor/editor.main'], function() {
      monaco.editor.create(document.getElementById('container'), {
        value: [
          'function x() {',
          '\tconsole.log("Hello world!");',
          '}'
        ].join('\n'),
        language: 'javascript'
      });
    });
  </script>
</body>
</html>

高级用法

主题自定义

Monaco Editor 允许用户自定义主题，以适应不同的需求：

monaco.editor.defineTheme('myCustomTheme', {
  base: 'vs-dark', // 可以是 'vs', 'vs-dark', 或 'hc-black'
  inherit: true,
  rules: [
    { token: 'comment', foreground: 'ffa500', fontStyle: 'italic underline' },
    { token: 'keyword', foreground: '00ff00', fontStyle: 'bold' },
    { token: 'number', foreground: 'ff0000' },
  ],
  colors: {
    'editor.foreground': '#F8F8F8',
    'editor.background': '#202020',
    'editorCursor.foreground': '#A7A7A7',
    'editor.lineHighlightBackground': '#0000FF20',
    'editorLineNumber.foreground': '#008800',
    'editor.selectionBackground': '#88000030',
    'editor.inactiveSelectionBackground': '#88000015'
  }
});

monaco.editor.setTheme('myCustomTheme');

多编辑器实例

在同一页面中创建多个编辑器实例：

const editor1 = monaco.editor.create(document.getElementById('container1'), {
  value: 'console.log("Editor 1");',
  language: 'javascript'
});

const editor2 = monaco.editor.create(document.getElementById('container2'), {
  value: 'console.log("Editor 2");',
  language: 'javascript'
});

API 介绍

常用api

以下是 Monaco Editor 的主要 API 及其参数介绍：

API	参数	描述
`monaco.editor.create`	`domElement, options`	创建一个新的编辑器实例。
`setValue`	`newValue`	设置编辑器的内容。
`getValue`	`options`	获取编辑器的内容。
`updateOptions`	`newOptions`	更新编辑器配置。
`layout`	`dimension`	调整编辑器布局。
`dispose`	无	释放编辑器资源。
`onDidChangeModelContent`	`listener`	注册内容变化的监听器。
`defineTheme`	`themeName, themeData`	定义新的编辑器主题。
`setTheme`	`themeName`	应用已定义的主题。
`createModel`	`value, language, uri`	创建新的模型。
`getModel`	`uri`	获取模型。
`disposeModel`	`model`	释放模型资源。

`options` 参数详解

monaco.editor.create 方法用于在指定的 DOM 元素中创建一个 Monaco Editor 实例。此方法接受两个参数：DOM 元素和配置对象（options）。配置对象用于定制编辑器的行为和外观。以下是 options 参数的详细介绍。

monaco.editor.create(domElement, options);

参数	类型	默认值	描述
`value`	`string`	`''`	初始内容。
`language`	`string`	`''`	代码语言，决定语法高亮规则。
`theme`	`string`	`'vs'`	编辑器主题，例如 `'vs-dark'` 或 `'hc-black'`。
`readOnly`	`boolean`	`false`	是否只读。
`lineNumbers`	`string`	`'on'`	行号显示方式：`'on'`、`'off'`、`'relative'` 或 `function`。
`tabSize`	`number`	`4`	Tab 宽度，以空格数表示。
`insertSpaces`	`boolean`	`true`	按 Tab 键时是否插入空格。
`wordWrap`	`string`	`'off'`	自动换行方式：`'off'`、`'on'`、`'wordWrapColumn'` 或 `'bounded'`。
`minimap`	`object`	`{ enabled: true }`	小地图设置，如 `{ enabled: false }` 关闭小地图。
`lineDecorationsWidth`	`number`/`string`	`10`	行装饰宽度，可以为数字或字符串。
`renderLineHighlight`	`string`	`'all'`	行高亮显示：`'none'`、`'gutter'`、`'line'` 或 `'all'`。
`codeLens`	`boolean`	`true`	是否启用 CodeLens。
`folding`	`boolean`	`true`	是否启用代码折叠。
`renderWhitespace`	`string`	`'none'`	空白字符显示：`'none'`、`'boundary'`、`'selection'` 或 `'all'`。
`suggestOnTriggerCharacters`	`boolean`	`true`	输入触发字符时是否显示建议。
`acceptSuggestionOnEnter`	`string`	`'on'`	按 Enter 键时是否接受建议：`'on'`、`'smart'` 或 `'off'`。
`parameterHints`	`boolean`	`true`	是否启用参数提示。
`matchBrackets`	`string`	`'always'`	括号匹配显示：`'never'`、`'near'` 或 `'always'`。
`autoClosingBrackets`	`string`	`'languageDefined'`	自动闭合括号：`'always'`、`'languageDefined'` 或 `'never'`。
`autoIndent`	`string`	`'advanced'`	自动缩进：`'none'`、`'keep'`、`'brackets'`、`'advanced'` 或 `'full'`。
`formatOnType`	`boolean`	`false`	输入时是否自动格式化。
`formatOnPaste`	`boolean`	`false`	粘贴时是否自动格式化。
`scrollBeyondLastLine`	`boolean`	`true`	是否可以滚动到最后一行之后。
`smoothScrolling`	`boolean`	`false`	是否启用平滑滚动。
`glyphMargin`	`boolean`	`true`	是否启用字符边距。
`lightbulb`	`object`	`{ enabled: true }`	是否启用代码操作提示灯泡。
`hover`	`boolean`	`true`	是否启用悬停提示。
`links`	`boolean`	`true`	是否启用链接检测。
`occurrencesHighlight`	`boolean`	`true`	是否启用相同符号高亮。
`cursorBlinking`	`string`	`'blink'`	光标闪烁方式：`'blink'`、`'smooth'`、`'phase'` 或 `'expand'`。
`cursorStyle`	`string`	`'line'`	光标样式：`'block'`、`'line'` 或 `'underline'`。
`cursorWidth`	`number`	`1`	光标宽度，仅在 `cursorStyle` 为 `'line'` 时有效。

官方资料

更多关于 Monaco Editor 的信息和示例，请参考以下资源：

Monaco Editor

特色