Kendo UI editor removed bracket from inline CSS

1 Answer 28 Views
Editor
Ferry
Top achievements
Rank 1
Ferry asked on 17 May 2022, 02:56 PM

First a little background information: In our system, we can configure a lot of things. Some of those things are HTML templates with variables that will be replaced by values from the database in our back-end. These variables are marked with brackets, such as `{title}`. If our database contains a field "title", the back-end will replace "{title}" with the actual value from the database in the HTML template.

In some cases, we want to add an inline css style on a HTML element with such a variable. However, Kendo Editor breaks this by removing the closing bracket. It only does this for inline styles, not for other attributes.

I can reproduce this problem on this demo page, by using the "View HTML" tool and pasting this source HTML there:

<div class="optionColor" style="background-color:{hexcolor};">Test</div>

If you click "Update" and then re-open the "View HTML" tool, the HTML will be this:

<div class="optionColor" style="background-color:{hexcolor;">Test</div>

I expect the HTML to stay the same here.

I have tried setting paste cleanup to "none", but that does not fix the problem (I thought that this might maybe be caused by some paste cleanup setting).

Is this a bug? Is there any way to fix this?

1 Answer, 1 is accepted

Sort by
1
Accepted
Ianko
Telerik team
answered on 20 May 2022, 09:07 AM

Hi,

Indeed, there is a css parsers that matches the values of the style attributes without the ending } character. This is why it is getting stripped out of the HTML. I am not fully confident why the parser considers the } as not part of the CSS value, but it could be related to the Kendo templating mechanism. 

However, having such characters in the CSS value could be potentially harmful to the HTML and at some point, even the browser could eventually modify it. 

A potential solution is to use custom serialization and deserialization to properly cache and retrieve the templating syntax you have come up with. Here you are an example of replacing the {,} chars with other ones that are preserved within the Editor serialization: https://dojo.telerik.com/@iankodj/UhUCAtas.  Note that you can modify it based on your requirements. 

Regards,
Ianko
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Ferry
Top achievements
Rank 1
commented on 23 May 2022, 09:57 AM

Thank you for your response. I will do some more tests soon, but so far this seems to work well.
Tags
Editor
Asked by
Ferry
Top achievements
Rank 1
Answers by
Ianko
Telerik team
Share this question
or