react中使用Ace Editor编辑器

安装插件

"ace-builds": "^1.4.12",
"react-ace": "^9.4.0",
"sql-formatter": "^4.0.2"

使用

import React, { Component } from 'react'
import { Button } from 'antd';
import AceEditor from 'react-ace';
// js编辑器插件中实现sql格式化 sql-formatter
import { format } from '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的是风格，还有好多种，可以根据自己需求导入
// github、tomorrow、kuioir、twilight、xcode、textmeta、terminal、solarized-light、solarized-dark
import 'ace-builds/src-noconflict/ext-language_tools'; //（编译代码的文件）


// console.log(format('SELECT * FROM tbl'));

export class index extends Component {
    constructor(props) {
        super(props)
    
        this.state = {
        }
    }
    
    // 美化代码
    beautify = () => {
        this.setState({
            TextAceEditor: format(this.state.TextAceEditor)
        })
    }

        render() {
            // 增加需要自定义的代码提示
            const completers = [
                {
                    name: 'name',
                    value: 'one',
                    score: 100,
                    meta: '阿Sir，看这里'
                },
                {
                    name: 'name',
                    value: 'two',
                    score: 100,
                    meta: '阿Sir，看这里'
                },
                {
                    name: 'name',
                    value: 'three',
                    score: 100,
                    meta: '阿Sir，看这里'
                }
            ];


            const complete = editor => {
                editor.completers.push({
                    getCompletions: function (editors, session, pos, prefix, callback) {
                        callback(null, completers);
                    }
                });
            };

            // ————————————————
            // 版权声明：本文为CSDN博主「IT和尚」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
            // 原文链接：https://blog.csdn.net/u013040887/article/details/103310440/



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

    export default index