如何在ReactJS中正确使用ACE编辑器

本文概述

• 为什么我应该使用另一个第三方库而不是仅使用ACE？
• 1.安装react-ace
• 2.使用ACE Editor
• 3.创建一个拆分编辑器

几乎每个前端开发人员(至少是那些在某些代码沙箱上工作的前端开发人员)都知道基于HTML和JS的出色代码编辑器插件Ace Editor。它与Sublime, Vim和TextMate等本机编辑器的功能和性能相匹配。它可以轻松地嵌入到任何网页和JavaScript应用程序中, 并作为Cloud9 IDE的主要编辑器进行维护, 并且是Mozilla Skywriter(Bespin)项目的后继者。

如果你正在使用React, 那么我们建议你使用开源的react-ace组件, 它将帮助你轻松地在应用程序中实现ace编辑器。

为什么我应该使用另一个第三方库而不是仅使用ACE？

好的, 除了该库提供了可与ReactJS一起使用的即用型ACE组件(你可以自己轻松完成的事情)外, ace编辑器还通过辅助脚本URL创建WebWorkers。这要求工作脚本位于服务器上, 并强制你在服务器上托管ace编辑器。尽管在大多数情况下可以这样做, 但是它使你无法提供一个可以正常使用的ace编辑器软件包。这就是Brace出现在游戏中的地方, 它是ace编辑器的与浏览器兼容的版本。 Brace具有一个更新脚本, 该脚本会自动拉出ace构建并将其重构以提供以下内容：

• 内联所有支持的工人
• 自动要求工作人员使用”模式”(语言)取决于模式文件本身
• 在与ace的setMode和setTheme使用相同的路径上提供模式和主题(只需将” ace”替换为” brace”)

因此, 模块本身就是在后台使用Brace的包装器。

1.安装react-ace

要开始在你的React应用程序中实现Ace编辑器, 请安装react-ace模块。该模块是一组用于Ace / Brace的react组件, 可以轻松地嵌入到你的项目中。要安装, 请打开一个终端, 切换到项目目录并运行以下命令：

npm install react-ace

安装模块后, 你将能够导入组件以在视图中呈现。有关此模块的更多信息, 请访问Github上的官方存储库。

2.使用ACE Editor

React中Ace Editor的用法非常简单, 因为所有内容都已抽象为一个组件, 即<AceEditor>。该组件几乎需要原始AceEditor的所有属性, 但是它们不是通过对象传递而是通过props提供：

import React from 'react';

// Import Brace and the AceEditor Component
import brace from 'brace';
import AceEditor from 'react-ace';

// Import a Mode (language)
import 'brace/mode/java';

// Import a Theme (okadia, github, xcode etc)
import 'brace/theme/github';

export default class App extends React.Component {

    constructor(props, context) {
        super(props, context);
        
        this.onChange = this.onChange.bind(this);
    }

    onChange(newValue) {
        console.log('change', newValue);
    }

    render() {
        return (
            <div>
                <AceEditor
                    mode="java"
                    theme="github"
                    onChange={this.onChange}
                    name="UNIQUE_ID_OF_DIV"
                    editorProps={{
                        $blockScrolling: true
                    }}
                />
            </div>
        );
    }
}

要检查此组件的所有可用属性, 请不要忘记在此处阅读官方文档。

3.创建一个拆分编辑器

你可以创建拆分编辑器, 也可以从react ace模块而不是默认组件导入拆分组件。然后, 你可以提供将显示为单个组件的编辑器数量, 根据你的需要, 方向可以在旁边或下面：

import React from 'react';

// Import Brace and the AceEditor Component
import brace from 'brace';

import {split as SplitEditor} from 'react-ace';

// Import a Mode (language)
import 'brace/mode/java';

// Import a Theme (okadia, github, xcode etc)
import 'brace/theme/github';

export default class App extends React.Component {

    constructor(props, context) {
        super(props, context);
        
        this.onChange = this.onChange.bind(this);
    }

    onChange(newValue) {
        console.log('change', newValue);
    }

    render() {
        return (
            <div>
                <SplitEditor
                    mode="java"
                    theme="github"
                    splits={2}
                    orientation="beside"
                    value={['hi', 'hello']}
                    name="UNIQUE_ID_OF_DIV"
                    editorProps={{$blockScrolling: true}}
                />
            </div>
        );
    }
}

在这种情况下, 由于我们的split道具的值为2且方向为”旁边”, 因此该组件将呈现：

编码愉快！