1.3.16 • Published 10 months ago
react-monaco-editor-lite v1.3.16
react-monaco-editor-lite
如何使用
安装
npm install react-monaco-editor-lite
使用
多文件编辑器
import { MultiEditor } from 'react-monaco-editor-lite';
function IDE() {
const defaultFiles = {
'/src/app.jsx': `
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
(async () => {
const {Button} = await import('./Button.jsx');
const root = document.getElementById('root');
ReactDOM.render((
<div>
<Button>Direct</Button>
</div>
), root);
})();
`,
'/src/app.css': 'body { background: #fff }',
'/index.html': `
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="root"></div>
<script type="importmap">
{
"imports": {
"react": "https://cdn.skypack.dev/react",
"react-dom": "https://cdn.skypack.dev/react-dom",
"lodash": "https://cdn.skypack.dev/lodash"
}
}
</script>
<script type="module">
import './app/index.jsx';
import './index.js';
</script>
</body>
</html>
`,
'/src/test.ts': `
import { add } from './cc';
const App = () => {
console.log(add(1, 2));
};
export default App;
`,
'/src/cc.ts': `
export function add(a, b) {
return a + b;
}
export function minus(a, b) {
return a - b;
}
`
}
return (
<div style={{ width: '800px', height: '600px' }}>
<MultiEditor
defaultFiles={defaultFiles}
options={{
fontSize: 14,
automaticLayout: true,
}} />
</div>
)
}
export default IDE;
单文件编辑器
import { SingleEditor } from 'react-monaco-editor-lite';
import React, { useState } from 'react';
function SingleIDE() {
const [loc] = useState({
start: {
line: 3,
column: 1
},
end: {
line: 4,
column: 1
}
});
const [value, setValue] = useState(`
export function add(a, b) {
return a + b;
}
export function minus(a, b) {
return a - b;
}
`);
const onChange = (v) => {
setValue(v);
}
return (
<div style={{
width: '800px',
height: '800px',
}}>
<SingleEditor
value={value}
onChange={onChange}
loc={loc}
options={{
}} />
</div>
)
};
export default SingleIDE;
搜索文件
快捷键:command/ctrl + p
搜索 & 替换文本
快捷键:shift + command/ctrl + f
类型提示声明
MultiEditor 新增属性 extraLibs 配置额外的类型提示配置
文件/目录右键菜单功能
MultiEditor 新增属性 useFileMenu 用于是否启用文件/目录右键菜单功能
组件参数及方法
查看此文档
1.3.16
10 months ago
1.3.13
1 year ago
1.3.14
1 year ago
1.3.12
1 year ago
1.3.15
1 year ago
1.3.10
1 year ago
1.3.11
1 year ago
1.3.9
1 year ago
1.3.8
1 year ago
1.3.7
1 year ago
1.3.6
1 year ago
1.3.5
1 year ago
1.3.4
1 year ago
1.3.3
1 year ago
1.3.2
1 year ago
1.3.1
1 year ago
1.3.0
1 year ago
1.2.4
1 year ago
1.2.3
2 years ago
1.2.2
2 years ago
1.2.1
2 years ago
1.2.0
2 years ago
1.1.1
2 years ago
1.1.0
2 years ago
1.0.71
3 years ago
1.0.70
3 years ago
1.0.75
3 years ago
1.0.74
3 years ago
1.0.69-beta.0
3 years ago
1.0.69-beta.2
3 years ago
1.0.69-beta.1
3 years ago
1.0.62
3 years ago
1.0.61
3 years ago
1.0.60
3 years ago
1.0.66
3 years ago
1.0.65
3 years ago
1.0.63
3 years ago
1.0.59
3 years ago
1.0.69
3 years ago
1.0.58
3 years ago
1.0.57
3 years ago
1.0.67
3 years ago
1.0.56
3 years ago
1.0.55
3 years ago
1.0.54
3 years ago
1.0.53
3 years ago
1.0.52
3 years ago
1.0.51
3 years ago