Auto-size of RTE image during upload

[Randy Craven]

Hello,

When uploading an image to the RTE, I would like to set the width and height of the image, so that the entire image will be visible within the dimensions of the RTE .  I would prefer to do this programatically and not allow the user to set the dimensions.

Can anyone suggest a way to do this?

Thanks,

Randy Craven

[Dhivyalakshmi Thirumurugan]

Hi Randy,   

   

Thanks for contacting Syncfusion support.   

  

We can resize the image by setting the height and width in the image dialog. For this we need to set the showDimensions property as trueand by default, the Constrain Proportion checkbox is selected to resize an image to an exact proportion. To apply the exact width and height that you specify into the Height and Width textboxes, uncheck the Constrain Proportions checkbox.  

 

Please find the code below.  

 

  $("#rteSample").ejRTE({   

  

                toolsList: ["images"],   

                tools: { images: ["image"] },   

                width: "100%",   

                minWidth: "150px",   

                showDimensions: true,   

                imageBrowser: { filePath: "http://mvc.syncfusion.com/OdataServices/FileBrowser/", ajaxAction: fileService, extensionAllow: "*.png, *.gif, *.jpg, *.jpeg, *.docx", ajaxSettings: ajaxSettings },   

                fileBrowser: { filePath: "http://mvc.syncfusion.com/OdataServices/FileBrowser/", ajaxAction: fileService, extensionAllow: "*.txt, *.png, *.pdf,*.jpeg", ajaxSettings: ajaxSettings1           }   

               

});   

  

 We have prepared the sample as per your requirement and please find the sample below.  

 

Sample Link: http://jsplayground.syncfusion.com/u0rc4via  

 

Other References:  

 

UG reference: http://help.syncfusion.com/js/richtexteditor/image-and-file-browser#resize-an-image  

   

Please let us know if you need any further assistance.   

   

Regards,   

Dhivyalakshmi.   

[Randy Craven]

Hello Dhivyalakshmi,

Thank you for this information.

Is there a way to size the image without asking the user to enter anything?  For example: by determining the dimensions of the uploaded image and also the RTE 'viewport' and programmatically sizing the image to fit.

Can that be done?

Thank you again,

Randy

[Keerthana Rajendran]

Hi Randy, 

Thank you for contacting Syncfusion support.  

We have prepared a sample based on our understanding by setting default height and width for images inserted into RTE in change event of RTE 

<code> 

function onchange() 

                             { 

                             $(".content-iframe").contents().find('img').css({'width':'200px','height':'200px'}); 

                              

                             } 

</code> 

 

We have prepared a sample for your reference. Please refer the below given link: 

Sample Link: http://jsplayground.syncfusion.com/hw55s3fz 

If this doesn't match your requirement please get back to us with some more clear details on your query  

Regards, 

Keerthana