摩纳哥编辑器反应电子卡在加载答案

【问题标题】：Monaco editor react electron stuck on loading摩纳哥编辑器反应电子卡在加载
【发布时间】：2020-12-12 12:44:19
【问题描述】：

所以我试图让 monaco 使用 react 和 electron，它会加载加载程序文件，但它在加载时卡住了。 init 函数不运行 console.log 与 monaco 实例的承诺。我做错了什么？


import React, { useEffect, useRef, useState } from "react";
import Editor, { monaco } from "@monaco-editor/react";

const path = window.require("path");

function ensureFirstBackSlash(str) {
  return str.length > 0 && str.charAt(0) !== "/" ? "/" + str : str;
}

function uriFromPath(_path) {
  const pathName = path.resolve(_path).replace(/\\/g, "/");
  return encodeURI("file://" + ensureFirstBackSlash(pathName));
}

function App() {
  useEffect(() => {
    monaco.config({
      paths: {
        vs: uriFromPath(path.join(__dirname, "node_modules/monaco-editor/min")),
      },
    });

    monaco.init().then((monacoInstance) => console.log(monacoInstance));
  }, []);

  return (
    <div>
        <Editor width="500" height="500" language="javascript" value={""} />
      </div>
    </div>
  );
}

export default App;

【问题讨论】：

我的加载消息消失了，但它现在是一个空屏幕。电子抛出错误GL ERROR :GL_INVALID_FRAMEBUFFER_OPERATION : glDrawArrays: framebuffer incomplete

标签： javascript node.js reactjs electron

【解决方案1】：

搞定了。代码如下：

import "devextreme/dist/css/dx.common.css";
import "devextreme/dist/css/dx.light.css";
import React, { useEffect, useRef, useState } from "react";
import TreeView from "devextreme-react/tree-view";
import Sortable from "devextreme-react/sortable";
import Editor, { monaco } from "@monaco-editor/react";

const path = require("path");

const electron = window.require("electron");
const { dialog } = electron.remote;
const appPath = electron.remote.app.getAppPath();

const dirTree = window.require("directory-tree");

const fs = window.require("fs");

function ensureFirstBackSlash(str) {
  return str.length > 0 && str.charAt(0) !== "/" ? "/" + str : str;
}

function uriFromPath(_path) {
  const pathName = path.resolve(_path).replace(/\\/g, "/");
  return encodeURI("file://" + ensureFirstBackSlash(pathName));
}

monaco.config({
  paths: {
    vs: uriFromPath(path.join(appPath, "node_modules/monaco-editor/min/vs")),
  },
});

monaco.init().then((monacoInstance) => {});

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

  const [currentFile, setCurrentFile] = useState(null);

  const [items, setItems] = useState([]);

  useEffect(() => {}, []);

  const options = {
    selectOnLineNumbers: true,
    roundedSelection: false,
    readOnly: false,
    cursorStyle: "line",
    automaticLayout: false,
  };

  const onDragChange = (e) => {};

  const onDragEnd = (e) => {};

  const selectFile = (e) => {
    const data = fs.readFileSync(e.itemData.path, "utf8");
    console.log(data);
    setCurrentFile(data);
  };

  const openFolder = () => {
    const directory = dialog.showOpenDialogSync(null, {
      properties: ["openDirectory"],
    });

    if (!directory) return;

    const files = dirTree(directory[0]);

    console.log(files);
    setItems([files]);

    console.log(directory);
  };

  return (
    <div style={{ height: "100%" }}>
      <Editor language="javascript" value={"123"} />
    </div>
  );
}

export default App;

【讨论】：