前言

接到需求需要实现一个能让用户在页面上直接编辑代码，立马就能再场景中看到效果的功能，经过了解和资料查找，最后决定用monaco editor 编辑代码。

1.安装

npm install monaco-editor

原来的代码使用vue3+vite,安装的都是最新版本

2.在vite.config.js中配置

// 强制预构建插件包
      optimizeDeps: {
        include: [
          `monaco-editor/esm/vs/language/json/json.worker`,
          `monaco-editor/esm/vs/language/css/css.worker`,
          `monaco-editor/esm/vs/language/html/html.worker`,
          `monaco-editor/esm/vs/language/typescript/ts.worker`,
          `monaco-editor/esm/vs/editor/editor.worker`
        ], 
      },

在我自己引入插件在组件中使用编译后发现插件压根不生效，才知道需要再vite.config中配置。

3.使用

在组件中引入所有插件

  import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
  import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
  import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
  import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
  import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
  import * as monaco from 'monaco-editor'

<div class="my-editor" id='js_editor'> </div>

 const jsOrigStr=ref('')
 const jsStr= ref('')
 const editorInit = () => {
      nextTick(()=>{
          monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
              noSemanticValidation: true,
              noSyntaxValidation: false
          });
          monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
              target: monaco.languages.typescript.ScriptTarget.ES2016,
              allowNonTsExtensions: true
          });
          let config= {
            automaticLayout: true, // 自适应布局  
            theme: 'vs-dark', // 官方自带三种主题vs, hc-black, or vs-dark
            foldingStrategy: 'indentation',
            renderLineHighlight: 'all', // 行亮
            selectOnLineNumbers: true, // 显示行号
            wordWrap:'on',
            formatOnPaste: true,
            minimap:{
                enabled: false,
            },
            readOnly: false, // 只读
            fontSize: 16, // 字体大小
            scrollBeyondLastLine: true, // 取消代码后面一大段空白 
            overviewRulerBorder: false, // 不要滚动条的边框  
          };
          !jsEditor ? jsEditor = monaco.editor.create(document.getElementById('js_editor'), {
              language: 'javascript', 
              value:jsOrigStr.value, // 编辑器初始显示文字
              ...config
            }) : 
            jsEditor.setValue(jsOrigStr);
      })
  }
  const jsStrInit = () =>{
   axios.get(`本地存放代码地址`).then(res =>{
    if(res.status == 200){
      jsOrigStr.value = res.data;
      jsEditor && jsEditor.setValue(jsOrigStr.value);    
    }
   })
  }
 
  const handleReset =() =>{ //重置编辑器显示到
    jsEditor && jsEditor.setValue(jsOrigStr.value);    
  }
  const handleRun =() =>{//运行编译器中代码
    jsStr.value =  jsEditor.getValue();
    //编译器中代码没法直接运行 new Function后直接调用
    let jsCode = new Function(jsStr.value);
    jsCode();   
  } 

  onMounted(()=>{
    editorInit();
    jsStrInit()
  })

  watchEffect(jsStrInit);

参考文章：www.cnblogs.com/azure-zero/…