Problem with initial image positioning

[Lorella Caglio]

Hi,

when I insert images into rich text editor, the component show it as centered but don't include the style into html code.

For example, this is html after insert:

<p><img src="/Contents/CAT_5/35254bf2-c3e9-4105-8530-bad9b1318456/Innovate_0.jpg" class="e-rte-image e-imgbreak" alt="Innovate.jpg" width="auto" height="auto" style="min-width: 0px; max-width: 1737px; min-height: 0px;"> </p>

and this is how it looks (centered):

I have to modify the paragraph alignement to left and than back to center for having the correct html style:

<p style="cursor: auto; text-align: center;"><img src="/Contents/CAT_5/35254bf2-c3e9-4105-8530-bad9b1318456/Innovate_1.jpg" alt="Innovate.jpg" width="529" height="303" style="min-width: 0px; max-width: 1237px; min-height: 0px;" class="e-rte-image e-imgcenter e-imginline"> </p>

Thanks

[Revanth Krishnan]

Hi Lorella, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your query “When an image is inserting initially the image show it as centered, but the HTML of the image is not correct”. 

 

By default, when inserting the image in the Rich Text Editor, the image is will be displayed as a ‘breakline’ image which has the same CSS style properties as that of the image centered. So the class ‘e-imgbreak’ is added instead of the ‘e-imgcenter’ class. 

 

Please let us know if you need any further assistance. 

 

Regards, 

Revanth 

[Lorella Caglio]

Hi Revanth,

thank you for response.

I have another question: is there a way to automatically reduce image size when content created with richtexteditor is rendered outside the component itself,  as normal html content on mobile devices?

My application has an admin part for editing contents and a user part for reading contents

The application layout is responsive, but the image size does not change, so it may happen that, when reading, the image is langer the the <div> container used for render the html content.

Thanks.

[Indrajith Srinivasan]

Hi Lorella, 

 

Good day to you, 

 

We have validated your reported query. By default, when adding the images in the Rich Text Editor they are added with the actual image dimensions. In order to restrict the image size, we suggest you to configure, the Width property in the RichTextEditorImageSettings to load the images with specified width. Check the below shared code blocks for reference. 

 

Code blocks: 

 

 

@using Syncfusion.Blazor.RichTextEditor 

 

<SfRichTextEditor> 

    <RichTextEditorImageSettings Width="100px"/> 

</SfRichTextEditor> 

 

 

Documentation: https://blazor.syncfusion.com/documentation/rich-text-editor/image/#image 

 

Please let us know if the solution helps, 

 

Regards, 

Indrajith 

[Lorella Caglio]

Hi,

the application layout is responsive and user devices may vary from small (mobile) to xl (desktop).

If I set the image size to the suggested fixed width for small screens, on large desktop it will be too small.

My question is: is there a way to make the image rendering "responsive" so that it automatically scales to the right size based on display screen? 

Thanks

[Revanth Krishnan]

Hi Lorella, 

 

 

We have further validated your query “Is there a way to make the image rendering ‘responsive’ so that it automatically scales to the right size based on the display screen” 

 

By default, the Rich Text Editor doesn’t resize the images based on the screen size, but this requirement can be achieved by using the CSS style properties ‘max-width’ for the class ‘e-rte-image’ for different screen size using the media query is CSS. We have prepared a sample for your reference, 

 

Code Snippet: 

 

<style> 

/* Extra small devices (phones, 600px and down) */ 

@@media only screen and (max-width: 600px) { 

  .e-rte-image { 

    max-width: 200px !important; 

  } 

} 

 

/* Small devices (portrait tablets and large phones, 600px and up) */ 

@@media only screen and (min-width: 600px) { 

  .e-rte-image { 

    max-width: 200px !important; 

  } 

} 

 

/* Medium devices (landscape tablets, 768px and up) */ 

@@media only screen and (min-width: 768px) { 

  .e-rte-image { 

    max-width: 450px !important; 

  } 

} 

 

/* Large devices (laptops/desktops, 992px and up) */ 

@@media only screen and (min-width: 992px) { 

  .e-rte-image { 

    max-width: 450px !important; 

  } 

} 

 

/* Extra large devices (large laptops and desktops, 1200px and up) */ 

@@media only screen and (min-width: 1200px) { 

  .e-rte-image { 

    max-width: 450px !important; 

  } 

} 

</style> 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/RichTextEditor_Test1576818032 

 

Please check the above code snippet and the sample and let us know if it satisfies your requirement. 

 

Regards, 

Revanth 

 

 

[Lorella Caglio]

Hi Revanth,

great! that's just what i needed.

Thanks so much for the support.

[Revanth Krishnan]

Hi Lorella, 

 

Thanks for the update. 

 

We are glad that the provided solution satisfied your requirement. Please let us know if you need any further assistance. 

 

Regards, 

Revanth