react使用ace：

1.安裝命令

npm install react-ace

2.導(dǎo)入

在使用ace 的組件中導(dǎo)入相關(guān)配置信息

import AceEditor from 'react-ace';
//language_tools語言工具，（這個(gè)好像是檢測(cè)語法，有點(diǎn)忘了，想不起來從哪里找到的）
import 'brace/ext/language_tools';
//searchbox過濾框，快捷鍵ctrl+F
import 'brace/ext/searchbox';
//一下import的是編輯器支持的語法，我的項(xiàng)目都用到了，所以全部導(dǎo)入
import 'brace/mode/javascript';//
import 'brace/mode/html';//
import 'brace/mode/java';//
import 'brace/mode/python';//
import 'brace/mode/lua';//
import 'brace/mode/xml';//
import 'brace/mode/ruby';//
import 'brace/mode/sass';
import 'brace/mode/markdown';//
import 'brace/mode/mysql';
import 'brace/mode/json';//
import 'brace/mode/css';//
import 'brace/mode/typescript';
//以下import的是風(fēng)格，還有好多種，可以根據(jù)自己需求導(dǎo)入
// github、tomorrow、kuioir、twilight、xcode、textmeta、terminal、solarized-light、solarized-dark
import 'brace/theme/monokai';//

3.在render使用

<AceEditor
    mode={this.state.mode}
    readOnly={this.state.readOnly}
    theme="monokai"
    name="app_code_editor"
    onChange={this.onChange}
    fontSize={fontSize}
    showPrintMargin
    showGutter
    highlightActiveLine  //突出活動(dòng)線
    enableSnippets  //啟用代碼段
    value={this.state.editorContent}
    style={{width: '100%', height: this.state.deskHeight, minHeight: 600}}
    commands={[{    //命令是鍵綁定數(shù)組。
           name: 'saveFile', //鍵綁定的名稱。
           bindKey: {win: 'Ctrl-S', mac: 'Command-S'}, //用于命令的組合鍵。
           exec: ()=>{
                  if (!this.state.changed) {
                          message.warning('文件未改動(dòng)')
                  } else {
                          //保存文件操作
                  }
           }   //重新綁定命令的名稱
    }]}
    setOptions={{
           enableBasicAutocompletion: false,   //啟用基本自動(dòng)完成功能
           enableLiveAutocompletion: true,   //啟用實(shí)時(shí)自動(dòng)完成功能 （比如：智能代碼提示）
           enableSnippets: false,  //啟用代碼段
           showLineNumbers: true,
           tabSize: 4
     }}
 />

4.快捷鍵綁定

ctrl+F ctrl+H

import 'brace/ext/searchbox';

ctrl+S
添加commands屬性，看 3.在render中使用

commands={[{    //命令是鍵綁定數(shù)組。
           name: 'saveFile', //鍵綁定的名稱。
           bindKey: {win: 'Ctrl-S', mac: 'Command-S'}, //用于命令的組合鍵。
           exec: ()=>{
                  if (!this.state.changed) {
                          message.warning('文件未改動(dòng)')
                  } else {
                          //保存文件操作
                  }
           }   //重新綁定命令的名稱
    }]}

如果有為您解決問題，請(qǐng)您點(diǎn)顆小心心~