1、安裝
npm install react-codemirror2 codemirror --save
2、使用
1 import {UnControlled as CodeMirror} from 'react-codemirror2' 2 import 'codemirror/lib/codemirror.js' 3 import 'codemirror/lib/codemirror.css'; 4 // 主題風格 5 import 'codemirror/theme/solarized.css'; 6 // 代碼模式，clike是包含java,c++等模式的 7 import 'codemirror/mode/clike/clike'; 8 import 'codemirror/mode/css/css'; 9 //ctrl+空格代碼提示補全 10 import 'codemirror/addon/hint/show-hint.css'; 11 import 'codemirror/addon/hint/show-hint'; 12 import 'codemirror/addon/hint/anyword-hint.js'; 13 //代碼高亮 14 import 'codemirror/addon/selection/active-line'; 15 //折疊代碼 16 import 'codemirror/addon/fold/foldgutter.css'; 17 import 'codemirror/addon/fold/foldcode.js'; 18 import 'codemirror/addon/fold/foldgutter.js'; 19 import 'codemirror/addon/fold/brace-fold.js'; 20 import 'codemirror/addon/fold/comment-fold.js'; 21 import 'codemirror/addon/edit/closebrackets'; 22 import 'codemirror/addon/edit/matchBrackets'; 23 24 export default class Index extends Component { 25 constructor() { 26 super(); 27 this.instance = null; 28 } 29 state = { 30 data:'', 31 } 32 render(){ 33 const {data}=this.state 34 let that=this 35 return( 36 <CodeMirror 37 editorDidMount={editor => { this.instance = editor }} 38 value={data} 39 options={{ 40 mode: {name:'text/css'}, 41 theme: 'solarized dark', 42 autofocus:true,//自動獲取焦點 43 styleActiveLine:true,//光標代碼高亮 44 lineNumbers: true, //顯示行號 45 smartIndent:true, //自動縮進 46 //start-設置支持代碼折疊 47 lineWrapping:true, 48 foldGutter:true, 49 gutters:['CodeMirror-linenumbers','CodeMirror-foldgutter'],//end 50 extraKeys:{ 51 "Ctrl":"autocomplete", 52 "Ctrl-S": function (editor) { 53 that.codeSave(editor) 54 }, 55 "Ctrl-Z":function (editor) { 56 editor.undo(); 57 },//undo 58 "F8":function (editor) { 59 editor.redo(); 60 },//Redo 61 }, 62 matchBrackets: true, //括號匹配，光標旁邊的括號都高亮顯示 63 autoCloseBrackets: true //鍵入時將自動關閉()[]{}''"" 64 }} 65 // onChange={this.codeOnChange} 66 67 // 在失去焦點的時候觸發，這個時候放數據最好 68 // onBlur={this.codeOnBlur} 69 70 // // 這個必須加上，否則在一些情況下，第二次打開就會有問題 71 // // onBeforeChange={(editor, data, value) => { 72 // // console.log("onBeforeChange fresh") 73 // // console.log(JSON.stringify(data)); 74 // // }} 75 // /* HERE: pick out only the value. and might as well get name. */ 76 /> ) 77 }}