Search code examples
javascriptreactjsckeditor

How to pass <p> tag from CKEditor in the request in reactJS?

onFocus(evt) {
   console.log(evt);
    console.log("htmltag <p> ", evt.editor._.data);
    this.activeEditor = evt.editor;

}

onChange(evt){

  var newContent = evt.editor.getData();
  this.setState({content: newContent});
  console.log("CKEditor content",newContent);

}

I am having onChange event for CKEditor. and on focus of the editor i am entering some data in the editor. From onFocus() i am able to get the console of "evt.editor._.data" like this is xyz in paragraph tag

Now i need to call an API with following request: 

_createTemplateDetails(e){
    e.preventDefault();

    let data = {
      name : this.state.name,
      title : this.state.title,
      orgName : this.state.orgName,
      formName: this.state.formName,
      html:  '<html><head></head><body></body></html>'
     };

    TemplateAction._createTemplateDetails(data);

 }

In between body tag I need to pass consoled paragraph tag from the onFocus(evt) which i can able to console from "evt.editor._.data"

Solution

  • It seems like you are storing whatever was typed in the editor area inside the component state, under the property content: this.state.content

    So when you make your request, just include that in your html property inside your data object:

    const data = {
  // ...
  html: `<html><head></head><body>${this.state.content}</body></html>`,
};

    The construct above uses string interpolation. If you don't have ES6 to ES5 transpilation, just use concatenation like so:

    '<html><head></head><body>' + this.state.content + '</body></html>'