This is a migrated thread and some comments may be shown as answers.

br tag replaced to p while setting HTML content

4 Answers 41 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Jaspreet
Top achievements
Rank 1
Iron
Veteran
Jaspreet asked on 22 Sep 2020, 06:23 AM

hi,

We are using kendo editor in read only mode without iframe. 

<kendo-editor [value]="value" [readonly]="true" [disabled]="true" [iframe]="false"></kendo-editor>

Sample HTML

<html><head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=us-ascii\"><meta name=\"Generator\" content=\"Microsoft Exchange Server\"><!-- converted from text --><style><!-- .EmailQuote { margin-left: 1pt; padding-left: 4pt; border-left: #800000 2px solid; } --></style></head><body><div><div>Can you follow up it looks like they are only make family size now</div><div><br></div><div>Thx</div><div><br></div><div><br></div><div><br></div><div id=\"x_composer_signature\"><div dir=\"auto\" style=\"font-size:85%; color:#575757\">Sent from my mobile.</div></div><div><br></div><div><br></div><div>-------- Original message --------</div><div>From: &quot;akshay@gmail.com; </div><div>Date: 2017-04-20 4:05 PM (GMT-04:00) </div><div>To: &quot;jaspreet@gmail.com&quot;</div><div>Subject:  pricing </div><div><br></div></div><font size=\"2\"><span style=\"font-size:10pt;\"><div class=\"PlainText\">Jaspreet<br>I am not sure our pn . <br><br>Why did we ge ?<br>Our large . we can't have this .<br><br>Thanks<br>Akshay<br><br></div></span></font></body></html>

When this HTML gets rendered, editor replaces br tags with p tags (with margins). Is there a way to stop with replacement as this is adding lot of empty space while viewing the HTML in the editor.

 

4 Answers, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 22 Sep 2020, 01:06 PM

Hi Jaspreet,

Thank you for the screenshots.

The default behavior of the ProseMirror library, which the Editor uses under the hood, puts everything that is on a new line in a <p> tag (even when using only the Enter key).

Since v1.1.0 of the Editor, the users can insert a <br> tag with Shift + Enter keyboard combination. Currently using this combination is the only built-in way to achieve the desired functionality, which is the default behavior of the MS Word.

I hope this helps.

Regards,
Martin
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on twitch.tv/CodeItLive, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).

0
Jaspreet
Top achievements
Rank 1
Iron
Veteran
answered on 22 Sep 2020, 03:18 PM

hi Martin, 

Thanks for your reply. But our requirement is specific to readonly mode. We need to render HTML in editor. I guess the option you suggested are more for the editing mode. Is there a way to handle this while providing HTML as input to editor.

Regards,

Jaspreet

0
Martin
Telerik team
answered on 24 Sep 2020, 06:54 AM

Hello Jaspreet,

By design the EditorComponent is a What-You-See-Is-What-You-Get (WYSIWYG) editor - its content is visually consistent. To achieve this consistency some rules have to be applied and the underlying HTML may be modified. One of these rules is to wrap each text block inside a <p> tag - thus the rendered HTML content is different from the one initially provided.

Having said that, we can style the rendered content by injecting custom CSS using native DOM APIs:

For iframe mode, we need to get a reference to the underlying <iframe> and inject the needed custom styles as the StackBlitz demonstrates:

https://stackblitz.com/edit/angular-5vhepp-hjwo4u?file=app/app.component.ts

For non-iframe mode, we need to select the needed elements using CSS and apply the required styles. Again, here is a sample StackBlitz:

https://stackblitz.com/edit/angular-5vhepp-2yvf5d?file=app/app.component.ts

Let me know if I could assist any further.

Regards,
Martin
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Jaspreet
Top achievements
Rank 1
Iron
Veteran
answered on 24 Sep 2020, 08:02 AM
Thanks Martin, we will try this.
Tags
Editor
Asked by
Jaspreet
Top achievements
Rank 1
Iron
Veteran
Answers by
Martin
Telerik team
Jaspreet
Top achievements
Rank 1
Iron
Veteran
Share this question
or