React项目嵌入代码编辑器

1.引入第三方库

npm install react-ace

2.引入包

import AceEditor from 'react-ace';
// js编辑器插件中实现sql格式化 sql-formatter
import 'ace-builds/src-noconflict/mode-sql'; // sql模式的包
import 'ace-builds/src-noconflict/mode-mysql'; // mysql模式的包
import 'ace-builds/src-noconflict/theme-xcode'; // xcode,(亮白)的主题样式
import 'ace-builds/src-noconflict/theme-twilight'; // twilight,(暗黑)的主题样式
import 'ace-builds/src-noconflict/ext-language_tools'; //（编译代码的文件）

3.界面渲染

<AceEditor
            mode="mysql" // 设置编辑语言
            theme="twilight" // 设置主题  cobalt monokai，twilight,(暗黑)，xcode,(亮白)
            name="app_code_editor"
            fontSize={20} // 设置字号
            // onChange={ (value) => this.setState({TextAceEditor: value}) } // 获取输入框的 代码
            // value={this.state.TextAceEditor} //
            style={{ width: '100%', height: 300 }}
            setOptions={{
              enableBasicAutocompletion: true, //启用基本自动完成功能 不推荐使用
              enableLiveAutocompletion: true, //启用实时自动完成功能 （比如：智能代码提示）
              enableSnippets: true, //启用代码段
              showLineNumbers: true,
              tabSize: 2,
              wrap: true, // 换行
              autoScrollEditorIntoView: true, // 自动滚动编辑器视图
            }}
          />

4.效果

并且编写sql语句，带有提示功能