ACE Editor在线代码编辑器在React中的使用

ACE 是一个开源的、独立的、基于浏览器的代码编辑器，可以嵌入到任何web页面或JavaScript应用程序中。ACE支持超过60种语言语法高亮，并能够处理代码多达400万行的大型文档。ACE开发团队称，ACE在性能和功能上可以媲美本地代码编辑器（如Sublime Text、TextMate和Vim等）。

ACE是Mozilla Skywriter（以前称为Bespin）项目的继任者，并作为Cloud9的主要在线编辑器。

以下是它的详细特性：

可以对60多种语言进行语法着色(可以导入TextMate/Sublime/.tmlanguage 文件)

20多种主题(可以导入TextMate/Sublime/.tmtheme文件)

自动缩进，减少缩进

一个可选的命令行

处理巨大的文件,可以处理4,000,000行代码

完全自定义的键绑定，包括V正则表达式搜索和替换

高亮匹配括号

软标签和真正的标签之间切换

显示隐藏的字符

用鼠标拖放文本

换行

代码折叠

多个光标和选择

实时语法检查器(支持 JavaScript/CoffeeScript/CSS/XQuery)

剪切，复制和粘贴功能IM和Emacs模式

在React中如何使用？

import React, { Component } from 'react'
import { Card, Form, Input} from 'antd'
import ACEditor from '../../components/ACEditor';

export default class config extends Component {
    state = {
        body: 'df -kdf -k', // 初始化ace编辑器内容
    }

    render() {
        const { body} = this.state;

        return (
            <>
                <Card>
                    <Form layout='vertical' onFinish={this.onAllFinish}>
                        <Form.Item label='执行命令'>
                            <ACEditor mode="sh" value={body} height="300px" onChange={body => this.setState({ body })} />
                        </Form.Item>
                    </Form>
                </Card>
            </>
        )
    }
}

参考地址：

https://blog.csdn.net/ybc77107/article/details/84796503