Monaco Editor的使用

概述

项目当中,难免会遇到代码编辑器的功能需求,自己实现肯定不现实的,因此开源库成为了首要选择,因此这里主要介绍Monaco Editor的使用,Monaco Editor 是一个浏览器端的代码编辑器库，同时它也是 VS Code 所使用的编辑器,因此该插件功能十分强大,但是官方的文档看着实在是不太友好,因此这里简单记录插件的基本使用

具体使用

安装

npm install monaco-editor

创建编辑器

import * as monaco from "monaco-editor";
import "./work.js";
window.onload = () => {
  const container = document.querySelector(".box");
  const value = `function hello() {
    alert('Hello world!');
  }`;

  const options = {
    value, //值
    language: "javascript", //语言
    theme: "vs-dark", //主题
    readOnly: true, //是否只读
    automaticLayout: true, // 自动布局
    minimap: {
      // 关闭小地图
      enabled: true,
    },
  };
  const editor = monaco.editor.create(container, options);
};

设置代码提示

一定要导入对应的代码提示文件,不然页面代码输入没有代码提示 ./work.js

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";

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.languages.typescript.typescriptDefaults.setEagerModelSync(true);

常用方法

editor.setValue('')//设置值
editor.getValue();//获取值

总结

更多的用法可以参考Monaco Editor在git上面的示例.