В моем последнем проекте Marketing MGMT я хотел дать пользователям возможность писать комментарии, которые могут быть выделены жирным шрифтом или в виде списка, и, возможно, даже добавить несколько смайлов. Зная, что я хочу это сделать, я знал, что использование стандартной текстовой области или поля ввода текста не удовлетворит это требование. Я знал, что хочу использовать редактор WYSIWYG, и начал искать в Интернете кое-что, что могло бы работать в React. В итоге я наткнулся на библиотеку под названием React Draft Wysiwyg.

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

Небольшая справка о том, как работает Draft.js

Draft.js был создан Facebook и появился после того, как их команда столкнулась с трудностями при реализации всех функциональных возможностей, которые они хотели бы избавить от ошибок. Есть отличное видео о создании Draft.js, если вы хотите его изучить.

Таким образом, Draft.js обеспечивает большую функциональность в своих полях текстовой формы и создает так называемый редактор RichText. Это делается путем создания всего текста в виде объектов JSON вместо строки. Что Draft.js будет делать, так это сгруппировать одинаковый текст вместе, а затем, когда текстовый редактор изменится на полужирный или список, он создаст новый ключ в объекте JSON, и текст, написанный в этом формате, будет сохранен там. Для более понятной разбивки того, как Draft.js разбивает текст, см. Это сообщение в блоге.

Добавление Draft.js и редактора WYSIWYG на ваш сайт

Чтобы получить редактор WYSIWYG, необходимо установить несколько библиотек. Для этого используйте функцию установки npm в интерфейсе командной строки папки приложения React. Draft.js необходимо установить вместе с редактором WYSIWYG. Таким образом, обе эти команды должны запускаться npm install draft-js --save и npm install react-draft-wysiwyg --save.

После загрузки этих библиотек вам нужно будет добавить несколько операций импорта в начало файла, в котором вы используете поле формы Draft.js. Эти операции импорта:

import { EditorState, convertFromRaw, convertToRaw } from 'draft-js';
import { Editor} from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

В этих файлах много чего происходит, кроме как разбить это на части.

  • EditorState - это объект JSON текстового редактора Draft.js.
  • convertFromRaw и convertToRaw - это разные функции, которые мы собираемся использовать для изменения данных, введенных в JSON или вне JSON.
  • Editor - это редактор WYSIWYG, который мы собираемся использовать. Этот редактор имеет встроенную логику, которая использует EditorState из draft-js.
  • Наконец, стили CSS текстового редактора.

Оттуда нам нужно настроить состояние компонента React, которое будет использовать EditorState. Это запишет данные, вводимые в редактор.

state ={ editorState: EditorState.createEmpty()  }

Затем нам нужно ввести редактор в HTML-код, который компонент отображает, с помощью приведенного ниже кода.

<Editor 
editorState={this.state.editorState}                   wrapperClassName="demo-wrapper"              editorClassName="editer-content"
onEditorStateChange={this.onChange}
/>

Как видите, здесь используется editorState. Кроме того, у нас есть функция onChange, которую нам нужно настроить для изменения значения editorState, когда что-то вводится в редактор.

onChange = (editorState) => this.setState({editorState});

Отсюда редактор WYSIWYG будет полностью функциональным на странице. У WYSIWYG есть и другие свойства CSS, о которых нам пока не нужно беспокоиться. Это будут wrapperClassName и editorClassName, которые просто принимают класс CSS и визуализируют редактор в базовом формате. Если вы хотите изменить внешний вид редактора, вы можете это сделать.

Обработка отправки данных

Теперь, когда форма работает, нам нужно обработать ее отправку. Когда пользователи вводят текст в форму, состояние меняется, но это происходит в объекте EditorState.

Чтобы сохранить эти данные на бэкэнде, нам нужно будет изменить информацию EditorState, чтобы она была в JSON. Здесь на помощь приходит функция convertToRaw. Используйте приведенную ниже функцию, чтобы вернуть данные в формате JSON.

convertToRaw(this.state.editorState.getCurrentContent())

Отсюда вам просто нужно будет выполнить простой запрос POST на свой сервер.

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

Обработка отправленных данных

В моем проекте комментарий, созданный с помощью Draft.js, теперь должен отображаться на странице. Для этого нам понадобится использовать функцию convertFromRaw вместе с библиотекой, которая поможет нам преобразовать содержимое EditorState в HTML. Я использовал библиотеку под названием draft-js-export-html, поэтому ее нужно установить в npm npm install draft-js-export-html.

Затем в файле, в котором вы визуализируете Draft.js, вам понадобятся эти импорты:

import {stateToHTML} from 'draft-js-export-html'; 
import { convertFromRaw } from 'draft-js';

Оттуда вам нужно будет перевести данные, полученные из серверной части, в HTML. Для этого я создал функцию ниже.

convertCommentFromJSONToHTML = (text) => {                     return stateToHTML(convertFromRaw(JSON.parse(text))) }

Это преобразовывает данные в строку HTML. Оттуда я помещаю данные в div, который в Facebook React назвал «опасноSetInnerHTML».

<div id="comment-div">
<div dangerouslySetInnerHTML={{ __html: this.convertCommentFromJSONToHTML(this.props.comment.content)}}>  </div>
</div>

Тогда вот как выглядит результат:

Заголовок dangerousSetInnerHTML не было чем-то, что мне было удобно использовать в моем коде. Но если мои комментарии всегда будут обрабатываться текстовым редактором Draft.js, мне не о чем беспокоиться. Мои данные всегда будут правильно отформатированы для этого div. Как только я изменю способ форматирования данных комментариев, у меня возникнет проблема.

Вот и все. Свяжитесь с нами, если у вас есть какие-либо вопросы по этому поводу.