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
推荐阅读:https://zhuanlan.zhihu.com/p/496562929
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}
/>
</>
);
}
更多:https://github.com/suren-atoyan/monaco-react
编译器demo
200行的js小编译器(Lisp -> JS) https://juejin.cn/post/6844904105937207304