当用户单击
show code
按钮时如何格式化摩纳哥编辑器内的代码?我已经尝试过 formatOnPaste: true
但当您以编程方式更新代码(使用 useState)时它似乎不起作用
这里是演示(请务必单击
show code
按钮)
import Editor from "@monaco-editor/react";
import { useState } from "react";
export default function App() {
const [code, setCode] = useState("");
const handleShowCodeClick = () => {
const newCode = "const consoleText = (text) => {console.log(text)}";
setCode(newCode);
};
return (
<div>
<Editor
value={code}
height="500px"
theme="vs-dark"
options={{
formatOnPase: true
}}
language="javascript"
onChange={(newCode) => setCode(newCode as string)}
/>
<button onClick={handleShowCodeClick}>Show code</button>
</div>
);
}
实际结果:
const consoleText = (text) => {console.log(text)}
预期结果:
const consoleText = (text) => {
console.log(text)
}
分享此内容,以防有人正在使用
monaco-editor/react
并希望使用按钮格式化编辑器内容。
我使用这样的方法很幸运:
const handleEditorDidMount = (editor, monaco) => {
monacoRef.current = editor;
setTimeout(() => {
monacoRef.current.hb.get('editor.action.formatDocument').b();
}, 1000);
};
<Editor
// props
onMount={handleEditorDidMount}
/>
我使用此方法将
ref
传递给具有按钮的不同组件;然后以同样的方式调用该函数。