React CKEditor5 Form submit not getting the data?

Viewed 35

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;
0 Answers
Related