Extracting the value from a Text Editor in React Js: [Code snippet provided]

Question

Extracting the value from a Text Editor in React Js: [Code snippet provided]

Currently, I am in the process of developing a basic app that generates a JSON form. So far, I have successfully incorporated sections for basic details and employment information.

The basic details section consists of two input fields: First Name and Last Name.

However, I now have a new requirement to add a Profile Summary control, which should be a text editor allowing users to enter text that will be stored in JSON format.

For reference, please check out the JSON format provided in this link.

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

To implement the text editor feature, you can refer to this file: Text Editor File

Objective:

The objective is to store the text editor content within the JSON structure.

For example, text formatting such as making text bold or creating a bullet list should reflect in the value of the key profileSummary.

In order to achieve this functionality similar to this platform, you may need to explore how to convert text editor input into the JSON key profileSummary.

View a working example here:

Working Example

Your assistance on this matter would be greatly appreciated.

javascript reactjs next.js text-editor draftjs

Answer 1

Answer №1

Whenever there is a change in the editorState, it is necessary to retrieve its plain HTML equivalent and then pass it to your BasicDetails component.

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

In your BasicDetails component, you need to provide onChange and name props to the EditorContainer component.

...

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

Unfortunately, the functionality for converting DraftJS Editor content to plain HTML is not included in the draft-js library. Instead, they only offer support for the following data conversion functions:

convertFromRaw
convertToRaw
convertFromHTML

Hence, an alternative library is required. In the provided code snippet, I am using draftjs-to-html, which is created by the same individual behind react-draft-wysiwyg.

Edit To prevent setting the profileSummary with an empty p tag, we can check if the editorState contains any text before proceeding.

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

https://codesandbox.io/s/nextjs-css-only-carousel-forked-unkdk?fontsize=14&hidenavigation=1&theme=dark

Answer 2

Whenever there is a change in the editorState, it is necessary to retrieve its plain HTML equivalent and then pass it to your BasicDetails component.

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

In your BasicDetails component, you need to provide onChange and name props to the EditorContainer component.

...

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

Unfortunately, the functionality for converting DraftJS Editor content to plain HTML is not included in the draft-js library. Instead, they only offer support for the following data conversion functions:

convertFromRaw
convertToRaw
convertFromHTML

Hence, an alternative library is required. In the provided code snippet, I am using draftjs-to-html, which is created by the same individual behind react-draft-wysiwyg.

Edit To prevent setting the profileSummary with an empty p tag, we can check if the editorState contains any text before proceeding.

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

https://codesandbox.io/s/nextjs-css-only-carousel-forked-unkdk?fontsize=14&hidenavigation=1&theme=dark

Answer 3

Answer №2

To complete the BasicDetails section, you must create a function called handleEditorChange.

After that,

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

# text_editor.js

  onEditorStateChange = (editorState) => {
    this.setState({
      editorState
    });
   this.props.onChange(editorState)
  };

Answer 4

To complete the BasicDetails section, you must create a function called handleEditorChange.

After that,

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

# text_editor.js

  onEditorStateChange = (editorState) => {
    this.setState({
      editorState
    });
   this.props.onChange(editorState)
  };

Extracting the value from a Text Editor in React Js: [Code snippet provided]

Answer №1

Answer №2

Similar questions

Triggering an event upon completion of ng-repeat's execution

The persistent issue of window.history.pushstate repeatedly pushing the identical value

Accessing data from a live database in a randomized sequence

Price Adjuster Tracker

Utilizing React Sound with React Router Dom

Transforming a string into an object

Adding a component dynamically with a link click in Angular: A step-by-step guide

Sequelize is unable to retrieve a table from the database

Utilize fetch API in React to streamline API responses by filtering out specific fields

How to redirect in Next.js from uppercase to lowercase url

The introduction of an underscore alters the accessibility of a variable

Dealing with menu overflow in React using Material UI

React application experiencing incorrect hexadecimal hash value output in crypto function

Text displayed in dropdown when selecting autocomplete option from Material UI

The SSE functionality is effective in a local environment, but encounters issues when deployed on Vercel's

Adding flair to a fresh element and then removing it upon its inception

Is a component updating an unregulated text input to be controlled?

Can you explain the purpose of this script? Is it considered harmful?

The input field in Ckeditor dialogs becomes inaccessible when the editor is placed within a modal interface

Mastering div manipulation with jQuery: A step-by-step guide