Stripping br in editor

[Alan]

I have set up editor to use br instead of p for new line.

The problem I encounter is <br class="k-br"> tag is added in some situation whene ver the user select and apply the font as well.

 

Because of adding it automatically by the editor, when I get the editor value using value method, the line break is missing.

 

So, how can I set up not to add automatically line break with k-br class? Or how can I set up not to strip off br tag?

 

Thanks in advanced.

Kai

[Marin Bratanov]

Hello Kai,

Can you show me how to reproduce this behavior in our demos, for example use "Shift + Enter" to enter line breaks in the following demo: https://demos.telerik.com/kendo-ui/editor/all-tools or in this dojo I made for you: https://dojo.telerik.com/@bratanov/ItujuYor?

In the meantime, here are a couple of ideas you can look into:

• see what the $($("#editor").data("kendoEditor").body).html() call returns - the idea is to try to get the actual HTML from the iframe rather than go through the API of the editor, instead of using the editpr's value() method
• see what you get if you use custom serialization to see the raw html before it is worked on by the editor

 

Regards,
Marin Bratanov
Progress Telerik

[Alan]

Hi Marin,

 

I prepared the snippet in dojo and upload the video. 

Here is the video https://1drv.ms/v/s!Av0hvIy5FOyev1p2sIU10c-TskEm

 

I notice dojo link is generated newone. So, here is new dojo. https://dojo.telerik.com/IyAbiquX/2

Steps to reproduce

- Select all and choose the font style

- place the cursor in front of Name(Ms/Mr)

- use Backspace and delete above blank line including e character

- use Enter key. You will see one blank line is automatically added and <br class="k-br"> as well. But when you get the content, that br is missing.

 

Moreover, according to Dimo's reply from this thread that <br class="k-br"> will be automatically removed by kendo ui. https://www.telerik.com/forums/editor-removes-content-from-paragraph

 

In my case, I do not want the kendo ui editor to remove that br and I need to use value method because according to kendo documentation, the value method will protect from xss more the less. Here is the documentation. https://docs.telerik.com/kendo-ui/controls/editors/editor/preventing-xss

 

Please do let me know how can I set up not to add <br class="k-br"> automatically from editor.

 

Regards and Thanks,

Khaing Su Hlaing

 

 

 

 

 

 

[Marin Bratanov]

Hello,

To begin with the XSS concerts, as security is usually a pain point. The editor does not prevent XSS attacks, this is something the developer must do when processing the submitted data on the server. The example that talks about the .value() method of the Kendo Editor actually explains how you can extract scripts from its content and run them, and not how to protect against running or storing them. You can see the difference on handling scripts in the following dojo I made for you: https://dojo.telerik.com/@bratanov/oJUKIqoq.

On the editor removing <br /> tags - it does that only when it had added them because it found an empty container. This means that if all containers have content, the editor shouldn't have to add those <br class='k-br' /> tags - it does that only to allow the user to enter content everywhere, and since they are placeholders that alter the content, it must remove them. The <br class='k-br' /> that is present in the video is the second <br/> tag which indicates that the correct content was entered - a new line that remains in the content exists. The Kendo break that is inserted is added after the line break because the new line is an empty container and without this element the user would be unable to focus it and type in it. Similar issues are one of the reasons why Enter defaults to inserting a paragraph - in rich text editing the line break is a problematic element that often causes more problems than it solves. Besides, most commands (like lists, intendation) work with block elements like paragraphs.

With that said, if you want to keep using br tags and to keep the erroneous second br, the only solution I can offer is to use jQuery to get the HTML string: https://dojo.telerik.com/@bratanov/ULOguhEH. You will see I also added some regex to remove the kendo class flavor and to fix the HTML that the browser returns so it has a closing / symbol.

Regards,

Marin Bratanov
Progress Telerik