codeMirror是一个在浏览器编辑代码的编辑器，目前有react版本。因工作项目需要，在antd pro的框架下集成。在此记录下过程。
1.codeMirror的git地址：https://github.com/uiwjs/react-codemirror
按照文档的步骤，将codeMirror添加到项目中
2.安装完成后可根据官方的例子自定义主题，快捷键及编码语言。在此不进行过多描述。重点在于如何获取codeMirror的editor对象。github上issues上有人提出这个问题，作者也回答了，通过 ref 能获取到 codemirror 和 editor 对象。因我使用的是hook方式写组件，所以代码略有不同。如下：
const CodePage = (props) => {
const code = 'const a = 0;';
const [editor,setEditor] = useState([]);
const getInstance = (instance) => {
if (instance) {
setEditor(instance.editor);
}
}
const getCode = () =>{
console.log(editor.getValue());
}
return (
<>
<Button onClick={getCode}>提交</Button>
<CodeMirror
ref={getInstance}
value={code}
options={{
theme: 'monokai',
tabSize: 2,
keyMap: 'sublime',
mode: 'jsx'
}}
/>
</>
);
};
