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: "akshay@gmail.com; </div><div>Date: 2017-04-20 4:05 PM (GMT-04:00) </div><div>To: "jaspreet@gmail.com"</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
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).
Rank 1
Iron
Veteran
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
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/.
Rank 1
Iron
Veteran