如何将 react-draft 不受控制的编辑器内容转换为 html？

Question

我正在尝试使用 react-draft-wysiwyg 来编辑从服务器获取的数据。问题是我把编辑器放在了 render-prop 里面，所以我不能改变 editorState，因为这会导致无限循环。我将编辑器配置为不受控制以仅从表单中获取数据。

据我了解，stateToHTML 在这里不适合，因为它需要状态，但这里我们有一个对象。你能告诉我，还有其他功能可以在发送前转换编辑器数据吗？或者选择不同的编辑器而不是 draft-js 更好？

表单提交处理程序位于 and-design 表单的 onFinish 内。这是组件清单：

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);

此致。

Answer 1

已解决。有 draftjs-to-html 包将对象从不受控制的编辑器形式解析为 html.

import draftToHtml from 'draftjs-to-html';

...

body: draftToHtml(values.body)

如何将 react-draft 不受控制的编辑器内容转换为 html？

How to convert react-draft uncontrolled editor content to html?

javascript

reactjs

draftjs

antd

react-draft-wysiwyg