编译相关

无标签

前端

发布日期: 2022-06-11

文章字数: 638

阅读次数:

Monaco Editor

Monaco Editor 是一款开源的在线代码编辑器。它是 VSCode 的浏览器版本

使用

npm install monaco-editor

新建一个base文件夹，里面装着三件套

html + js + css三件套的代码

<!DOCTYPE html>
<html>

<head>
  <title>Monaco Editor Demo</title>
  <link rel="stylesheet" href="./style.css">
  <script src="../node_modules/monaco-editor/min/vs/loader.js"></script>
  <script src="./app.js"></script>
</head>

<body>
  <div id="header">基础版 Monaco Editor</div>
  <div id="root"></div>
</body>

</html>

body {
  font-family: "Source Han Sans", "San Francisco", "PingFang SC", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei", sans-serif;
  transition: background-color .2s;
}

#header {
  position: fixed;
  top: 0;
  left: 0;
  height: 50px;
  right: 0;

  background-color: #333;
  color: #fff;
  font-size: 20px;

  line-height: 50px;
  display: inline-block;
  vertical-align: middle;
  padding-left: 15px;

  overflow: hidden;
  z-index: 0;
}

.container {
  position: fixed;
  top: 50px;
  left: 0;
  height: calc(100vh - 50px);
  right: 0;

  margin: 0 auto;
  display: block;

  transition: 0.2s;
  overflow: hidden;
  z-index: 0;
}

require.config({ paths: { vs: "../node_modules/monaco-editor/min/vs" } });
require(["vs/editor/editor.main"], function () {
  // 初始化变量
  var fileCounter = 0;
  var editorArray = [];
  var defaultCode = [
    "function helloWorld() {",
    '   console.log("Hello world!");',
    "}",
  ].join("\n");

  // 新建一个编辑器
  function newEditor(container_id, code, language) {
    var model = monaco.editor.createModel(code, language);
    var editor = monaco.editor.create(document.getElementById(container_id), {
      model: model,
    });
    editorArray.push(editor);
    return editor;
  }

  // 新建一个 div
  function addNewEditor(code, language) {
    var new_container = document.createElement("DIV");
    new_container.id = "container-" + fileCounter.toString(10);
    new_container.className = "container";
    document.getElementById("root").appendChild(new_container);
    newEditor(new_container.id, code, language);
    fileCounter += 1;
  }

  addNewEditor(defaultCode, "javascript");
});

参考：https://zhuanlan.zhihu.com/p/88828576

vscode主题在monaco中的应用：https://segmentfault.com/a/1190000040746839

monaco-editor/react

它是一个Monaco编辑器包装器，使得我们可以在React中直接配置monaco-editor。React无需使用webpack（或任何其他模块捆绑器）配置文件/插件。它可以与由create-react-app、create-snowpack-app、vite或Next.js任何其他应用程序生成器生成的应用程序一起使用 -您无需弹出或重新连接它们。

使用

npm install @monaco-editor/react

在react脚手架中配置Editor组件即可

import React from "react";
import ReactDOM from "react-dom";

import Editor from "@monaco-editor/react";

function App() {
  return (
   <Editor
     height="90vh"
     defaultLanguage="javascript"
     defaultValue="// some comment"
   />
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

获取内容

有两种方法，反别是通过useRef获取Editor容器，然后容器ref.current.getValue()就是当前的值

另一种是直接绑定Editor的 onChange方法

function App() {
  const editorRef = useRef(null);

  function handleEditorDidMount(editor, monaco) {
    editorRef.current = editor;
  }

  function handleEditorChange(value, event) {
    console.log("here is the current model value:", value);
  }

  function showValue() {
    alert(editorRef.current.getValue());
  }

  return (
    <>
      <button onClick={showValue}>Show value</button>
      <Editor
        height="90vh"
        defaultLanguage="javascript"
        defaultValue="// some comment"
        onMount={handleEditorDidMount}
        onChange={handleEditorChange}
      />
    </>
  );
}