Kendo UI editor removed bracket from inline CSS

[Ferry]

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?

[Ianko]

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

[Ferry]

Thank you for your response. I will do some more tests soon, but so far this seems to work well.