安装

github：https://github.com/securingsincity/react-ace
文档：https://github.com/securingsincity/react-ace/blob/master/docs/Ace.md
定义：https://github.com/securingsincity/react-ace/blob/master/docs/Ace.md
npm：https://www.npmjs.com/package/react-ace
命令：npm install react-ace

简单使用

  1. <AceEditor
  2.   mode="js"
  3.   readOnly={false}
  4.   theme="monokai"
  5.   name="app_code_editor"
  6.   onChange={this.onChange}
  7.   fontSize={16}
  8.   showPrintMargin
  9.   showGutter
  10.   highlightActiveLine  //突出活动线
  11.   enableSnippets  //启用代码段
  12.   value={this.state.value}
  13.   setAutoScrollEditorIntoView
  14.   style={{width: '100%', height: this.state.deskHeight, minHeight: 600}}
  15.   editorProps={{ $blockScrolling: true }}
  16.   setOptions={{
  17.     maxLines: 30,
  18.     tabSize: 4
  19.   }}
  20. />

主题

npm i ace-builds -S

  2. import ReactAce from 'react-ace';
  3. import "ace-builds/src-noconflict/mode-json"; // 引入模式
  4. import "ace-builds/src-noconflict/theme-monokai"; // 引入主题
  6. <ReactAce
  7.     // width="100%"
  8.     // height="400px"
  9.     style={{ width: '100%', height: 400, minHeight: 400 }}
  10.     showPrintMargin={false}
  11.     mode="json"
  12.     theme="monokai"
  13.     onChange={onChangeAce}
  14.     name="UNIQUE_ID_OF_DIV"
  15.     editorProps={{ $blockScrolling: true }}
  16.     value={aceValue}
  17.     fontSize={16}
  18.     setAutoScrollEditorIntoView
  19.     setOptions={{
  20.         maxLines: 30,
  21.         enableBasicAutocompletion: false,
  22.         enableLiveAutocompletion: false,
  23.         enableSnippets: false,
  24.         showLineNumbers: true,
  25.         tabSize: 2,
  26.     }}
  27.     readOnly={false}
  28.     showGutter={true}
  29.     highlightActiveLine={true}
  30. />

注意

务必加上 setAutoScrollEditorIntoView={true}，否则会有一些滚动方面的问题

参考资料

https://www.jianshu.com/p/607883e9aeb4
https://blog.csdn.net/wsh2467991332/article/details/90904332
React Ace 组件与其同类型相比较