codeMirror在react中的使用

1.首先安装codeMirror.

    npm install react-codemirror --save

2.在组件中导入引用

    import CodeMirror from 'react-codemirror';  
    import 'codemirror/lib/codemirror.css';  

样式也可以在样式文件中引入。

3.导入语言类型

    import 'codemirror/mode/sql/sql';  

4.按ctrl+空格进行提示功能：

    import 'codemirror/addon/hint/show-hint.css';  
    import 'codemirror/addon/hint/show-hint.js';  

5.导入提示语言类型：

    import 'codemirror/addon/hint/sql-hint.js';  

6.导入theme文件：

    import 'codemirror/theme/ambiance.css';  

7.定义options

    const options={  
  lineNumbers: true,                     //显示行号  
  mode: {name: "text/x-mysql"},          //定义mode  
  extraKeys: {"Ctrl": "autocomplete"},   //自动提示配置  
  theme: "ambiance"                  //选中的theme  
};  

8.在render函数中渲染：

    <CodeMirror ref="editor-sql" value='select * from AAA' onChange={code => this.props.ChangeCode(code))} options={options} />  

9.获取CodeMirror对象并对其操作：

    const editor = this.refs.editor-sql.getCodeMirror();  
    console.log(editor.getSelection());
    editor.setValue('这里是新的sql内容');