# monaco-editor

# 1. 介绍

Web 代码编辑器

# 2. 安装

依赖：

npm i monaco-editor

npm i -D monaco-editor-webpack-plugin

webpack.base.conf.js：

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
module.exports = {
  // ...
  plugins: [
    // ...
    new MonacoWebpackPlugin(),
  ],
};

# 3. 创建

import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';

const editor = monaco.editor.create(this.$el, {
  value: 'const num = 1;',
  language: 'javascript',
});

// 获取编辑器里的内容
editor.getValue();

// 查看支持的语言
const languages = monaco.languages.getLanguages().map((lang) => lang.id);

# 属性

name	value	desc
automaticLayout	boolean	Enable that the editor will install an interval to check if its container dom node size has changed. Enabling this might have a severe performance impact.
minimap.enabled	boolean	Enable the rendering of the minimap.

# 4. 方法

# 4.1. layout

语法：

layout(dimension?: IDimension): void;
interface IDimension { width: number; height: number; }

说明：

重新设置 editor 的大小

示例：

// 浏览器大小变化时重新设置 editor 的大小
window.onresize = () => editor.layout();

# 5. 事件

监听内容改变：

editor.onDidChangeModelContent(() => {
  const currentContent = editor.getValue();
});

其他：

onDidFocusEditorWidget

# 6. 快捷键

// Ctrl + S , 添加后，浏览器的默认行为将被禁用
editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
  //
});

# 7. 参考

本章目录