How to fix width and height of the image in the react-CKEditor component?

Question

How to reduce the size of the image from original image size in CKEditor.

 <button type='button' className="ml-2 mr-0 btn btn-primary" onClick={this.logSig.bind(this)}>submit</button>

  logSig = () => {

    const signaturedata = this.signaturePad.toDataURL();
    const signatureImg = '<img alt src=' + signaturedata + '/> ';
    const { editorContent, signDialogOpenedFor } = this.state;

    let elem = editorContent ? this.getElemForPDF(editorContent, signDialogOpenedFor, signatureImg) : signatureImg;

    this.setState({
        openSignatureDialog: false,
        signDialogOpenedFor: '',
        editorContent:elem
    });
}

we are inserting the signature image from the dialog box to the editor.

in the editor after inserting the image it is of size 300 * 150

From image-2 from size 300 * 150 i need to fix it with 200 * 100 in the editor. Thanks in advnace

Answer 1

Can't you just add the width and height in your signatureImg constant?

    const signatureImg = '<img alt src=' + signaturedata + ' width=200 height=100/> ';