Встраивание редактора кода на ваш сайт с помощью React-Ace

Добро пожаловать!

Важно предоставить вашему пользователю знакомую среду для написания кода. React-Ace дает вам как разработчику простой способ предложить знакомую среду вашему пользователю. В этом руководстве мы встроим Ace Editor в компонент React, укажем ожидаемый язык кодирования и добавим тему!

Шаг 1 - Установка react-ace NPM

npm install react-ace

Шаг 2 - Настройка нашего компонента

Начните с простого компонента реакции.

import React, { Component } from 'react';
export default class Main extends Component {
  render() {
    return <div></div>;
  }
}

Теперь добавьте следующую строку, чтобы импортировать ваш редактор:

import AceEditor from 'react-ace';

Шаг 3 - Добавление редактора к вашему компоненту

Чтобы добавить AceEditor на веб-страницу, введите: <AceEditor /> между тегами <div> в вашем компоненте.

Теперь полный компонент должен выглядеть так:

import React, { Component } from 'react';
import AceEditor from 'react-ace';
export default class Main extends Component {
  render() {
    return (
      <div>
        <AceEditor />
      </div>
    );
  }
}

Теперь, если вы проверите свою веб-страницу, вы должны увидеть базовый редактор кода с возможностью ввода!

Насколько это было просто ?! А теперь давайте сделаем его более увлекательным, добавив распознавание языков и темы.

Шаг 4 - Добавление режимов и тем

В этом разделе мы сделаем так, чтобы наш редактор кода распознавал javascript, а также имел тему монокаи.

Вверху файла добавьте следующие две строки:

import 'brace/mode/javascript'
import 'brace/theme/monokai'

Теперь сделайте так, чтобы ваш компонент AceEditor выглядел так:

<AceEditor mode="javascript" theme="monokai" />

Ваш редактор кода теперь может распознавать ключевые слова javascript и имеет новую классную цветовую тему!

Заключение!

Из этого руководства вы можете увидеть, что добавить редактор кода на вашу веб-страницу довольно просто. Добавление этой функции сделает вашу веб-страницу более привлекательной и привлекательной для вашего пользователя. Не стесняйтесь продолжить изучение того, что AceEditor может предложить здесь.