Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

149
Views
React CKEditor5 Form submit not getting the data?

I am using CKeditor in react. On Form submit, why entered data is not coming.

  1. Form submit, CKeditor data is still showing empty
  2. How to get the CKEditor data both in text as well as HTML format. Please find my code:
import React from "react";
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
export class UseEditor extends React.Component {
  constructor(props) 
  super(props);
  this.state = {
  DescriptionTextPlain: "",
  DescriptionTextHTML: "",
  loading: true,
 };
   this.handleSubmit = this.handleSubmit.bind(this);
}
  handleEditorChange(event, editor) {
   console.log({ event, editor });
 }
 handleSubmit(event) {
  const DescriptionTextPlain = this.state.DescriptionTextPlain;
  const DescriptionTextHTML = this.state.DescriptionTextHTML;
  const data = {
     DescriptionTextPlain, DescriptionTextHTML
  }
   fetch(REQUEST_URL, {
     method: 'POST'
       }
       render() {
             return (
                    <div>
<form onSubmit={this.handleSubmit}>
<div>
             <CKEditor name="DescriptionTextPlain" editor={ClassicEditor}
                    config={{
                           toolbar: [
'|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', '|',
'outdent', 'indent', '|', 'insertTable', 'undo', 'redo', 'style',
'strikethrough', 'subscript', 'superscript'
] }}  
 data={this.state.DescriptionTextPlain || ''}
 onReady={editor => { this.editor = editor;}}
 onChange={this.handleEditorChange}
 Width="100%" Height="125px"
 value={this.state.DescriptionTextPlain} />
</div>     <input type="submit" name="submit" value="Submit" />
</form>
      </div>
             );
       }
}
export default UseEditor;
about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!