在前端技术领域,我们经常会有需要使用编辑器的场景,而monaco我愿之为最强,因为这是Vscode官方同一批开发人员开发出来的Web版本,简称Web的Vscode。

我们在使用monacoEditor时,经常会与本地文件做挂钩,并可能有如下的操作:

const model = monacoEditor.editor.createModel(
            value,
            undefined,
            monacoEditor.Uri.file(file.name)
          )
          window.editor?.setModel(model)

这时候,如果我们重复使用同一个文件的话,就会产生这个错误:Cannot add model because it already exists!

故名思义,就是:这个model已经存在了,不要声明同样的model。

解决方案:

monacoEditor.editor.getModels().forEach(model => model.dispose())

在使用前,先清一遍已存在的model