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

Question

我正在制作一个制作 JSON 表格的简单应用程序，我已经将基本详细信息和就业详细信息分为两个部分。

基本详细信息部分有两个输入，例如名字和姓氏。

现在要求我实现 Profile Summary 控件，它应该是一个文本编辑器，输入的值需要以 JSON 格式存储。

请查看给定代码框 link 中的 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 键 profileSummary。

完整的工作示例：

https://codesandbox.io/s/nextjs-css-only-carousel-forked-8grpo

非常感谢任何帮助。

Answer 1

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

比

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

Answer 2

每次 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 Editor 内容转换为普通 HTML 在 draft-js 库中不是 built-in，事实上它们只支持以下数据转换功能

所以你需要使用另一个库，在我上面的代码中我使用的是draftjs-to-html - the same person who created react-draft-wysiwyg。

编辑我们可以通过检查 editorState 是否有一些文本来避免将 profileSummary 设置为空的 p 标签。

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

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

How to get the value from Text Editor in React Js? [Snippet attached]

javascript

reactjs

next.js

text-editor

draftjs