RTE Image Resize not working in Outlook Email Preview

[Khalid Mahmood]

Hi,

I am using RTE to send e-mails to clients by using SMTP. By Adding image from URL into RTE and Resize it my required size. In Email Preview in Web mail clients its shows properly but in outlook email client image shows in full height/width of image and doesn't resized accordingly defined in RTE because RTE resize image using <style> </style> Tag and height/width property set Auto that doesn't work properly in Outlook email client.
I think RTE resize should use image height/width property instead of defining <style></style> properties or should update in both.

[Vinothkumar Yuvaraj]

Hi Khalid Mahmood,

We want to let you know that by default, we have set the image width and height to pixels. When using pixels and uploading to Outlook, the image is in its original position because Outlook considers the image width and height as our specified pixels. This ensures that the original image is retained in the Outlook.

To solve your problem, you can use the following code. In this code, we have modified the width and height for the image ‘PX’ to a number using the resizing event. Please take a look at the attached sample for your reference.

<ejs-richtexteditor id="defaultRTE" resizing="resizing" created="created">

    <e-content-template>

<div>

<img id='rteImageID' style="width:300px; height:300px;transform: rotate(0deg);" alt="Logo" src=https://ej2.syncfusion.com/demos/src/rich-text-editor/images/RTEImage-Feather.png />

</div>

    </e-content-template>

</ejs-richtexteditor>

<script>

    var rteObj;

    function resizing(e) {

   var image = rteObj.inputElement.querySelectorAll("img")

   if (e.requestType == 'images' && image != null) {

     for (var i=0; i<image.length ;i++){

                image[i].width = parseFloat(image[i].style.width)

                image[i].height = parseFloat(image[i].style.height)

     }

   }

  }

    function created() {

rteObj = this;

    }

</script>

Stack overflow : https://stackoverflow.com/questions/41789814/outlook-shows-images-at-original-size

API Link : https://help.syncfusion.com/cr/aspnetcore-js2/syncfusion.ej2.richtexteditor.richtexteditor.html#Syncfusion_EJ2_RichTextEditor_RichTextEditor_Resizing

Regards,

Vinothkumar

Attachment: WebApplication1_77957d93_a225fe59.zip

[Khalid Mahmood]

Hi Vinothkumar Yuvaraj,

I am using RTE in whole Web Application and there are so many page those used RTE. This solution is for individual RTE and can't be used as generic that can handle the any RTE in Application.
Even if I use a common method and register to all RTE it works in Web pages but it does not work in Modals and an other problem to find rteObj in resizing() method and common created callback returns rteObj but can't store common rteObj reference because there may be more RTE used in single page.
I think resizing(e) callback should also include rteObj to make generic method and can used in whole application.

Or there is any other suggestion so I can use a common solution to address this problem in whole Web App. 

[Thangavel E]

Hi Khalid Mahmood,

We have implemented the resizing method generically in the _Layout.cshtml file. You can access that method for multiple Rich Text Editors, and then we have to get the instance of the Rich Text Editor based on the target element. Please take a look at the following code and attached sample.

<ejs-richtexteditor id="defaultRTE" resizing="resizing">

</ejs-richtexteditor>

 

///

 

<ejs-richtexteditor id="defaultRTE-one" resizing="resizing">

</ejs-richtexteditor>

_Layout.cshtml

  <main role="main" class="pb-3">

@RenderBody()

<script>

                function resizing(e) {

                    var image = ejs.base.closest(e.event.target, ".e-richtexteditor").firstChild.ej2_instances[0].inputElement.querySelectorAll("img")

                    if (e.requestType == 'images' && image != null) {

                        for (var i = 0; i < image.length; i++) {

                            image[i].width = parseFloat(image[i].style.width)

                            image[i].height = parseFloat(image[i].style.height)

                        }

                    }

                }

</script>

        </main>

We hope the above solution solves your problem. If it does not meet your requirements, please get back to us.

Attachment: WebApplication1_6e3b3062.zip

Regards

Thangavel E