removing the default line breaks upon clicking enterfor new line

[Aditya Murthy]

HI Team,

The default RTE beheviour upon clicking of enter is it goes to new line with some top and bottom margin to mimic line breaks

SO is there a way to remove the current beheviour so as to not give spaces between rows of lines ?

Thanks,

Aditya

[Indrajith Srinivasan]

Hi Aditya, 

 

Greetings from Syncfusion support, 

 

We have validated your reported query. Yes, you can remove the spaced between the line using the CSS style margin-bottom for the Rich Text Editor contents. Check the below CSS style and sample for reference. 

 

CSS style:  

 

 

.e-richtexteditor .e-rte-content .e-content p { 

       margin-bottom: 0px; 

} 

 

 

Sample: https://stackblitz.com/edit/angular-nvf4zk-2rmmkh?file=app.component.html  

 

Please let us know if the solution helps, 

 

Regards, 

Indrajith 

[Aditya Murthy]

Hi Aditya, 

 

Greetings from Syncfusion support, 

 

We have validated your reported query. Yes, you can remove the spaced between the line using the CSS style margin-bottom for the Rich Text Editor contents. Check the below CSS style and sample for reference. 

 

CSS style:  

 

 

.e-richtexteditor .e-rte-content .e-content p { 

       margin-bottom: 0px; 

} 

 

 

Sample: https://stackblitz.com/edit/angular-nvf4zk-2rmmkh?file=app.component.html  

 

Please let us know if the solution helps, 

 

Regards, 

Indrajith 

Hi Team,

Thanks for the input . This solution worked..

Regards,

Aditya

[Revanth Krishnan]

Hi Aditya, 

 

 

Good day to you. 

 

 

We are glad that the provided solution is working and the reported issue has been resolved. 

 

Regards, 

Revanth 

[Aditya Murthy]

Hi Team ,

the issue is solved at UI level but when i send the content over the api i can still see the margin present hence resulting in a double line break

So in short this solution applies only on DOM level but when i bind it to a variable i can see the margin.

Please let me know a possible solution

[Indrajith Srinivasan]

Hi Aditya, 

 

Good day to you, 

 

We have validated your reported query. The style suggested, will work only for the elements added in the Rich Text Editor. Can you please share us the following details, 

 

• How you are saving the value in the variable and previewing it ?
• Please let us know where you can see the margin ?

 

Regards, 

Indrajith 

[Aditya Murthy]

HI ,

Thanks for the reply.

• How you are saving the value in the variable and previewing it ? - im doing a ng model to a variable and upon click of a button i need to call api and update it to database. but when i copy paste the variable in a html file, i see the margins on top and bottom which i removed using custom css in editor.
• Please let us know where you can see the margin ? - top and below

i have attached 2 files for your reference. Please refer the character 'f' typed in new line using enter. in editor its doesnt show any margins , but when i send it in api i see margins 

Regards,

Aditya

Attachment: screenshots_14f1e0c4.zip

[Indrajith Srinivasan]

Hi Aditya, 

 

Thanks for the update, 

 

Based on the shared screenshots, the spaces generated are not the styles applied from the Rich Text Editor. It seems to be the default spaces, for the new line created using enter key action. Also, please let us know how are you getting the text value from Rich Text Editor and passing it to the Database ? 

 

Regards, 

Indrajith