Текстовый редактор с поддержкой React позволяет легко редактировать содержимое вашего веб-приложения. Однако бывают ситуации, когда вам нужно изобретать его заново.

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

#Что такое текстовый редактор с поддержкой React?

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

Вы можете изменить формат и выравнивание текста.

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

#Почему вы должны подумать о том, чтобы заново изобрести редактор React Rich Text?

#Нужен ли мне сверхбыстрый редактор форматированного текста?

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

В результате они могут редактировать контент в кратчайшие сроки. Например, Froala — сверхбыстрый редактор. Он может инициализироваться менее чем за 40 миллисекунд. Другими словами, это в шесть раз быстрее, чем мгновение ока. Поэтому пользователю вашего веб-приложения понравится его использовать.

# Нужен ли мне текстовый редактор с поддержкой мобильных устройств?

Мобильная поддержка является еще одним важным фактором. Люди больше не редактируют контент только на ПК и ноутбуках. Они также используют смартфоны и планшеты. Вот почему вам нужен текстовый редактор React с поддержкой мобильных устройств. Это позволит пользователям редактировать контент на ходу.

Froala обеспечивает полную мобильную поддержку. Его элементы управления форматированием отображаются одинаково на всех устройствах, включая настольные компьютеры, ноутбуки и смартфоны. Кроме того, он позволяет изменять размер изображений и видео на мобильных устройствах. Это первый текстовый редактор React, поддерживающий эти функции.

# Нужен ли мне текстовый редактор React с поддержкой RTL?

Некоторые языки, такие как арабский или иврит, читаются справа налево. Они сильно отличаются от английского, который читается в обратном направлении.

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

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

Вот так Froala выглядит, когда для направления набора текста установлено значение RTL:

# Нужно ли расширять возможности моего редактора форматированного текста?

Бывают случаи, когда вам нужно добавить дополнительные функции в ваш редактор. Например, пользователям вашего веб-приложения необходимо вставлять математические и химические уравнения.

Однако ваш форматированный текстовый редактор не предлагает подобных функций. Вы не хотите разрабатывать функцию с нуля. Это будет стоить вам много времени и денег.

Вам нужен текстовый редактор с поддержкой React, который поддерживает высокоэффективные плагины. Это позволит вам быстро интегрировать расширенные функции. Например, Froala поддерживает 30 готовых плагинов, таких как Mathtype, Embedly, Special Characters и т. д. Вы можете использовать их для расширения своих возможностей без особых усилий.

#Как я могу интегрировать Froala в приложение React?

Процесс внедрения Froala в веб-приложения React прост. Вам необходимо выполнить следующие действия:

  1. Во-первых, вам нужно импортировать CSS-файлы Froala. Кроме того, вы должны импортировать компонент редактора.
import React from 'react';
import ReactDOM from 'react-dom';
// Require Editor CSS files.
import 'froala-editor/css/froala_style.min.css';
import 'froala-editor/css/froala_editor.pkgd.min.css';
import FroalaEditorComponent from 'react-froala-wysiwyg';

2. Вы можете визуализировать компонент редактора Froala с помощью этой строки:

ReactDOM.render(<FroalaEditorComponent tag='textarea'/>, document.getElementById('editor'));

3. Теперь вы можете перейти к своему HTML-файлу. Вы можете добавить редактор в пользовательский интерфейс, передав идентификатор HTML-элементу.

<div  id="editor">
</div>

Вот как вы интегрируете Froala в свое веб-приложение React. Как видите, процесс несложный. Это включает в себя написание всего нескольких строк кода. Нет никаких проблем.

Однако убедитесь, что у вас есть правильные настройки Webpack для загрузки файлов CSS. Если вы используете Webpack 4, настройки будут такими:

var webpack = require("webpack");
module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx$/,
        use: {
          loader: 'babel-loader',
          options: {
            cacheDirectory: true,
            presets: ['react','es2015', 'stage-2']
          }
        }
      }, {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      {
        test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
        use: "url-loader?limit=10000&mimetype=application/font-woff"
      }, {
        test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
        use: "url-loader?limit=10000&mimetype=application/font-woff"
      }, {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        use: "url-loader?limit=10000&mimetype=application/octet-stream"
      }, {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        use: "file-loader"
      }, {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        use: "url-loader?limit=10000&mimetype=image/svg+xml"
      }
    ]
  },
  resolve: {
    modules: ['node_modules']
  }
};

#Исходный код:

Вы можете получить исходный код прямо здесь.