Saving as HTML, viewing as HTML

3 Answers 8508 Views
Editor
Trevor
Top achievements
Rank 2
Trevor asked on 14 Sep 2012, 09:23 PM
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
Telerik team
commented on 17 Sep 2012, 07:59 AM

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Trevor
Top achievements
Rank 2
commented on 17 Sep 2012, 04:53 PM

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
Telerik team
commented on 18 Sep 2012, 07:51 AM

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Trevor
Top achievements
Rank 2
commented on 19 Sep 2012, 01:43 PM

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
Telerik team
commented on 20 Sep 2012, 06:01 AM

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Sekhar
Top achievements
Rank 1
commented on 21 Sep 2012, 02:12 PM

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 ...

 


3 Answers, 1 is accepted

Sort by
1
Accepted
Bob
Top achievements
Rank 1
answered on 10 Oct 2012, 08:29 PM
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
Top achievements
Rank 1
commented on 11 Oct 2012, 12:42 PM

Thank you, Rob.
Trevor
Top achievements
Rank 2
commented on 15 Oct 2012, 03:57 PM

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
Top achievements
Rank 1
commented on 23 Nov 2012, 11:06 PM

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
Top achievements
Rank 1
commented on 29 Nov 2012, 10:42 PM

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
Top achievements
Rank 1
commented on 25 Dec 2012, 01:17 PM

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
Top achievements
Rank 1
commented on 14 Mar 2013, 11:15 PM

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
Telerik team
commented on 15 Mar 2013, 07:49 AM

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Alex
Top achievements
Rank 1
commented on 15 Mar 2013, 02:02 PM

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
Top achievements
Rank 1
commented on 18 Mar 2013, 02:46 PM

One thing I forgot to mention is that the editor is in a modal.
Praveen
Top achievements
Rank 1
commented on 25 Nov 2015, 07:02 AM

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
Top achievements
Rank 1
commented on 27 Jul 2017, 09:43 AM

Hi Trevor,

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

0
Dimo
Telerik team
answered on 21 Sep 2012, 02:21 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Sekhar
Top achievements
Rank 1
commented on 21 Sep 2012, 02:45 PM

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
Top achievements
Rank 2
commented on 21 Sep 2012, 03:07 PM

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
Telerik team
commented on 21 Sep 2012, 03:07 PM

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Sekhar
Top achievements
Rank 1
commented on 21 Sep 2012, 03:49 PM

Dimo,
   Thanks .. I HtmlDecode the data before storing and now it works ..
Mu
Top achievements
Rank 1
commented on 05 Oct 2012, 01:22 PM

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.
0
Dimo
Telerik team
answered on 19 Mar 2013, 04:30 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Editor
Asked by
Trevor
Top achievements
Rank 2
Answers by
Bob
Top achievements
Rank 1
Dimo
Telerik team
Share this question
or