0

Initially I had a CKeditor component, from where I had a state variable editorContent

 <CKEditor id="currentCKEditor" activeClass="editor" key={this.state.editorContent} content={this.state.editorContent} events={{ "change": this.onChange, "instanceReady": this.ckeditorInstanceReady }} />

When component is rendered, the editorContent comes from the templatestoreChange. EditorContent state has the following data

_templateStoreChange(type) {

    if (type == 'SingleTemplate') {
        let singletemplate = TemplateStore._getSingleTemplate() || {};
        console.log("single template response", singletemplate);
        this.setState({ editorContent: singletemplate.template.html });
    }
}

After templateStoreChange logSig is called here the editorContent changes. Instead of editorContent State getting updated It is previous state is getting removed and changing the entire editorContent.

  logSig = () => {
   const signaturedata = this.signaturePad.toDataURL();

    let elem= '<img alt src=' + signaturedata + ' />';
    this.setState({
        openSignatureDialog: false,
        editorContent:elem
    })
    console.log("signaturedata", signaturedata);

}`enter code here`

I need the state to get updated instead of entire state being removed and changed to a new state.

siva
  • 45
  • 1
  • 2
  • 12

1 Answers1

0

You assigned only elem variable to editorContent and losing whole content created before.

The solution is to concatenate elem variable to existing state.

logSig = () => {
    const signaturedata = this.signaturePad.toDataURL();

    let elem = '<img alt src=' + signaturedata + ' />';
    this.setState({
        openSignatureDialog: false,
        editorContent: this.state.editorContent + elem
    })
}
Aren Hovsepyan
  • 1,947
  • 2
  • 17
  • 45
  • By inserting this.state.editorContent + elem like this the elem is populating after this.state.editorContent Instead of after i am using editor where ever cursor place i need to insert there – siva Dec 24 '17 at 03:50
  • You should determine it by cursor place and make formation of text, https://stackoverflow.com/questions/2897155/get-cursor-position-in-characters-within-a-text-input-field, it is not ReactJS task. – Aren Hovsepyan Dec 24 '17 at 05:30