如何从React中的文本编辑器中获取值？[附段]

Question

我正在制作一个制作JSON表单的简单应用程序，我已经将基本细节和雇佣细节作为两个部分包括了。

基本细节部分有两个输入，比如名字和姓氏。

现在，我需要实现配置文件摘要控件，该控件应该是文本编辑器，输入的值需要以JSON格式存储。

请查看给定代码框链接中的JSON格式。

形成JSON的文件：https://codesandbox.io/s/nextjs-css-only-carousel-forked-8grpo?file=/components/form_context.js

{
    basicDetails: {
      firstName: "",
      lastName: "",
      profileSummary: "" --------> This is where I need to fetch the text editor entered values
    },
    companyDetails: [
      {
        companyName: "",
        designation: "",
        startDate: ""
      }
    ]
  }

文本编辑器文件：https://codesandbox.io/s/nextjs-css-only-carousel-forked-8grpo?file=/components/text_editor.js

要求：

要求文本编辑器值需要存储在JSON格式中。

如果文本在编辑器中是bold或bullet list，那么键profileSummary的值需要添加相应的标记。

我正在尝试实现文本编辑器字段的值，如：https://www.ippy.io/

当我试图构建类似于JSON结构的简历时，我无法理解应该如何将文本编辑器值设置为JSON键profileSummary。

完整的工作示例：

任何帮助都是非常感谢的。

Answer 1

每次editorState更改时，您都需要获得其简单的HTML等效值，并将其传递给您的BasicDetails组件。

onEditorStateChange = (editorState) => {
  // console.log(editorState);

  this.setState({ editorState }, () => {
    // state updated

    // convert editorState to plain HTML
    const contentRaw = convertToRaw(editorState.getCurrentContent());
    const contentHTML = draftToHtml(contentRaw);

    const fakeEvent = {
      target: {
        name: this.props.name,
        value: contentHTML
      }
    };

    // call onChange function from Parent passing the
    // fakeEvent object
    this.props.onChange(fakeEvent);
  });
};

在您的BasicDetails上，您将onChange和name道具传递给EditorContainer组件。

...

<EditorContainer
  name="profileSummary"
  onChange={(event) => handleInputChange(event)}
/>

不幸的是，将DraftJS编辑器内容转换为纯draft-js并不是在draft-js库中内置的，实际上它们只支持用于数据转换的下列函数

• convertFromRaw
• convertToRaw
• convertFromHTML

因此，您需要使用另一个库，在我上面的代码中，我使用的是draftjs-to-html --也就是创建react-draft-wysiwyg的人。

编辑我们可以通过检查editorState是否有文本来避免使用空的p标记来设置editorState。

this.setState({ editorState }, () => {
  const currentContent = editorState.getCurrentContent();
  const contentRaw = convertToRaw(currentContent);
  const value = currentContent.hasText() ? draftToHtml(contentRaw) : "";

  const fakeEvent = {
    target: {
      name: this.props.name,
      value
    }
  };

  this.props.onChange(fakeEvent);
});

​

​

Answer 2

您需要用hangleEditorChange编写一个函数BasicDetails。

然后,

# basic_detail.js
  ...
 <div className="">
        <label htmlFor="lastName">Profile Summary</label>
        <EditorContainer  onChnage ={hangleEditorChange}/>
   </div>
...


```js

text_editor.js

onEditorStateChange = (editorState) => {

this.setState({

  editorState

});

this.props.onChange(editorState)

}；