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

问题描述

我正在制作一个简单的应用程序，该应用程序可以生成JSON表单，并且已经将基本详细信息和工作详细信息分为两个部分。

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

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

请在给定的codeandBox链接中查看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

非常感谢您的帮助。

解决方法

每次更改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)}
/>

不幸的是，draft-js库中未内置将DraftJS Editor内容转换为纯HTML的功能，实际上它们仅支持以下用于数据转换的功能

• convertFromRaw
• convertToRaw
• convertFromHTML

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

编辑我们可以通过检查profileSummary是否包含一些文本来避免将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);
});

,

您需要在BasicDetails中编写一个功能<style name="ClickableView"> <item name="colorControlHighlight">@android:color/white</item> <item name="android:background">?selectableItemBackground</item> </style> 。

然后

 hangleEditorChange