安裝插件

"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編輯器插件中實(shí)現(xiàn)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的是風(fēng)格，還有好多種婉徘，可以根據(jù)自己需求導(dǎo)入
// 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);
                    }
                });
            };

            // ————————————————
            // 版權(quán)聲明：本文為CSDN博主「IT和尚」的原創(chuàng)文章费坊，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明旬痹。
            // 原文鏈接：https://blog.csdn.net/u013040887/article/details/103310440/



            return (
                <div>
                    <AceEditor
                        mode='mysql' // 設(shè)置編輯語言 
                        theme="xcode" // 設(shè)置主題  cobalt monokai附井，twilight,(暗黑)讨越，xcode,(亮白)
                        name="app_code_editor"
                        fontSize={20} // 設(shè)置字號(hào)
                        onChange={ (value) => this.setState({TextAceEditor: value}) } // 獲取輸入框的 代碼
                        value={this.state.TextAceEditor} // 
                        style={{ width: '100%', height: 500 }}
                        setOptions={{
                            enableBasicAutocompletion: true,   //啟用基本自動(dòng)完成功能 不推薦使用
                            enableLiveAutocompletion: true,   //啟用實(shí)時(shí)自動(dòng)完成功能 （比如：智能代碼提示）
                            enableSnippets: true,  //啟用代碼段
                            showLineNumbers: true,
                            tabSize: 2,
                            wrap: true, // 換行
                            autoScrollEditorIntoView: true, // 自動(dòng)滾動(dòng)編輯器視圖
                        }}
                        onLoad={complete}
                    />
                    <Button type="primary" onClick={() => this.beautify()} >美化代碼</Button>
                </div>
            )
        }
    }

    export default index