Editor showing data as plain text instead of HTML. It is saving correct formatted test all the way to DB

1 Answer 428 Views
Editor
DoomerDGR8
Top achievements
Rank 2
Iron
Iron
Iron
DoomerDGR8 asked on 24 Oct 2022, 02:25 AM

I'm facing an issue where I can successfully save HTML text to DB using the Editor. Still, upon loading the exact text (with all the formatting tags), the Editor refuses to format it correctly and displays it as plain text:


@* Background *@
<div class="row mt-3">
	<div class="col-12">
		@Html.LabelFor(m => m.BackgroundConcessionaireContract, "Background of Concessionaire/Contract *", new { @class = "col-12 control-label" })
		<kendo-editor   for="BackgroundConcessionaireContract" style="height:350px" aria-label="editor"
				placeholder="Background of Concessionaire/Contract">
			<tools>...</tools>
		</kendo-editor>
	</div>
</div>

<hr class="cm-hr" />

@* Proposal Details *@
<div id="divProposalDetails" class="row mt-3">
	<div class="col-12">
		@Html.LabelFor(m => m.CommercialTermsDetails, "Commercial Terms Details *", new { @class = "col-12 control-label" })
		<kendo-editor   for="CommercialTermsDetails" style="height:350px" aria-label="editor"
				placeholder="Commercial Terms Details">
			<tools>...</tools>
		</kendo-editor>
	</div>
</div>

<hr class="cm-hr" />

@* Financial Analysis *@
<div class="row mt-3">
	<div class="col-12">
		@Html.LabelFor(m => m.FinancialAnalysis, "Financial Analysis *", new { @class = "col-12 control-label" })
		<kendo-editor   for="FinancialAnalysis" style="height: 350px" aria-label="editor"
				placeholder="Financial Analysis">
			<tools>...</tools>
		</kendo-editor>
	</div>
</div>

In the model, the fields are defined simply as:

public string BackgroundConcessionaireContract { get; set; }
public string CommercialTermsDetails { get; set; }
public string FinancialAnalysis { get; set; }

The output is like this:

I also noted that If I don't correct the unformatted plain text and save again, the editor saves even more obscured characters and this keeps happening:

A simple

Test

becomes

<strong>T</strong>est

and then becomes

&amp;lt;strong&amp;gt;T&amp;lt;/strong&amp;gt;est

and this process keeps on repeating

 

1 Answer, 1 is accepted

Sort by
0
Aleksandar
Telerik team
answered on 26 Oct 2022, 10:21 AM

Hi DoomerDGR8,

I see there is a question on the same matter already submitted in this forum post:

Model's binded property holds valid HTML but the editor show it as raw instead of formatted

Note that we monitor all forums and there is no need to submit the same question in multiple threads.

That said, from the latest response I am not entirely sure whether the issue is now resolved or not. The same behavior has already been discussed in this forum post and the reason for the behavior is that the Razor view engine encodes HTML strings automatically. In addition the Encoded() configuration indicates whether the Editor should submit encoded HTML tags. By default, the submitted value is encoded, meaning the Razor view engine will encode the value once again,  resulting in a double encoded value, therefore the observed behavior.

To resolve the issue make sure the value passed to the Editor is not double encoded, as suggested in the forum post, linked above.

Regards,
Aleksandar
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/.

Tags
Editor
Asked by
DoomerDGR8
Top achievements
Rank 2
Iron
Iron
Iron
Answers by
Aleksandar
Telerik team
Share this question
or