Saving as HTML, viewing as HTML

[Trevor]

I am using MVC4 and wanted to wire up the Kendo editor so that I could have a user administer information that is stored in the database and presented to users on the "external" page.  Very CMS like, but in a very limited scenario.

However, when I wired up the text area as a Kendo editor, make changes, save, and then pull up the editor again, it displays the HTML to the user.  I expected it would strip out the HTML and display it as normal text to the user.  

I expected it would be more like my wordpress sites (which I think use TinyMCE) where there would be a "visual" display and an "HTML" display.  I'd like the data to be stored as HTML when the user saves, but presented "visual" if the user returns to edit the information again. 

Would appreciate any help on getting this to work.  Thanks.


My code:


   <div class="editor-label top">
            @Html.LabelFor(model => model.Comments)
        </div>
        <div class="editor-field">
            @Html.TextAreaFor(model => model.Comments)
            @Html.ValidationMessageFor(model => model.Comments)
        </div>

    <script src="/kendo/js/kendo.all.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            // create Editor from textarea HTML element with default set of tools
            $("#Comments").kendoEditor();
        });
    </script>

[Dimo]

Hello Trevor,

I am not sure I understand you correctly, but it seems to me that the Editor content is encoded one time extra, so instead of rich content, the widget displays HTML tags to the user. Please verify. For example, the following HTML markup will cause the problem you are describing.

<textarea id="editor" cols="80" rows="10" style="width:400px">
&amp;lt;p&amp;gt;double encoded HTML content&amp;lt;/p&amp;gt;
</textarea>

"Raw" HTML editing is not supported out-of-the-box, but you can use a custom tool for this, as shown in the Custom Tools demo.

http://demos.kendoui.com/web/editor/custom-tools.html

(the last but one button is "View HTML", which also allows editing)

Kind regards,
Dimo
the Telerik team

[Trevor]

Dimo,

  Yes,  I believe you have it correct.  I do not want my user to see or edit any HTML tags.  I only want them to see the Rich Text.

  However, when the text is edited/entered through the kendo editor and saved to the database, it saves it as HTML (as expected).  When I pull that record back however, it displays the HTML tags to the user in the Kendo editor.  

   I would have expected the Kendo editor to display Rich Text only to the user.  What am I doing wrong?

[Dimo]

Hello Trevor,

Please check how many times the content inside the <textarea> is encoded in the web page HTML source. Here are three examples:

(no encoding - incorrect)

<textarea>
    <p>This is a paragraph with a > special character inside.</p>
</textarea>

(single encoding - correct)

<textarea>
    &lt;p&gt;This is a paragraph with a &amp;gt; special character inside.&lt;/p&gt;
</textarea>

(double encoding - incorrect)

<textarea>
    &amp;lt;p&amp;gt;This is a paragraph with a &amp;amp;gt; special character inside.&amp;lt;/p&amp;gt;
</textarea>

Regards,
Dimo
the Telerik team

[Trevor]

This is how the HTML source looks after I save a record to the database and it is redisplayed in the Kendo Editor


<div class="editor-field">

     <input class="text-box single-line" id="Comments" name="Comments" type="text" value="&lt;p&gt;Primary hub is Wilmington, Ohio. Secondary is March reserve AFB in Riverside, CA. All aircraft have a minimum of 3 jumpseats (4-5 jumpseats depending on the version of 767). Jumpseats are reserved on a first come - first served basis, after ABX crews. &lt;/p&gt;&lt;p&gt;To reserve a jumpseat, call XXXXX ask for the jumpseat reservations desk. .... flight, please cancel the jumpseat reservation asap.&lt;/p&gt;" />

     <span class="field-validation-valid" data-valmsg-for="Comments" data-valmsg-replace="true"></span>

 </div>

[Dimo]

Hi Trevor,

Everything seems OK on my side:

http://jsfiddle.net/dimodi/KuQvs/

Feel free to modify the example until the unexpected behavior is reproduced.

By the way, the Kendo Editor is more commonly used with a <textarea>, not an <input>. <input> elements do not allow line breaks and by default do not have proper width and height that the Editor could assume.

Regards,
Dimo
the Telerik team

[Sekhar]

Hi Dimo,
    I'm also facing the same issue ..

Just a back ground .. I'm using MVC 3.0 and have Editor Control

In the View

@(Html.Kendo().EditorFor(

 

Function(model) model.ECFDetailedInfoModels.Solution).HtmlAttributes(New With {.style = "width: 1000px;height:30px;"}))

 

 

I enter the text in the editor and make is underline and bold  "Edit After Solutions - Just checking " and click save

In the database it's get saved as

&lt;span style="color:#000000;text-decoration:underline;"&gt;&lt;em&gt;&lt;strong&gt;Edit After Solutions - Just checking &lt;/strong&gt;&lt;/em&gt;&lt;/span&gt;


When i run the page again .. Below text is display in the editor

<span style="color:#000000;text-decoration:underline;"><em><strong>Edit After Solutions - Just checking </strong></em></span>


Below is how  Solution is defined ...

Public

 

 

Class ECFDetailedInfoModel

 

<

 

Display(ResourceType:=GetType(LocalizedText), Name:=ECFLabelNames.lblSolution)>
Public Property Solution() As String
.....

 

End

 

 

Class

Let me know what is that i'm missing ...

 

[Bob]

I wrestled with exactly this problem - for longer than i care to admit. The documentation and samples are lacking and MVC HTML encoding/decoding along with KendoUI behavior is a tough combination to figure out.

I have simple "News" class - stored in SQL with EF.

[

Table("NewsReleases")]
public class NewsModel
{
    [Key]
    [DatabaseGeneratedAttribute(DatabaseGeneratedOption.Identity)]
    public int NewsId { get; set; } 
        
         [System.ComponentModel.DataAnnotations.Required]
    public string NewsText { get; set; }
}

My intent is that NewsText is a string of formatted HTML to display. Needless to say all I saw was encoded HTML, like <strong> or &lt;strong&gt; displayed.

Here is how I fixed. In the controller method that accepted the posted data, I added a step to decode the HTML before I persisted it in the database:

[HttpPost]
public ActionResult Edit(NewsModel newsmodel)
{
    if (ModelState.IsValid)
    {
        string tempHtml = HttpUtility.HtmlDecode(newsmodel.NewsText);
        newsmodel.NewsText = tempHtml;
        db.Entry(newsmodel).State = EntityState.Modified;
        db.SaveChanges();
        return RedirectToAction("Index");
    }
    return View(newsmodel);
}

Now I could edit and save and re-edit the formatted NewsText!

But, displaying in a listing or report resulting in the HTML encoding again, so any listing or display views needed additional code to by-pass normal MVC encoding, as in this snippet:

@foreach (var item in Model)
{
  <tr>
    <td>
        @*@Html.Raw(item.NewsText)*@
        @MvcHtmlString.Create(item.NewsText)
    </td>
    <td>
        @Html.ActionLink("Edit", "Edit", new { id = item.NewsId }) |
        @Html.ActionLink("Details", "Details", new { id = item.NewsId }) |
        @Html.ActionLink("Delete", "Delete", new { id = item.NewsId })
    </td>
  </tr>
}

Either Html.Raw or MvcHtmlString.Create works. I checked to see if my site was vulnerable to hacking. If I put a script block into the edited text as in <script>alert('Ha, I just hacked you!')</script> it was caught and always encoded while the "safe" formatting HTML was handled as expected. But I'm no security expert, you should verify for yourself.

I hope this helps someone else just getting started with all the Kendo UI controls. 

[Mu]

Thank you, Rob.

[Trevor]

My thanks as well Rob.

  string tempHtml = HttpUtility.HtmlDecode(newsmodel.NewsText);
        newsmodel.NewsText = tempHtml;


That's exactly what i needed prior to db insert.

I had JUST read through my MVC book on MvcHtmlString when I saw your post.  So I use that on a view only page without the Kendo Editor, but with the Kendo editor we display as normal as long as you post it into the DB with HtmlDecode

Hope this thread helps many others!

[leniency]

Also note that at least with 2012.3.1114, not sure about prior versions, there is an option to disable the editor encoding.

@(Html.Kendo()

    .EditorFor(m => m)

    .Encode(false)

    ...)

Or, if using just Javascript:

$("#editor").kendoEditor({

    encoded: false

});

Submitting encoded values broke an auto-sanitizing modelbinder I have, and simply turning it off allowed it to work again, plus kept my input models cleaner (no fussing with encoding in the model or view).  Encoding the value on submission, as indicated by others' issues, seems to create violation of the rule of least surprise.

[Scott]

Much thanks to Rob!  It's frustrating when you spend all day for something simple like this.  More examples and sample apps Telerik, please!!  

[Eston]

Gotta say thanks to Trevor for bringing this up and Rob for providing a solution. I was doing some terrible work arounds in code to make this work and glad to see a simple solution. Wish Kendo MVC had good documentation like Web forms and Silverlight. Shocked to not even see helper documentation for Kendo Editor under MVC area. No mention of how to use Kendo.EditFor anywhere on site. 

[Alex]

I am passing this to the editor:    <strong>Test2</strong>
But all I get is this:      Test2
The editor is stripping out the html for some reason.
How can I get the editor to show rich text?

[Dimo]

Hello Alex,

The following demo includes a <strong> tag, which is displayed as expected.

http://demos.kendoui.com/web/editor/index.html

What is your Editor configuration and how do you pass the value?

Greetings,
Dimo
the Telerik team

[Alex]

01.View:
02.@{
03.    string msg = ViewBag.Message;
04.    string name = ViewBag.EditorName;
05.}
06.
07.@(Html.Kendo().Editor()
08.            .Name(name)
09.            .Value(msg)
10.                .HtmlAttributes(new
11.                    {
12.                        style = "width: 500px; height:50px",
13.                    })
14.)
15.
16.Controller:
17.[HttpPost]
18.        public ActionResult GetEditView(SystemMessageViewModel viewModel)
19.        {
20.            ViewBag.EditorName = "Message";
21.            var model = _tasks.GetSystemMessage(viewModel.SystemMessageId);
22.            ViewBag.Message = model.Message;
23.            return PartialView("Edit", model);
24.        }

[Alex]

One thing I forgot to mention is that the editor is in a modal.

[Praveen]

Hi Bob and Trevor,

Am editing/Updating the text using kendo ui editor. Actually am using three editor's for sending the data in english, arabic and urdu languages.And after submitting normal text with respect to language. It is storing the data in database as html format only. But i want to update the data. For this am retrieving the text to the editor in html format only for arabic and urdu not in normal arabic language. And i have applied the same thing(  string decodedDescEn = HttpUtility.HtmlDecode(getcont.DescriptionEn);) at controller while retrieving for all the 3 editors. It is showing normal text for english by using htmlDecode method but not for arab and urdu.

Storing the data in database from RTL-Editor using mvc c# for the text -  "  أهلا بك " it is 'welcome' word in arabic, as :

 " &amp;amp;lt;pre class="tw-data-text vk_txt tw-ta tw-text-large" data-fulltext="" data-placeholder="Translation" dir="rtl" id="tw-target-text" style="unicode-bidi:-webkit-isolate;font-family:inherit;border:none;padding:0px 0.14em 0px 0px;position:relative;margin-top:0px;resize:none;overflow:hidden;text-align:right;width:237.5px;white-space:pre-wrap;word-wrap:break-word;color:#212121;height:72px;font-weight:lighter !important;font-size:48px !important;margin-bottom:-10px !important;line-height:72px !important;background-color:#ffffff;"&amp;amp;gt;&amp;amp;lt;span lang="ar"&amp;amp;gt;سلاماتي&amp;amp;lt;/span&amp;amp;gt;&amp;amp;lt;/pre&amp;amp;gt;  "

After retrieving to the editor it is showing the same format as above.

 --------------------------------------------------------------------------------------------------------------------------------

And am using basic editor for english language.For this am submitting the value "Welcome" with bold , italic effect and it is storing in db as

" &lt;em&gt;&lt;strong&gt;Welcome&lt;/strong&gt;&lt;/em&gt;  "  . 

And while retrieving to the editor after applying the HtmlDecode method it is showing normal text. but how to solve this issue for arabic and urdu am not understanding.

----------------------------------------------------------------------------------------------------------

And in this am using RTL-Editors for arabic and urdu languages.

can anyone has the solution for this ?

[Jeshna]

Hi Trevor,

Can you please help me with the code to save editor html data to database?

[Dimo]

Hello Sekhar,

When using the MVC wrapper of the Kendo UI Editor with the Razor view engine, you should provide a non-encoded content from the server, as our demos show. Razor encodes HTML content by default, so you end up with double encoding.

Greetings,
Dimo
the Telerik team

[Sekhar]

Hi Dimo,
   Thanks for the reply .. If i don't encode and save the data ..  Wouldn't it lose all the format for that text.. I want the format of the text to stay ...

[Trevor]

So, you're saying that Razor is encoding the HTML content, and then Kendo is encoding it as well.

And the fix here is to get Razor to provide non-encoded content from the webserver.  Even though the reason we want to USE the Kendo Editor here is to encode content.

I'll have to play with this some more I guess and try to get Razor not to encode it.

[Dimo]

Hello Sekhar,

No, you would not lose formatting. The Editor submits a HTML string to the server. It will remain such no matter whether you decode it or not.

Greetings,
Dimo
the Telerik team

[Sekhar]

Dimo,
   Thanks .. I HtmlDecode the data before storing and now it works ..

[Mu]

I would be really applicable if you can provide the example of Editor that save and display the data from database. All of the example that you have so far are not.

Please, please.

[Dimo]

Hello Alex,

The Razor view engine encodes HTML strings automatically. Please make sure that the value that is passed to the Editor is not encoded, as this will result in double encoding. You can compare your implementation, value and Editor behavior with the ones in the Kendo UI MVC offline demos.

@(Html.Kendo().Editor()
      .Name("editor")
      .HtmlAttributes(new { style = "width: 740px;height:440px" })
      .Value(@<text>
            <p>
               <img src="http://www.kendoui.com/Image/kendo-logo.png" alt="Editor for ASP.NET MVC logo" style="display:block;margin-left:auto;margin-right:auto;" />
            </p>
            <p>
                Kendo UI Editor allows your users to edit HTML in a familiar, user-friendly way.<br />
                In this version, the Editor provides the core HTML editing engine, which includes basic text formatting, hyperlinks, lists,
                and image handling. The widget <strong>outputs identical HTML</strong> across all major browsers, follows
                accessibility standards and provides API for content manipulation.
            </p>
            <p>Features include:</p>
            <ul>
                <li>Text formatting & alignment</li>
                <li>Bulleted and numbered lists</li>
                <li>Hyperlink and image dialogs</li>
                <li>Cross-browser support</li>
                <li>Identical HTML output across browsers</li>
                <li>Gracefully degrades to a <code>textarea</code> when JavaScript is turned off</li>
            </ul>
            <p>
                Read <a href="http://www.kendoui.com/documentation/introduction.aspx">more details</a> or send us your
                <a href="http://www.kendoui.com/forums.aspx">feedback</a>!
            </p>
      </text>)
.ImageBrowser(imageBrowser => imageBrowser
    .Image("~/Content/UserFiles/Images/{0}")
    .Read("Read", "ImageBrowser")
    .Create("Create", "ImageBrowser")
    .Destroy("Destroy", "ImageBrowser")
    .Upload("Upload", "ImageBrowser")
    .Thumbnail("Thumbnail", "ImageBrowser"))
)

Greetings,
Dimo
the Telerik team