XPM not correctly rendering rich text fields in DXA website

Question

I have the following problem with my XPM website. I created a new module with some custom page and entity views.

In these views, i'm using the OOB DXA code to render xpm tags, to make my content editable :

<div @Markup.Property(Model, "IntroText")>@Model.IntroText</div>

All is working well, the content is editable, but sometimes (this doesn't happen always), when I edit the IntroText (which is a rich text field in my Tridion component) and save it, the html of the field is encoded, so the html tags are also outputted on my page

so, instead of seeing

this is my intro text
and this is the second line of text

we see something like this

<p>this is my intro text</p><p>and this is the second line of text</p>

the weird thing is that this doesn't happen all of the time.

Does anyone know if this could be a problem with my configuration, or is these a known fix for this kind of issue ?

Answer 1

I think i found the answer. The problem is not related to XPM, but is linked to how mvc outputs html content.

The function @Model.IntroText automatically html-encodes the string property.

The correct way to output this is using the @Html.Raw() function, which keeps the output intact

so this code

<div @Markup.Property(Model, "IntroText")>@Model.IntroText</div>

should be changed to

<div @Markup.Property(Model, "IntroText")>@Html.Raw(Model.IntroText)</div>