[英]Monaco editor react electron stuck on loading
所以我試圖讓摩納哥與 react 和 electron 一起工作,它加載了加載程序文件,但它一直在加載。 初始化 function 不運行 console.log promise 與 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;
得到它的工作。 這是代碼:
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;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.