Как преобразовать содержимое неконтролируемого редактора response-draft в html?

Я пытаюсь использовать response-draft-wysiwyg для редактирования данных, полученных с сервера. Проблема в том, что я поместил редактор внутри рендеринга, поэтому я не могу изменить editorState, так как это вызывает бесконечный цикл. Я настроил редактор как неконтролируемый, чтобы просто получать данные из формы.

Насколько я понимаю, stateToHTML здесь не подходит, так как принимает состояние, но здесь у нас есть объект. Подскажите, есть ли еще функции, которые могут конвертировать данные редактора перед отправкой? Или лучше выбрать другой редактор вместо draft-js?

Обработчик отправки формы находится внутри onFinish из формы and-design. Вот список компонентов:

import React, { Component, Fragment } from 'react';
import Line from '../components/Line';
import { Button, Form, Input } from 'antd';
import { SaveOutlined } from '@ant-design/icons';
import { connect } from 'react-redux';
import { Get } from 'react-axios';
import { EditorState } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import { stateFromHTML } from 'draft-js-import-html';

class Info extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <Fragment>
        {this.props.lang.lang && (
          <Get url={`${process.env.REACT_APP_API_PORT}api/info/${this.props.lang.lang.info}`}>
            {(error, res, isLoading) => {
              if (error) {
                return (<div>Something bad happened: {error.message} </div>)
              }
              else if (isLoading) {
                return (<div>Loading...</div>)
              }
              else if (res !== null) {
                const { data } = res;
                return (
                  <Fragment>
                    <h1>{data.title}</h1>
                    <Line />
                    <Form
                      layout="vertical"
                      initialValues={{
                        ...data
                      }}
                      onFinish={values => {
                        console.log({
                          ...values,
                          body: values.body,
                        });
                      }}
                    >
                      <Form.Item
                        name="title"
                        label="Title"
                        rules={[{ required: true, message: 'Please enter post title' }]}
                      >
                        <Input placeholder="Please enter post title" />
                      </Form.Item>
                      <Form.Item
                        name="body"
                        label="Text"
                      >
                        <Editor
                          defaultEditorState={EditorState.createWithContent(stateFromHTML(data.body))}
                          wrapperClassName="demo-wrapper"
                          editorClassName="demo-editor"
                        />
                      </Form.Item>
                      <Button
                        type="primary"
                        htmlType="submit"
                        className='save'
                      >
                        <SaveOutlined />
                        <span>Сохранить</span>
                      </Button>
                    </Form>
                  </Fragment>
                );
              }
              return (<div>Default message before request is made.</div>)
            }}
          </Get>
        )}
      </Fragment>
    );
  }
}

const mapStateToProps = state => {
  return {
    lang: state.lang
  }
}

export default connect(mapStateToProps, null)(Info);

С Уважением.


person Kiten    schedule 21.05.2020    source источник


Ответы (1)


Решено. Существует пакет draftjs-to-html, который анализирует объект из неконтролируемой формы редактора в html.

import draftToHtml from 'draftjs-to-html';

...

body: draftToHtml(values.body)
person Kiten    schedule 21.05.2020