monaco editor代码编辑器

vue3 + vite环境搭建

1. 安装依赖

dependencies: {
    "monaco-editor": "^0.33.0",
    "monaco-editor-auto-typings": "^0.4.2",
},
devDependencies: {
    "vite-plugin-monaco-editor": "^1.1.0",
}

2. vite插件配置

import monacoEditorPlugin from "vite-plugin-monaco-editor"

plugins: [
    [
      monacoEditorPlugin({
      }),
    ]
]

3. 初始化

<div id="code-container" ref="codeContainer" style="height: 90%; width: 300px"></div>

this.editor = monaco.editor.create(this.$refs.codeContainer as HTMLElement, {
          value: defaultCode,
          language: 'javascript',
          readOnly: true,
          minimap: {
            enabled: false
          },
        });

配置项

1. minimap
   迷你地图

minimap: {
  enabled: false
},

常见配置

getAction('editor.action.formatDocument').run();

// 实现双向绑定
editor.onDidChangeModelContent((a, b, c) => {
	this.$emit('update:modelValue', toRaw(editor.value).getValue());
});

• trigger

action自定义快捷键

1. Ctrl+D = 删除行

editor.addAction({
  id: "save",
  label: "save",
  keybindings: [
    monaco.KeyMod.chord(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyD),
  ],
  run: function (e, args) {
    e.getAction("editor.action.deleteLines").run();
  },
});

在VScode中寻找命令