Добавьте богатый текстовый редактор в ваше приложение: React-Draft-Wysiwyg

Вступление

Библиотека NPM React-Draft-Wysiwyg является одной из популярных готовых к использованию рамки богатых текстовых редакторов, построенных на вершине React и Draft-JS, которая, в свою очередь, является основой для создания богатых редакторов текста, которая использует силу непостоянных коллекций в JavaScript.

Богатый текст и простой текст

Формат Rich Text (RTF) – это формат файла, который позволяет обмениваться текстовыми файлами между разными редакторами… Простой текст: простой текст не содержит форматирования, только разрывы строк и расстояние. Следовательно, форматирование текста (например, размеры и цвета шрифта, жирная шрифта или курсив) не может использоваться.

Вариант использования

У богатого текстового редактора есть много вариантов использования, некоторые из которых создают широкие объявления на веб -сайте, иллюстративные и подчеркнутые описание продуктов.

Установка

Выполнить NPM установить Draft-js React-draft-wysiwyg

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

Пример

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

Бэкэнд формы, предназначенную в форме формы, будет в форме бесчисленной строки HTML, например:

{
   "text": "{"blocks":[{"key":"13trq","text":"Important message!","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}}],"entityMap":{}}"
}

Обратите внимание, что в приведенном выше ответе текст, который будет показан, является «важным сообщением!»

Давайте декодируем эту строку HTML с помощью HE и установим состояние редактора, используя образец ниже.

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

//some_code


function setUpEditor(){

const serverResposne = {
   "text": "{"blocks":[{"key":"13trq","text":"Important message!","type":"unstyled","depth":0,"inlineStyleRanges":[],"entityRanges":[],"data":{}}],"entityMap":{}}"
}

const message = JSON.parse(he.decode(serverResposne.text))
      if (message.blocks[0].text === '') {
       //this condition indicates empty message
      } else {
        const contentState = convertFromRaw(message)
        const editorState = 
                  EditorState.createWithContent(contentState)
        setEditorState(editorState) //setting the message state in editor
      }

Обратите внимание, что EditorState является объектом верхнего уровня для редактора и имеет следующую информацию:

1) Содержание текущего текста 2) Состояние текущего выбора 3) полностью украшенное представление содержимого 4) Удиновать/Стеки REDO 5) Самый последний тип изменения, внесенный в содержимое

Более подробная информация о редакторе: Связь

Когда вы начнете печатать, редактор будет обновлена соответственно

Кнопки действий

Вы можете добавить несколько кнопок действия под редактором, например, сохранение, Clear

Прозрачный

Это выяснит текст в редакторе на кнопке. Вот как будет выглядеть обработчик Onclick:

const onClear = () => {
    setEditorState(EditorState.createEmpty())
  }

Сохранять

Преобразуйте состояние в бесчисленную строку HTML и вызовите метод сохранения, ответственный за вызов REST.

const onSave = async () => {
    const newMessage = {
message:
JSON.stringify(convertToRaw(editorState.getCurrentContent()))
      }

//api call here with newMessage as request body
}

Обратите внимание, что мы можем проверить, есть ли у в состоянии редактора пустое сообщение по editorstate.getCurrentContent (). Hastext ()

См. Пример файла Для образца реализации.

Оригинал: “https://dev.to/sanskar95/add-a-rich-text-editor-to-your-app-react-draft-wysiwyg-44ob”