Cómo usar correctamente el editor ACE en ReactJS

Cómo usar correctamente el editor ACE en ReactJS

Casi todos los desarrolladores de frontend (al menos aquellos que trabajan en alguna caja de arena de codificación) conocen el increíble complemento de editor de código basado en HTML y JS, llamado Ace Editor. Coincide con las funciones y el rendimiento de editores nativos como Sublime, Vim y TextMate. Puede integrarse fácilmente en cualquier página web y aplicación JavaScript, se mantiene como el editor principal de Cloud9 IDE y es el sucesor del proyecto Mozilla Skywriter (Bespin).

Si está trabajando con React, le recomendamos que utilice el componente react-ace de código abierto que le ayudará a implementar ace editor fácilmente en su aplicación.

¿Por qué debería usar otra biblioteca de terceros en lugar de solo ACE?

Bueno, además del hecho de que la biblioteca ofrece un componente ACE listo para usar para usar con ReactJS (algo que puede hacer fácilmente por sí mismo), el editor ace crea WebWorkers a través de una url de script de trabajador. Esto requiere que los scripts de trabajo estén ubicados en su servidor y le obliga a alojar el editor ace en su servidor también. Si bien eso está bien en la mayoría de los casos, le impide proporcionar un paquete de editor de ace completamente funcional. Ahí es donde entra Brace en el juego, es una versión compatible con navegador del editor ace. Brace tiene un script de actualización que automáticamente elimina las compilaciones ace y las refactoriza para proporcionar lo siguiente:    

  • en línea todos los trabajadores apoyados
  • requiere automáticamente los trabajadores de los que depende un 'modo' (idioma) dentro del archivo de modo en sí
  • proporcione los modos y temas en los mismos caminos que los as y el uso (solo reemplace 'as' con 'brace') setMode  setTheme 

Entonces, el módulo en sí es una envoltura que usa Brace en el fondo.

1. Instale react-ace

Para comenzar con la implementación de Ace Editor en su aplicación React, instale el módulo react-ace. Este módulo es un conjunto de componentes de reacción para Ace / Brace que pueden integrarse fácilmente en su proyecto. Para instalar, abra una terminal, cambie al directorio de su proyecto y ejecute el siguiente comando:

npm install react-ace

Después de la instalación del módulo, podrá importar el componente para renderizarlo en su vista. Para obtener más información sobre este módulo, visite el repositorio oficial en Github aquí .

2. Usando ACE Editor

El uso de Ace Editor en React es bastante simple, ya que todo se ha resumido en un solo componente, a saber <AceEditor>. Este componente espera casi todas las propiedades del AceEditor original pero en lugar de pasarlas como un objeto, están provistas de accesorios:

import React from 'react';

// Importar Brave y el componente Ace Editor
import brace from 'brace';
import AceEditor from 'react-ace';

// Importar un modo (idioma)
import 'brace/mode/java';

// Importar un tema (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>
        );
    }
}

Para verificar todas las propiedades disponibles para este componente, no olvide leer los documentos oficiales aquí .

3. Crear un editor dividido

Puede crear un editor dividido e importar el componente dividido del módulo react ace en lugar del componente predeterminado. Luego, puede proporcionar la cantidad de editores que se mostrarán como un solo componente, la orientación puede ser al lado o debajo según sus necesidades:

import React from 'react';

// Importar Brave y el componente Ace Editor
import brace from 'brace';

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

// Importar un modo (idioma)
import 'brace/mode/java';

// Importar un tema (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>
        );
    }
}

En este caso, como nuestro prop splits tiene un valor de 2 y la orientación es "al lado", el componente representará:

Ace Editor Split ReactJS

Que te diviertas ❤️!

Esto podria interesarte

Conviertete en un programador más sociable