react中添加sql编辑器，react-codemirror2, codemirror

前言

最近我在项目中需要实现一个 sql编辑器 的需求，并且是以React为开发基础的。

需要实现的功能

可以显示和输入sql语句，并进行关键字高亮展示

实现方法

1、安装依赖

npm install react-codemirror2 codemirror --save

2、创建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';
import { useState } from 'react';

const SqlCodeMirror = props => {

  const [readOnly, setReadOnly] = useState(false)
  const [content, setContent] = useState('select * from table_1')

  const onChange = (editor, data, value) => {
    // console.log(editor, data, value);
    setContent(value);
  }

  const options = {
    lineWrapping: true,//自动换行，取消横向滚动条
    lineNumbers: true,//显示行号
    mode: { name: "text/x-mysql" },
    extraKeys: { "Ctrl": "autocomplete" },
    theme: 'ambiance',
    readOnly
  };

  return (
    <CodeMirror
      value={content}
      options={options}
      onChange={onChange}
    />
  );
}
export default SqlCodeMirror;