RichTextEditor: Text messed up after font changing

[Keith]

Step 1: Open EJ2 Rich Text Editor demo at: https://ej2.syncfusion.com/vue/demos/#/material/rich-text-editor/tools.html

Step 2: Change to Source Code view.

Step 3: Replace the content with following HTML:

<br><div class="previousMailContent"><div><span style="font-size:NaNpx;font-family:NotoSans,Arial,sans-serif"><span style="font-size:13.3px;font-family:Courier New,Times,serif"><div class="previousMailContent"><div><span style="font-size:13.3px;font-family:Courier New,Times,serif"><div class="previousMailContent"><div><span style="font-size:NaNpx;font-family:NotoSans,Arial,sans-serif"><div class="previousMailContent"><div><span style="font-size:NaNpx;font-family:NotoSans,Arial,sans-serif"><div class="previousMailContent"><div><span style="font-size:NaNpx;font-family:NotoSans,Arial,sans-serif"><div class="previousMailContent"><div><span style="font-size:NaNpx;font-family:NotoSans,Arial,sans-serif"><div class="previousMailContent"><p style="text-indent: 0pt; margin: 0pt;"></p><p style="text-indent: 0pt; margin: 0pt;"><font color="#000000"><span style="font-size: 10pt;"><span style="font-family: &quot;Courier New&quot;, Times, serif;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; GREENWICH, CT 06830 UNITED STATES</span></span></font></p><div><p><font color="#000000"><br></font></p><p><font color="#000000">REGISTERED OWNER: ***, LLC</font></p><p><font color="#000000">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;33 *** PLACE 2ND FLOOR</font></p><p><font color="#000000">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;GR***, CT ***30</font></p><p><font color="#000000">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;UNITED STATES</font></p><p><font color="#000000">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;TEL: +1 *** 2000</font></p><p><font color="#000000">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;FAX: +1 ***2010</font></p><p><font color="#000000">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;TELEX: NOT APPLICABLE</font></p><p><font color="#000000">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;EMAIL: ***@***SHIPPING.COM</font></p><p><font color="#000000">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;WEB: <a target="_blank" rel='nofollow' href="WWW.DIAMONDSSHIPPING.COM" title="WWW.***SHIPPING.COM">WWW.***SHIPPING.COM </a></font></p><p><font color="#000000"><br></font></p><p><font color="#000000"><br></font></p><p><font color="#000000">OWNERS BANKING DETAILS FOR MT PACIFIC JEWEL:</font></p><p><font color="#000000">PLEASE REMIT BY TELEGRAPHIC TRANSFER TO</font></p><p><font color="#000000">BENEFICIARY NAME : *** LLC 33 ***, 2ND FLOOR, GR***, CT ***30 UNITED STATES</font></p><p><font color="#000000">BENEFICIARY BANK : ***PLC</font></p><p><font color="#000000">BENEFICIARY BANK ADDRESS: *** 10036</font></p><p><font color="#000000">BENEFICIARY SWIFT : ***3N</font></p><p><font color="#000000">BENEFICIARY ABA : ***86</font></p><p><font color="#000000">BENEFICIARY ACCOUNT : ***001</font></p><p><font color="#000000"><br></font></p></div><p style="text-indent: 0pt; margin: 0pt;"><font color="#000000"><span style="font-size: 10pt;"><span style="font-family: &quot;Courier New&quot;, Times, serif;">VESSEL&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; : *** JEWEL (</span></span></font><span style="font-size: 10pt;"><span style="font-family: &quot;Courier New&quot;, Times, serif;">Q88 ATTACHED)</span></span></p><span style="font-family: &quot;Courier New&quot;, Times, serif;"></span></div></span></div>
            </div></span></div>
            </div></span></div>
            </div></span></div>
            </div></span></div>
            </div></span></span></div>
            </div>

Step 4: Change to Preview mode:

Step 5: Select the text, from "REGISTERED OWNER" to "BENEFICIARY ACCOUNT : ***001" and change its font. Notice the order of the paragraphs.

Result: Text was messed up and dis-ordered.

See the screen record for details step.

Attachment: Screen_Recording_e6da6c42.zip

[Narayanasamy Panneer Selvam]

Hi Keith, 

 

Good day to you. 

 

We will process HTML5 Standard based (html) content alone for format action in RichTextEditor. 

We have checked the shared HTML content, we noticed that is not formed as per HTML5 standard. 

·         The block-level element of DIV used inside the inline SPAN element. 

·         Have more HTML 5 validation issue in HTML5 Standard format. 

Paste your shared HTML content in the below-shared validator link and check 

https://validator.w3.org/nu/#textarea 

We suggest you, modify your code as per HTML5 standard and then try with our RTE. For reference check the below documentation section 

https://www.w3.org/TR/html401/struct/global.html#h-7.5.3 

 

After you have done the changes if you face any issue, kindly get back to with further details us. 

 

Regards, 

Narayanasamy P.