使用monaco-editor插件报错contextKeyService.js:340 Element already has context attribute: editorBoxStyle

项目场景：

项目场景：在vue项目封装使用monaco-editor这个插件时报错contextKeyService.js:340 Element already has context attribute: editorBoxStyle
查阅百度解决方案：问题大部分是gitHub里面的,访问需要梯子，里面内容全英。

---

问题描述

项目问题：有两个地方调用，我们只打开第一个没有错误，当第一个没有关闭，打开第二个会出现问题一，在打开第一个会出现问题二。

1. 编辑器出现空白并且不可输入

2. 打开另外一个地方的调用，会出现两个

项目报错如下：

---

原因分析：

在创建编辑器的时候通过操作dom来创建的document.getElementById('sonIdT.value')这里通过id名获取元素，在这个元素里面创建编辑器，当有多个地方调用时，只会获取最前面的那个，所以id名不能是固定的，要一一对应，我的解决方法是传个变量document.getElementById(sonIdT.value)

 editor = monaco.editor.create(document.getElementById(sonIdT.value), {
        model: model, // 采用model的形式
        value: props.content,
        language: props.language,
        theme: props.theme,
        tabCompletion: 'on',
        cursorSmoothCaretAnimation: true,
        formatOnPaste: true,
        mouseWheelZoom: true,
        folding: true, //代码折叠
        autoClosingBrackets: 'always',
        autoClosingOvertype: 'always',
        autoClosingQuotes: 'always',
        selectOnLineNumbers: true,//显示行号
        roundedSelection: false,
        readOnly: false, // 只读
        cursorStyle: 'line', //光标样式
        automaticLayout: true, //自动布局
        glyphMargin: true, //字形边缘
        useTabStops: false,
        fontSize: 14, //字体大小
        autoIndent: true, //自动布局
        quickSuggestionsDelay: 100, //代码提示延时
        minimap: {
          enabled: false // 不要小地图
        }
      })

---

解决方案：

传个变量document.getElementById(sonIdT.value)每个编辑器都对应唯一一个id名。

至此，效果实现。本文仅供参考，是博主本人遇见的问题与解决方案。