react-ace代码编辑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%"
ant安装包
mode="json"
readOnly={fetchLoading || editLoading}
value={fetchLoading ? '' : this.value}
onChange={Change}
theme="github"
name="UNIQUE_ID_OF_DIV"
wrapEnabled={true} // 换⾏
editorProps={{ $blockScrolling: Infinity }}
/
>
onChange⽅法
onChange = newValue => {
this.value = newValue;
};

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。