forked from Gitlink/forgeplus-react
62 lines
1.5 KiB
JavaScript
62 lines
1.5 KiB
JavaScript
import React, {useEffect, useRef, useState} from 'react';
|
|
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
|
|
import './Component.scss';
|
|
|
|
function Monaco(props) {
|
|
const {
|
|
style = { // dom节点样式
|
|
height: '400px',
|
|
},
|
|
value = '', // 代码文本
|
|
onChange = () => { // 改变的事件
|
|
},
|
|
fontSize = 14, // 代码字体大小
|
|
monacoOptions = {
|
|
scrollBeyondLastLine: false,
|
|
lineNumbers: "off",
|
|
wordWrap: true,
|
|
overviewRulerBorder: true,
|
|
lineHeight: 24,
|
|
readOnly:true
|
|
}, // monaco 自定义属性
|
|
language = 'html', // 语言 支持 js ts sql css json html等
|
|
} = props;
|
|
const editOrRef = useRef();
|
|
const ThisEditor = useRef();
|
|
useEffect(() => {
|
|
ThisEditor.current = monaco.editor.create(editOrRef.current, {
|
|
value: value || '',
|
|
language,
|
|
theme: "vs-grey",
|
|
fontSize: fontSize + 'px',
|
|
minimap: { // 关闭代码缩略图
|
|
enabled: false,
|
|
},
|
|
...monacoOptions,
|
|
});
|
|
|
|
ThisEditor.current.onDidChangeModelContent((e) => {
|
|
let newValue = ThisEditor.current.getValue();
|
|
onChange(newValue);
|
|
});
|
|
return () => {
|
|
ThisEditor.current.dispose();
|
|
ThisEditor.current = undefined; // 清除编辑器对象
|
|
}
|
|
}, []);
|
|
useEffect(() => {
|
|
if (ThisEditor.current) {
|
|
ThisEditor.current.updateOptions({
|
|
fontSize: fontSize + 'px',
|
|
})
|
|
}
|
|
}, [fontSize]);
|
|
|
|
return (
|
|
<div style={style} ref={editOrRef}>
|
|
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Monaco; |