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%"
  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;
};