react-codemirror 文本编辑器 编辑sql语句 高亮sql语句

步骤1：npm安装，github地址

npm install react-codemirror2 codemirror --save

index.js

import { UnControlled as CodeMirror } from 'react-codemirror2';
import 'codemirror/lib/codemirror.css';
import 'codemirror/mode/sql/sql';
import 'codemirror/addon/hint/show-hint.css';
import 'codemirror/addon/hint/show-hint.js';
import 'codemirror/addon/hint/sql-hint.js';
import 'codemirror/theme/ambiance.css';

class MyTestThird extends React.Component {
  state = {
    content: ''
  }

  getSql=()=>{
    const editor = this.codeEditor.editor;
    //获得sql的值
    const cont = editor.getValue();
    console.log(cont);
  }

  //编辑器内容变动后就修改state
  onChange = (editor, data, value)=>{
    this.setState({content: value});
  }

  render() {
    return (
      

         { this.codeEditor = self; }}
          value={this.state.content}
          options={{
            lineNumbers: true,
            mode: {name: "text/x-mysql"},
            extraKeys: {"Ctrl": "autocomplete"},
            theme: 'ambiance', 
          }}
          onChange={this.onChange}
        />
        
        获取sql值
      
    );
  }
}

https://www.cnblogs.com/web001/p/9370392.html
https://blog.csdn.net/linkedin_37345339/article/details/104659961