1

我正在尝试在 redux-form 中使用 react-draft-wysiwyg 编辑器，一切正常，但唯一的问题是 initialValues 似乎不适用于编辑器字段。

这是我的 Form.js ：

    <form onSubmit={this.props.handleSubmit(this.onSubmit)} autoComplete="off">
        <Field name="title" className="form-input" type="text" placeholder="Title" component={this.titleComponent} />
        <Field name="description" className="desc" type="text" placeholder="What is your article about ?" component={this.titleComponent} />
      <Field name="editor" type="text" component={EditorFieldComponent} />
      <button className="form-button" type="submit" value="Submit">{this.props.button}</button>
    </form>

这是 EditorFieldComponent.js：

const EditorFieldComponent = (props) => {
      const { meta: {touched, error}, input } = props;    
      return(
        <EditorComponent
          onChange={input.onChange}
          value={input.value}
          touched={touched}
          error={error}
          input = {{...input}}
        />
      );

    }

这是 EditorComponent.js：

class EditorComponent extends React.Component {

      constructor(props) {
        super(props);
        this.state = {
          editorState: EditorState.createEmpty()
        };
        this.props.onChange(
          draftToHtml(convertToRaw(this.state.editorState.getCurrentContent()))
        );
      }
  onEditorStateChange = (editorState) => {
    const { onChange, value } = this.props;

    const newValue = draftToHtml(convertToRaw(editorState.getCurrentContent()));

    if (value !== newValue) {
      onChange(newValue);
    }

    this.setState({
      editorState
    });
  };

  render(){

return(
    <React.Fragment>
      <Editor 
        editorState={this.state.editorState}
        toolbarClassName="toolbarClassName"
        wrapperClassName="wrapperClassName"
        editorClassName="editorClassName"
        editorStyle={{ height: "500px", border: "solid 0.1px rgba(0, 0, 0, 0.1)", padding: "10px"}}
        onEditorStateChange={this.onEditorStateChange}
        toolbar={{
          options: ['inline', 'blockType', 'fontSize', 'fontFamily', 'list', 'textAlign', 'colorPicker', 'link', 'embedded'/*, 'emoji'*/, 'image', 'remove', 'history'],
          inline: { inDropdown: true },
          list: { inDropdown: true },
          textAlign: { inDropdown: true },
          link: { inDropdown: true },
          history: { inDropdown: true }
        }}
      />
      {this.renderError()}
    </React.Fragment>
);}

这是我尝试使用initialValues的地方：

  return(
    <div>
      <Form
       initialValues={{title: "some title", description: "some description", editor: "some text"}}
      />
    </div>
  );

另外我应该说 initialValues 适用于 'description' 和 'title' 字段，只有 'editor' 字段有这个问题。

4

2 回答 2

1

我遇到了同样的问题，比如无法从 api 响应加载初始值。我想是因为编辑器在我们得到回复之前正在加载。所以我只是添加了一个像这样的简单条件，以便当描述可用时（我在获得 api 响应后将其存储在状态中），那么只有编辑器将加载组件。它在我身边工作正常。

导入的编辑器组件：

{description && (
    <>
        <div className="editor">
             <DraftEditor onDataChange={handleDescription} value={description} />
        </div>
    </>
 )}

我的编辑器组件：

import React, { useState } from 'react';
import { Editor } from 'react-draft-wysiwyg';
import { EditorState, ContentState, convertToRaw, convertFromHTML } from 'draft-js';
import draftToHtml from 'draftjs-to-html';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

const DraftEditor = (props) => {
const contentDataState = 
ContentState.createFromBlockArray(convertFromHTML(`${props.value}`));
const editorDataState = EditorState.createWithContent(contentDataState);

const [editorState, setEditorState] = useState(editorDataState);

const onEditorStateChange = (editorStateData) => {
    setEditorState(editorStateData);
    let data = draftToHtml(convertToRaw(editorStateData.getCurrentContent()));
    props.onDataChange(data);
};

return (
    <React.Fragment>
        <Editor
            editorState={editorState}
            onEditorStateChange={onEditorStateChange}
            wrapperClassName="wrapperClassName"
            editorClassName="editorClassName"
            toolbarClassName="toolbar-class"
            toolbar={{
                options: ['inline', 'list', 'textAlign'],
                inline: {
                    options: ['bold', 'italic', 'underline'],
                },
                list: {
                    options: ['unordered', 'ordered', 'indent', 'outdent'],
                },
                textAlign: {
                    options: ['left', 'center', 'right'],
                },
            }}
        />
    </React.Fragment>
);
};

export default DraftEditor;
于 2020-12-14T11:38:02.893 回答
0

所以问题似乎出在 EditorComponent 内部constructor()，editorState默认设置为空（或者我应该首先说）。这可能会覆盖我们的initialValuesfor the EditorField。

   constructor(props) {
     super(props);
     this.state = {
       editorState: EditorState.createEmpty()
    };

我没有找到解决此问题的解决方案并最终initialValues按预期使用，但我找到了一种替代方法来为编辑器设置默认值一些我们认为合适的 HTML 字符串。 这是该解决方案的链接： https ://github.com/jpuri/react-draft-wysiwyg/issues/357

于 2020-04-17T15:49:41.893 回答