title: How to make signature in the middle of the text where the cursor is placed?
body: <p><a href="https://i.stack.imgur.com/9Dt9P.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9Dt9P.png" alt="I made a functionality for creating a signature in react-CKEditor but I am able to make a signature only after the end of the text if text exits. I cant able to make the signature based on the cursor placed."></a></p>
  
  <pre><code>import React from 'react';
  import { Link } from 'react-router';
  import DatePicker from 'react-datepicker';
  import 'react-datepicker/dist/react-datepicker.css';
  import CKEditor from "react-ckeditor-component";
  import SignaturePad from "./index";
  import Dropzone from 'react-dropzone';
  import request from 'superagent';
  import './imageupload.css';
  import Dialog from 'material-ui/Dialog';
  const CLOUDINARY_UPLOAD_PRESET = 'bmzjbxoq';
  const CLOUDINARY_UPLOAD_URL = 'https://api.cloudinary.com/v1_1/react-cloudinary/upload';
  
  
  import FontAwesome from 'react-fontawesome';
  
  class ContractDetails extends React.Component {
      textBoxIds= ['Subscription Amount', 'Agent Name', 'NRIC/Passport Number', 
      'No of Preference Shares', 'Monthly Profit pay by Company', 'Contract Value',
      'Contract Start Date', 'Contract End Date', 'First Pay out Date', 'Last Pay out Date',
      'Subscription Amount Payback Date', 'Client (shareholder) Name','Client NRIC number','Client address','Client email','Client attn','Quarter percentage','Total Profit percentage','Profit amount','Monthly profit percentage','Additional profit percentage','Extension amount','Additional profit Amount','Company email','Company attn','Witness 1 NRIC number','Witness 2 NRIC number', 'Agent Signature', 'Client Signature', 'Witness-1 Signature', 'Witness-2 Signature'];
      currentActiveTextBox;
      activeEditor;
      constructor(props) {
          super(props);
          var today = new Date(),
              date = today.getFullYear() + '-' + (today.getMonth() + 1) + '-' + today.getDate();
  
          this.state = {
              date: date,
  
              Companyemail: '',
              Companyattn: '',
              FirstWitnessNRICnumber: '',
              SecondWitnessNRICnumber: '',
              currency: '',
              clientname: '-1',
              templatename: '-1',
              orgName: '-1',
              uploadedFile: null,
              picture: '',
              content: "",
              openSignatureDialog: false,
              organizationlist: {
                  organizations: []
              },
              templatelist: {
                  templates: []
              },
              clientdetails: {
                  clients: []
              },
              singletemplate: {
                  template: {},
              },
              editorContent: ''
  
  
          };
  
          this.handleCompanyemailChange = this.handleCompanyemailChange.bind(this);
          this.handleCompanyattnChange = this.handleCompanyattnChange.bind(this);
          this.handleFirstWitnessNRICnumberChange = this.handleFirstWitnessNRICnumberChange.bind(this);
          this.handleSecondWitnessNRICnumberChange = this.handleSecondWitnessNRICnumberChange.bind(this);
  
          this.handleContractValueChange = this.handleContractValueChange.bind(this);
          this.handleClientNameChange = this.handleClientNameChange.bind(this);
          this.handleTemplateNameChange = this.handleTemplateNameChange.bind(this);
          this._createContractDetails = this._createContractDetails.bind(this);
          this.handleOrgNameChange = this.handleOrgNameChange.bind(this);
          this._openSignatureDialog = this._openSignatureDialog.bind(this);
          this.replaceText = this.replaceText.bind(this);
          this.ckeditorInstanceReady = this.ckeditorInstanceReady.bind(this);
          this.updateEditorData = this.updateEditorData.bind(this);
          this._templateStoreChange = this._templateStoreChange.bind(this);
          this._contractStoreChange = this._contractStoreChange.bind(this);
          this._clientStoreChange = this._clientStoreChange.bind(this);
          this.handleImageUpload = this.handleImageUpload.bind(this);
          this.handleEditorChange = this.handleEditorChange.bind();
          this.onChange = this.onChange.bind(this);
          this.logSig = this.logSig.bind(this);
      }
  
  
  
      componentDidMount() {
          TemplateAction._getOrganizationList();
          TemplateAction._getTemplateList();
          ClientAction._getClientList();
      }
  
  
      ckeditorInstanceReady(e) {
          this.activeEditor = e.editor;
      }
  
      updateEditorData() {
  
          this.state.content = _.cloneDeep(this.state.editorContent);
          this.textBoxIds.forEach((id) =&gt; {
              let element = document.getElementById(id);
              if (element != undefined) {
                  if (element.value != undefined &amp;&amp; element.value != '') {
                      this.replaceText(id, element.value);
                  }
              }
          })
          this.activeEditor.setData(this.state.content);
      }
  
      replaceText(textboxId, value) {
          var templatesToReplace = [];
          const myRegexExp = /\$\$(.*?)\$\$+/g;
          let findResults = myRegexExp.exec(this.state.content);
          while (findResults != null) {
              templatesToReplace.push(findResults);
              findResults = myRegexExp.exec(this.state.content);
          }
          templatesToReplace.forEach(line =&gt; {
              if (line[1] == textboxId) {
                  this.state.content = this.state.content.replace(line[0], value);
              }
          })
      }
  
  
  
  
  
      handleEditorChange() {
          console.log("varma");
          let singletemplate = TemplateStore._getSingleTemplate() || {};
          console.log("inside editor", singletemplate);
          this.setState({ singletemplate });
          this.setState({ editorContent: singletemplate.templates.html });
      }
  
      handleOrgNameChange(e) {
          this.setState({ orgName: e.target.value });
          console.log(e.target.value);
  
      }
  
      onChange(evt) {
          var newContent = evt.editor.getData();
          this.setState({ editorContent: newContent });
          console.log("CKEditor content", newContent);
  
      }
  
  
  
      onImageDrop(files) {
          this.setState({
              uploadedFile: files[0]
          });
  
          this.handleImageUpload(files[0]);
      }
  
      handleImageUpload(file) {
  
          let upload = request.post(CLOUDINARY_UPLOAD_URL)
              .field('upload_preset', CLOUDINARY_UPLOAD_PRESET)
              .field('file', file);
  
          upload.end((err, response) =&gt; {
              if (err) {
                  console.error(err);
              }
  
              if (response.body.secure_url !== '') {
                  this.setState({
                      picture: response.body.secure_url
                  });
  
              }
          });
  
      }
  
  
  
      logSig = () =&gt; {
  
          const signaturedata = this.signaturePad.toDataURL();
          let oldContent = this.state.editorContent;
  
          let elem= oldContent ? oldContent + '&lt;img alt src=' + signaturedata + ' /&gt;' :'&lt;img alt src=' + signaturedata + ' /&gt;';
          this.setState({
              openSignatureDialog: false,
              editorContent:elem
          })
          console.log("signaturedata", signaturedata);
  
      }
  
  
      _closeDialog() {
          this.setState({
              openSignatureDialog: false
          })
      }
  
      _openSignatureDialog() {
          this.setState({
              openSignatureDialog: true,
  
          });
      }
  
      render() {
          return (
              &lt;div&gt;
  
                  &lt;div class="sidebar-overlay" id="sidebar-overlay"&gt;&lt;/div&gt;
                  &lt;div class="sidebar-mobile-menu-handle" id="sidebar-mobile-menu-handle"&gt;&lt;/div&gt;
                  &lt;div class="mobile-menu-handle"&gt;&lt;/div&gt;
                  &lt;div className="title-block"&gt;
                      &lt;div className="row"&gt;
                          &lt;div className="col-md-12 d-flex align-items-center"&gt;
                              &lt;h3 className="title mr-auto"&gt; Create/Edit Contract &lt;/h3&gt;
  
                              &lt;div&gt;
                                  &lt;button type="submit" className=" ml-2 mr-0 btn btn-primary" onClick={this.updateEditorData}&gt; Insert into Contract &lt;/button&gt;
                                  &lt;button type="submit" className=" ml-2 mr-0 btn btn-primary" onClick={this._createContractDetails}&gt; Save &lt;/button&gt;
                                  &lt;Link to="/contractlist" type="submit" className=" ml-2 mr-0 btn btn-primary"&gt; Close &lt;/Link&gt;
  
  
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;form name="item"&gt;
                      &lt;div className="card card-block"&gt;
                          &lt;div className="row"&gt;
                              &lt;div className="col-md-4"&gt;
                                  &lt;div className="form-group d-flex"&gt;
                                      &lt;label className=" form-control-label text-xs-right"&gt; Contract ID: &lt;/label&gt;
                                      &lt;div className="col-sm-8 ml-2"&gt;
                                          &lt;input type="text" className="form-control box_ip" placeholder="Contract ID" onChange={this.handleContractIdChange} name='' value={this.state.contractId} /&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div className="col-md-4"&gt;
                                  &lt;div className="form-group d-flex"&gt;
                                      &lt;label className="form-control-label text-xs-right"&gt; Created Date: &lt;/label&gt;
                                      &lt;div className="col-sm-8 ml-2"&gt;
                                          &lt;input type="text" className="form-control box_ip" placeholder="Created Date" value={this.state.date} /&gt;
  
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;div className="col-md-4"&gt;
                                  &lt;div className="form-group d-flex"&gt;
                                      &lt;label className="form-control-label text-xs-right"&gt; Last Edited Date: &lt;/label&gt;
                                      &lt;div className=" col-sm-8 ml-2"&gt;
                                          &lt;input type="text" className="form-control box_ip" placeholder="Last Edited Date" /&gt;
                                      &lt;/div&gt;
  
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                              &lt;div className="form-group row"&gt;
                              &lt;label className="col-sm-2 form-control-label text-xs-right"&gt; Last Pay out Date: &lt;/label&gt;
                              &lt;div className="col-sm-3"&gt;
                                  &lt;DatePicker
                                      className="form-control box_ip"
                                      selected={this.state.lastpayoutDate}
                                      onChange={this.handleLastPayoutDateChange}
                                      id="Last Pay out Date"
                                  /&gt;
                              &lt;/div&gt;
  
                              &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
                                          &lt;label className="col-sm-2 form-control-label text-xs-right"&gt; Subscription Amount Payback Date: &lt;/label&gt;
                              &lt;div className="col-sm-3"&gt;
                                  &lt;DatePicker
                                      className="form-control"
                                      selected={this.state.subscriptionamountpayDate}
                                      onChange={this.handleSubscriptionamountPayDateChange}
                                      id="Subscription Amount Payback Date"
                                  /&gt;
                              &lt;/div&gt;
  
                          &lt;/div&gt;
  
                          &lt;div className="form-group row"&gt;
                              &lt;label className="col-sm-2 form-control-label text-xs-right"&gt; Agent Signature: &lt;/label&gt;
                              &lt;button type='button' style={{ height: '30px' }} id ="Agent Signature" className="btn btn-primary" onClick={this._openSignatureDialog.bind(this)}&gt;Click For Signature&lt;/button&gt;
  
                              &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
                                              &lt;label className="col-sm-2 form-control-label text-xs-right"&gt; Client Signature: &lt;/label&gt;
                              &lt;button type='button' style={{ height: '30px' }} id='Client Signature' className="btn btn-primary" onClick={this._openSignatureDialog.bind(this)}&gt;Click For Signature&lt;/button&gt;
  
                          &lt;/div&gt;
  
  
                          &lt;div className="form-group row"&gt;
                              &lt;label className="col-sm-2 form-control-label text-xs-right"&gt; Witness-1 Signature: &lt;/label&gt;
                              &lt;button type='button' style={{ height: '30px' }} id='Witness-1 Signature' className="btn btn-primary" onClick={this._openSignatureDialog.bind(this)}&gt;Click For Signature&lt;/button&gt;
                              &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;
                                          &lt;label className="col-sm-2 form-control-label text-xs-right"&gt; Witness-2 Signature: &lt;/label&gt;
  
                              &lt;button type='button' style={{ height: '30px' }} id='Witness-2 Signature' className="btn btn-primary" onClick={this._openSignatureDialog.bind(this)}&gt;Click For Signature&lt;/button&gt;
  
  
                          &lt;/div&gt;
  
  
                          &lt;div className="form-group row"&gt;
                              &lt;label className="col-sm-2 form-control-label text-xs-right"&gt; Contract Editor: &lt;/label&gt;
  
                              &lt;div className="form-group col-sm-12"&gt;
                                  &lt;br /&gt;
                                  &lt;CKEditor id="currentCKEditor" activeClass="editor" key={this.state.editorContent} content={this.state.editorContent} events={{ "change": this.onChange, "instanceReady": this.ckeditorInstanceReady }} /&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
  
  
                          &lt;div className="form-group row"&gt;
                              &lt;label className="col-sm-2 form-control-label text-xs-right"&gt; Uploaded File: &lt;/label&gt;
                              &lt;div className="col-sm-3"&gt;
                                  {/*&lt;a className="btn btn-primary ml-0 mr-2" href="#" data-toggle="modal" data-target="#modal-media"&gt;Upload Docs&lt;/a&gt;*/}
                                  &lt;div className="col-sm-8 d-flex justify-content-end"&gt;
                                      &lt;div className="images-container"&gt;
                                          &lt;div className="FileUpload" &gt;
                                              &lt;Dropzone
                                                  onDrop={this.onImageDrop.bind(this)}
                                                  multiple={false}
                                                  accept="image/*"&gt;
                                                  &lt;div&gt;Drop an image or click to select a file to upload.
  
  
                                                  &lt;/div&gt;
                                              &lt;/Dropzone&gt;
                                          &lt;/div&gt;
  
                                          &lt;div&gt;
                                              {this.state.picture === '' ? null :
                                                  &lt;div&gt;
                                                      &lt;p&gt;{this.state.uploadedFile.name}&lt;/p&gt;
                                                      &lt;img src={this.state.picture} /&gt;
                                                  &lt;/div&gt;}
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
  
  
                      &lt;/div&gt;
  
                  &lt;/form&gt;
  
                  &lt;Dialog
                      title={
                          &lt;div className="savedchart_header dashboard_savedchart"&gt;
  
                              &lt;ul className="top_row_right  list-inline clearfix" style={{ width: '100%' }}&gt;
                                  &lt;li className="pull-left" &gt; Signature &lt;/li&gt;
                                  &lt;li className="pull-right"&gt;&lt;a className="ml-2 mr-0 btn btn-primary " onClick={this._closeDialog.bind(this)}&gt;Close&lt;/a&gt;&lt;/li&gt;
                                  &lt;button type='button' style={{ float: 'right' }} className="ml-2 mr-0 btn btn-primary" onClick={this.logSig.bind(this)}&gt;submit&lt;/button&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;}
                      className=""
                      open={this.state.openSignatureDialog}
                      modal={false}
                      autoScrollBodyContent={true}
                      contentStyle={{ maxWidth: 'none' }}
                      onRequestClose={this._closeDialog} &gt;
  
                      &lt;div className="" style={{ height: '200px' }}&gt;
                          &lt;div style={{ backgroundColor: '#f1f1f1', width: '300px', height: '150px' }}&gt;
                              &lt;SignaturePad clearButton="true" ref={ref =&gt; this.signaturePad = ref} /&gt;
  
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/Dialog&gt;
  
  
              &lt;/div&gt;
          )
      }
  }
  
      export default ContractDetails;
  </code></pre>
  
  <p>For making the signature I have created a dialog box and after making signature on click on submit the signature is placing at the end of the content instead of at where the cursor is placed.</p>
  
  <p><a href="https://i.stack.imgur.com/cZqfw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cZqfw.png" alt="Dialog box for signature"></a></p>
  
  <p>I am making The signature using react-signature-pad component and react-CKEditor I cannot able to replace the signature based on the curser placed in the editor in the middle of the text.
  Please, anyone, help me in working on this functionality trying from two days cant able to achieve .</p>