1、网上react 版本的样例很少,更多的是使用 react-monaco-editor 的react版本,担心封装的不够强大,于是在react 里用的原生组件
代码示例如下,可供参考
class Index extends React.Component {
componentDidMount() {
const { path, value, language, onValueChange } = this.props;
const model = monaco.editor.createModel(value, language, path);
const options = {
suggestLineHeight: 20,
lineHeight: 20,
lineNumbers: "on"
};
this._editor = monaco.editor.create(this._node, options);
this._editor.setModel(model);
this._subscription = model.onDidChangeContent(() => {
console.log(model.getValue());
// this.props.onValueChange(model.getValue());
this.props.service.call('setState', {ddlInfo: model.getValue()});
});
}
componentDidUpdate(prevProps: Props) {
const { path, value, language, onValueChange, dataSourceManage, ...options } = this.props;
const { ddlInfo } = dataSourceManage;
this._editor.updateOptions(options);
const model = this._editor.getModel();
if (ddlInfo !== model.getValue()) {
model.pushEditOperations(
[],
[
{
range: model.getFullModelRange(),
text: ddlInfo,
},
]
);
}
}
componentWillUnmount() {
this._editor && this._editor.dispose();
this._subscription && this._subscription.dispose();
}
render() {
const { info = '' } = this.props;
return (
<div>
<div style={{height: 200}} ref={c => this._node = c} />
</div>
);
}
}