Как создать редактор форматированного текста в React Js

React — очень популярная библиотека Javascript, которая позволяет нам создавать мощные пользовательские интерфейсы. Она считается наиболее используемой библиотекой Javascript среди многих других, поскольку ее выбирают многие веб-разработчики, создающие внешние веб-интерфейсы.

Освоение React очень полезно, так как его можно использовать для создания множества классных и замечательных вещей, таких как редактор Rich Text, который имеет несколько замечательных функций, которые могут позволить вашим пользователям писать и форматировать текст в структуре документа в вашем приложении React.

Что такое редактор форматированного текста?

Редактор форматированного текста — это интерфейс или поле ввода для редактирования текста, которое включает в себя расширенные параметры стиля, такие как заголовки (h1, h2, h3), жирный шрифт, курсив, маркеры, гарнитуры шрифтов, размеры и цвет текста, выравнивание текста, цвета фона и т. д. многие другие функции.

Вы также можете добавлять в документ изображения, таблицы, гиперссылки и даже видео.

Как работает текстовый редактор?

Редакторы форматированного текста переводят текстовое содержимое в стилизованное содержимое.

При использовании редактора форматированного текста, когда вы выделяете определенную область документа и нажимаете на тип стиля и форматирование, редактор переводит стиль в теги html.

Например, если выделить слово "Hello World!" и выбрать для него стиль полужирный, тогда HTML-код за кадром будет выглядеть так.

<strong>Hello World!</strong>

Так или иначе, это заставляет автора или пользователя редактора форматированного текста писать HTML-код без необходимости знать или думать в HTML, потому что редактор делает перевод автоматически.

Как добавить функцию текстового редактора в ваше приложение для реагирования

Хотя React JS — хорошая и замечательная библиотека для создания пользовательских интерфейсов, мы также можем расширить ее функции, чтобы сделать их более полезными, с помощью внешних пакетов, созданных другими разработчиками React в сообществе React.

Один пакет, который мы будем использовать для создания нашего текстового редактора, — это пакет React quill.

С помощью этого пакета мы можем добавить редактор форматированного текста в наше приложение React всего 3 строки кода.

Вот как это делается.

Шаг 1. Установите пакет React Quill в свое приложение, в зависимости от диспетчера пакетов, который вы используете в своем приложении.

Yarn - Yarn add react-quilljs quill

Npm - npm install react-quilljs quill

Шаг 2. После запуска этой команды вы должны импортировать реактивное перо в свой проект следующим образом.

Import {useQuill} from 'react-quilljs'

А также импортируйте стиль css для пакета, подобный этому

Import 'quill/dist/quill.snow.css'

3. После установки и импорта пакета в ваше приложение вы можете добавить реактивный перо в свой код JSX.

import { useQuill } from 'react-quilljs';
import 'quill/dist/quill.snow.css';

function App() {
  const { quill, quillRef } = useQuill();

  return (
    <div style={{ width: '100%', height: 400 }}>
      <div ref={quillRef} />
    </div>
  );
}

export default App;

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

После их добавления вы также можете поиграть с редактором, добавив в него другие функции, которые вам понравятся.

Вы также можете ознакомиться с документацией по React Quill здесь, чтобы получить больше информации о ней и лучше использовать ее для улучшения своего редактора.