Как правильно использовать ACE Editor в ReactJS

Почти каждый разработчик веб-интерфейса (по крайней мере, те, кто работает в какой-то изолированной программной среде) знает об удивительном плагине для редактора кода на основе HTML и JS, а именно Ace Editor. Он соответствует функциям и производительности встроенных редакторов, таких как Sublime, Vim и TextMate. Он может быть легко встроен в любую веб-страницу и приложение JavaScript, поддерживается в качестве основного редактора для Cloud9 IDE и является преемником проекта Mozilla Skywriter (Bespin).

Если вы работаете с React, мы рекомендуем вам использовать компонент кода с открытым исходным кодом Reaction-ace, который поможет вам легко внедрить редактор ace в ваше приложение.

Почему я должен использовать стороннюю библиотеку вместо ACE?

Ну, кроме того, что библиотека предлагает готовый к использованию компонент ACE для использования с ReactJS (это легко сделать самостоятельно), редактор ace создает WebWorkers через URL рабочего скрипта. Это требует, чтобы рабочие скрипты были расположены на вашем сервере, и вы должны также разместить на своем сервере редактор ace. Хотя в большинстве случаев это нормально, это не позволяет вам предоставить полностью рабочий пакет редактора ace. Вот где Brace входит в игру, это совместимая с браузером версия редактора ace. Брейс имеет обновить скрипт который автоматически опускает туз строит и рефакторинг их, чтобы обеспечить следующее:

  • встроить всех поддерживаемых работников
  • автоматически требовать от рабочих того, от чего зависит «режим» (язык) внутри самого файла режима
  • обеспечить режимы и темы по тем же путям, что туз setMode а также setTheme использовать (просто заменить «туз» на «скобка»)

Таким образом, сам модуль является оберткой, которая использует скобу под капотом.

1. Установите Реактив-туз

Чтобы начать реализацию Ace Editor в вашем приложении React, установите модульact-ace. Этот модуль представляет собой набор реагирующих компонентов для туз / распорка это может быть легко встроено в ваш проект. Для установки откройте терминал, перейдите в каталог вашего проекта и выполните следующую команду:

npm install react-ace

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

2. Использование редактора ACE

Использование Ace Editor в React довольно просто, так как все было абстрагировано в один компонент, а именно , Этот компонент ожидает почти все свойства исходного AceEditor, но вместо того, чтобы передавать их как объект, они снабжаются реквизитом:

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 (
);
}
}

Чтобы проверить все доступные свойства для этого компонента, не забудьте прочитать официальные документы здесь.

3. Создание сплит редактора

Вы можете создать редактор split, а также импортировать компонент split из модуля ace 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 (
);
}
}

В этом случае, так как наш разделитель имеет значение 2 и ориентация «рядом», компонент будет отображать:

Ace Editor Split ReactJS

Ссылка на основную публикацию
Adblock
detector