Default styling issues with RTE

[Shalini]

Below I've included screenshots of some problems which I'm facing:

1.Picture 1 shows how the editor looks like in the beginning when untouched. Notice the tools coming in 2 rows. Can we make it by default as 1 from the beginning ?

2. Picture 2 shows how the typing output is. First the tools bar becomes 1 row. then if i type it starts from one space below(even if I use backspace it wont go to top os textbox).then there is a lot of space in between 2 input lines. That is when i've pressed enter only once.

3. Picture 3 shows that the same code used elsewhere produces different result which I what I actually want. Notice there is no spacing between two lines . Also the text starts from the beginning not one line below as in picture 2.But how come at 2 places the same code works differently ?

Attachment: Screenshots_9a7cb379.rar

[Keerthana Rajendran]

Hi Shalini,   

   

Thank you for contacting Syncfusion Support.   

   

Query 1: Picture 1 shows how the editor looks like in the beginning when untouched. Notice the tools coming in 2 rows. Can we make it by default as 1 from the beginning ?   

   

   

On looking into the screenshot, it seems you have used RTE inside Dialog but we are not sure whether it is our ejDialog. Based on our understanding, we have prepared a sample with RTE inside ejDialog and the toolbar is rendered fine with responsive icon during initial rendering. Please refer to the below sample.   

   

https://jsplayground.syncfusion.com/s4omkzig   

   

Please ensure whether isResponsive property of RTE is set to true in your sample. If issue persists, kindly modify the above sample to reproduce the issue at our end.   

   

Query 2: Picture 2 shows how the typing output is. First the tools bar becomes 1 row. then if i type it starts from one space below(even if I use backspace it wont go to top os textbox).then there is a lot of space in between 2 input lines. That is when i've pressed enter only once.   

   

   

By default, <p> tag will be rendered inside empty RTE from 15.2 version. We have added this to avoid styling issues in firefox. The typed content will be wrapped inside html tags based on its parent element. So with empty RTE, the content is rendered within <p> tags and styles related to <p> tag will be added.   

   

   

Query 3: Picture 3 shows that the same code used elsewhere produces different result which I what I actually want. Notice there is no spacing between two lines . Also the text starts from the beginning not one line below as in picture 2.But how come at 2 places the same code works differently ?   

   

   

As mentioned earlier, based on parent element the entering text will be wrapped. In this case, if the first row of content is div tag, then on clicking enter the typed text will be wrapped inside another div and corresponding styles will be added.   

   

Regards,   

Keerthana.