Saving as HTML, viewing as HTML

25 posts, 1 answers
  1. Trevor
    Trevor avatar
    9 posts
    Member since:
    Sep 2012

    Posted 14 Sep 2012 Link to this post

    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>
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 17 Sep 2012 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Trevor
    Trevor avatar
    9 posts
    Member since:
    Sep 2012

    Posted 17 Sep 2012 Link to this post

    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?

  5. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 18 Sep 2012 Link to this post

    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!
  6. Trevor
    Trevor avatar
    9 posts
    Member since:
    Sep 2012

    Posted 19 Sep 2012 Link to this post

    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>
  7. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 20 Sep 2012 Link to this post

    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!
  8. Sekhar
    Sekhar avatar
    11 posts
    Member since:
    Dec 2006

    Posted 21 Sep 2012 Link to this post

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

     


  9. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 21 Sep 2012 Link to this post

    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!
  10. Sekhar
    Sekhar avatar
    11 posts
    Member since:
    Dec 2006

    Posted 21 Sep 2012 Link to this post

    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 ...
  11. Trevor
    Trevor avatar
    9 posts
    Member since:
    Sep 2012

    Posted 21 Sep 2012 Link to this post

    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.
  12. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 21 Sep 2012 Link to this post

    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!
  13. Sekhar
    Sekhar avatar
    11 posts
    Member since:
    Dec 2006

    Posted 21 Sep 2012 Link to this post

    Dimo,
       Thanks .. I HtmlDecode the data before storing and now it works ..
  14. Mu
    Mu avatar
    2 posts
    Member since:
    Oct 2012

    Posted 05 Oct 2012 Link to this post

    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.
  15. Answer
    Bob
    Bob avatar
    8 posts
    Member since:
    May 2008

    Posted 10 Oct 2012 Link to this post

    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. 

  16. Mu
    Mu avatar
    2 posts
    Member since:
    Oct 2012

    Posted 11 Oct 2012 Link to this post

    Thank you, Rob.
  17. Trevor
    Trevor avatar
    9 posts
    Member since:
    Sep 2012

    Posted 15 Oct 2012 Link to this post

    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!
  18. leniency
    leniency avatar
    10 posts
    Member since:
    Jan 2012

    Posted 23 Nov 2012 Link to this post

    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.
  19. Scott
    Scott avatar
    43 posts
    Member since:
    Nov 2007

    Posted 29 Nov 2012 Link to this post

    Much thanks to Rob!  It's frustrating when you spend all day for something simple like this.  More examples and sample apps Telerik, please!!  
  20. Eston
    Eston avatar
    4 posts
    Member since:
    Jul 2010

    Posted 25 Dec 2012 Link to this post

    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. 
  21. Alex
    Alex avatar
    7 posts
    Member since:
    Apr 2012

    Posted 14 Mar 2013 Link to this post

    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?
  22. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 15 Mar 2013 Link to this post

    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!
  23. Alex
    Alex avatar
    7 posts
    Member since:
    Apr 2012

    Posted 15 Mar 2013 Link to this post

    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.        }
  24. Alex
    Alex avatar
    7 posts
    Member since:
    Apr 2012

    Posted 18 Mar 2013 Link to this post

    One thing I forgot to mention is that the editor is in a modal.
  25. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 19 Mar 2013 Link to this post

    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!
  26. Praveen
    Praveen avatar
    1 posts
    Member since:
    Oct 2015

    Posted 25 Nov 2015 Link to this post

    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 ?

Back to Top
Kendo UI is VS 2017 Ready