js 插件

monaco-editor（摩纳哥编辑器）

微软之前有个项目叫做Monaco Workbench，后来这个项目变成了VSCode，而Monaco Editor（下文简称monaco） 就是从这个项目中成长出来的一个web编辑器，他们很大一部分的代码（monaco-editor-core）都是共用的，所以monaco 和VSCode在编辑代码，交互以及UI上几乎是一摸一样的，有点不同的是，两者的平台不一样，monaco基于浏览器，而VSCode基于electron， 所以功能上VSCode更加健全，并且性能比较强大。

引入方式分为 AMD、ESM 两种方式

• AMD

  <div id="editor"style="width: 800px; height: 600px; border: 1px solid grey"></div>
  

  <script src="../../monaco-editor-0.31/package/min/vs/loader.js"></script>
  require.config({ paths: { vs: '../../monaco-editor-0.31/package/min/vs' } });
  require(['vs/editor/editor.main'], function () {
      var editor = monaco.editor.create(document.getElementById('editor'), {
          // value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),//打印value可以获取到
          language: 'sql',
          automaticLayout: true
      });
  });
  //获取选中编辑器内容的方法
  monacoEditor.getModel().getValueInRange(monacoEditor.getSelection())
  // 获取编辑器内容
  monacoEditor.getValue()
  

• ESM

  此版本 是基于 vite 的版本，尤雨溪已经处理过了，所以不需要在配置文件进行配置了，基于webpack 需要在webpack.config.js 添加额外配置 monaco-editor 使用

  npm install monaco-editor -S //安装monaco-editor
  

  <template>
    <div id="monacoEdit" style="width: 500px;height: 500px;text-align: left"></div>
  </template>
  
  <script>
  import * as monaco from 'monaco-editor'
  import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
  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';
  export default {
    name: "monacoEditor",
    mounted() {
      self.MonacoEnvironment = {
        getWorker(_, label) {
          if (label === 'json') {
            return new jsonWorker();
          }
          if (label === 'css' || label === 'scss' || label === 'less') {
            return new cssWorker();
          }
          if (label === 'html' || label === 'handlebars' || label === 'razor') {
            return new htmlWorker();
          }
          if (label === 'typescript' || label === 'javascript') {
            return new tsWorker();
          }
          return new editorWorker();
        }
      };
      monaco.editor.create(document.getElementById('monacoEdit'),{
        language:'javascript'
      })
    }
  }
  </script>