ant design pro中使用react-ace
在react中使用react-ace,实现编辑代码
-
安装包
npm install react-ace
npm install brace
-
引入包
import brace from 'brace';
import AceEditor from 'react-ace';
import 'brace/mode/json';
import 'brace/mode/yaml';
import 'brace/theme/github';
-
页面渲染
<AceEditor
width="100%"
mode="json"
readOnly={fetchLoading || editLoading}
value={fetchLoading ? 'loading...' : this.value}
onChange={this.onChange}
theme="github"
name="UNIQUE_ID_OF_DIV"
wrapEnabled={true} // 换行
editorProps={{ $blockScrolling: Infinity }}
/>
-
onChange方法
onChange = newValue => {
this.value = newValue;
};