Vue3代码编辑器monaco-edirot使用以及常见问题_vue3 代码编辑器

实现效果

1. 可以动态添加多个编辑器
2. 可以修改编辑器的语言
3. 可以全屏编写

常见问题（写在前面）

1. 如何全屏

const fullScreen = (id: number) => {
   //template.editors[id].editorObj 
   //这个就是你使用 monaco.editor.create() 这个函数得出的对象
  const element = template.editors[id].editorObj.getContainerDomNode()
  //将元素全屏
  element.requestFullscreen()
}
1
2
3
4
5
6
7

2. 切换编辑器语言卡顿问题（看了许多大佬的博文，同样的方法我就是不行，但是由于我是多个编辑器的原因，而且变量是局部变量，可能被内存回收了；我的猜测）

//我的是多个编辑器所以我使用了数组，这里的Index是数组的下标
const initEditor = (index) => {
  //获取页面元素
  const element = document.getElementById(`edit${index}`)
  //创建编辑器
  const editor = monaco.editor.create(element, {
    value: template.form.files[index].content,
    language: 'go',
    theme: 'vs-dark',
    automaticLayout: true
  })
  //将编辑器放入数组中管理
  template.editors[index] = {
    language: 'go',
    editorObj: editor,
    //这个方法很重要我是通过这个方法来实现对语言的切换的
    changeLanguage: () => monaco.editor.setModelLanguage(editor.getModel(), template.editors[index].language)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

快速上手 Monaco-Editor

1. 安装

   npm install monaco-editor
   1

2. 使用

   import * as monaco from 'monaco-editor'
   1

3. 创建编辑器

   <template>
   	<div id="editor" style="width:100%;height:100%"></div>
   </template>
   1
   2
   3

   monaco.editor.create(document.getElemeentById('editor'),{
   	value: '', //编辑器内容
   	language: '', //语言
   	theme: 'vs-dark',//主题
   	automaticLayout: true,//自动适应大小
   })
   1
   2
   3
   4
   5
   6

   这样编辑器就创建好了

参数介绍