Missing breakline in RichTextEditor

Hi,

Breakline is missing in richtexteditor, but looks good in textarea.

sample text:

Microsoft

From Wikipedia, the free encyclopedia

Jump to navigationJump to search

Microsoft Corporation

A square divided into four sub-squares, colored red, green, yellow and blue (clockwise), with

the company name appearing to its right.

Microsoft's logo since 2012

Building92microsoft.jpg....


Rictexteditor:

Textarea:


Code:

<html>

<div id="defaultRTE">

         <p id="before-edit-OCR-text">@Model.documentText</p>

</div>

<script>

// Initialize Rich Text Editor component

        var defaultRTE = new ej.richtexteditor.RichTextEditor({

            height: '735px',

            toolbarSettings: { enable:false }

        });

    // Render initialized Rich Text Editor.

    defaultRTE.appendTo('#defaultRTE');

</script>

</html>



3 Replies

BS Buvana Sathasivam Syncfusion Team April 16, 2022 02:31 PM UTC

Hi Kuan,


Greetings from Syncfusion support.


We need the following details to proceed further and provide you with a suggestion as early as possible. Kindly share with us the following details for better assistance.

  1. Share the @Model.documentText code.
  2. Are you passing an HTML string or normal text to the Rich Text Editor content?

Regards,

Buvana S



KL Kuan Long Khiu April 19, 2022 01:17 AM UTC

Hi Buvana S,


Thanks for replying so promplty.

1.Share the @Model.documentText code.

Ans: document Text is get from database.

2.Are you passing an HTML string or normal text to the Rich Text Editor content?

Ans: Passing normal text with breakline is "\ n".


Regards,

K





BS Buvana Sathasivam Syncfusion Team April 19, 2022 08:56 AM UTC

Hi Kuan,


Thank you for your update.


We let you know that our Rich Text Editor component accepts HTML string content. To convert "\n" to a new line in the Rich Text Editor component, use the "<br>" tag as shown below.


<div id="defaultRTE">

         <p id="before-edit-OCR-text">@Model.documentText.replace(/(?:\r\n|\r|\n)/g, '<br>')</p>

</div>


If the above solution did not solve your problem, can you please get back to us?


Regards,

Buvana S


Loader.
Up arrow icon