react使用ace：
1.安裝命令
npm install react-ace
2.導(dǎo)入
在使用ace 的組件中導(dǎo)入相關(guān)配置信息
import AceEditor from 'react-ace';
//language_tools語言工具，（這個好像是檢測語法以清，有點(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 //突出活動線
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('文件未改動')
} else {
//保存文件操作
}
} //重新綁定命令的名稱
}]}
setOptions={{
enableBasicAutocompletion: false, //啟用基本自動完成功能
enableLiveAutocompletion: true, //啟用實(shí)時(shí)自動完成功能 （比如：智能代碼提示）
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('文件未改動')
} else {
//保存文件操作
}
} //重新綁定命令的名稱
}]}
