Как отправить значения из текстового поля в виде строки HTML?

Question

Я использую библиотеку Reaction-draft-wysiwyg, и я хотел бы, чтобы введенные значения из текстового поля были в виде строки HTML.

В настоящее время введенные значения, которые я регистрирую в консоли, отображаются в формате, который я не могу передать в свой бэкэнд, так как он ожидает строку HTML. Я пытался использовать convertToRaw, но, похоже, он не меняет формат данных так, как мне хотелось бы.

Мое состояние:

editorState: EditorState.createEmpty

Мой редактор JSX:

<Editor
 editorState={this.state.editorState}
 toolbarClassName="toolbarClassName"
 wrapperClassName="wrapperClassName"
 editorClassName="editorClassName"
 onEditorStateChange={this.onEditorStateChange}
/>

Мой обработчик onChange:

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

И моя функция handleSubmit:

handleSubmit = async (event) => {
  event.preventDefault();
  const convertedData = 
        convertToRaw(this.state.editorState.getCurrentContent())

 //Followed by some code about posting to an API

В настоящее время, когда я смотрю на то, что было опубликовано, это выглядит так:

convertedData: {...}
   blocks: {...}
     0: {key: "174mo", text: "example text" etc... }
     1: {key: "5cdsn", text: "example text2" etc... }

С массивом всех форматов текста, который был введен. Можно ли вместо этого преобразовать это в строку HTML?

Например:

"
<h1>This is a header</h1>
<ul>List item</ul>
"

Заранее благодарю за любую помощь!

Answer 1

Вы должны импортировать draftToHtml.

import draftToHtml from 'draftjs-to-html';
import htmlToDraft from 'html-to-draftjs'; 

handleSubmit = async (event) => {
  event.preventDefault();
  const convertedData = 
        draftToHtml(convertToRaw(this.state.editorState.getCurrentContent()));    

Answer 2

Это работает на 100%

      import { convertToHTML } from 'draft-convert';

const submitHandler = useCallback((event) => {
        event.preventDefault();
        const convertedData = convertToHTML(data.editor1.getCurrentContent());
});