Get and set html format using tinyMCE in ASP.NET MVC 5

Question

I have a project that is bilingual and I have a story for each language. I want to use TinyMCE to get formatted Html Text and also set those Textareas from the database.

This is my model for blogs:

Model:

    [Required(ErrorMessage = "Please add the news context")]
    [MinLength(10, ErrorMessage = "The length of news context must be 10 characters atleast")]
    [Display(Name = "News Context")]
    [UIHint("tinymce_jguery_full"), AllowHtml]
    public string newsContent { get; set; }

    [Required(ErrorMessage = "شرح خبر نمی تواند خالی باشد")]
    [MinLength(10, ErrorMessage = "حداقل طول شرح خبر 10 حرف است")]
    [Display(Name = "شرح خبر")]
    [UIHint("tinymce_jguery_full"), AllowHtml]
    public string newsContentFa { get; set; }

I can also successfully fetch that blog with a service.Get_Category_List() method as follow code in NewsmanagementControler

Controller:

 public ActionResult Edit(int id)
 {
        using (DbModel db = new DbModel())
        {
            News SelectedNews = new News();
            var news = service.GetNews_ById(id);
            return View(news);
        }
 }

And finally in the View I set tinyMCE from the raw Html fetched from database as following code:

View

<script src='//cdn.tinymce.com/4/tinymce.min.js'></script>
<script type="text/javascript">
    tinymce.init({
        selector: 'textarea',
        mode: "textareas",
        theme: 'modern',
        entity_encoding: 'raw',
        height: 300,
        plugins: [
            'advlist autolink link lists charmap print preview hr anchor pagebreak spellchecker',
            'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime nonbreaking',
            'save table colorpicker contextmenu directionality paste textcolor image'
        ],
        content_css: '../../Content/css/tinyMCE.css',
        toolbar: 'insertfile undo redo | styleselect | fontselect | sizeselect | fontsizeselect bold italic underline | alignleft aligncenter alignright alignjustify | ltr rtl | bullist numlist outdent indent | link | print preview fullpage | forecolor backcolor image',
        fontsize_formats: "8pt 10pt 12pt 14pt 16pt 18pt 20pt 24pt 36pt",
        font_formats: "Arial=arial,helvetica,sans-serif;" +
            "Arial Black=arial black,avant garde;" +
            "B Yekan=BYekan" +
            "Courier New=courier_newregular,courier;" +
            "Impact=impactregular,chicago;" +
            "Tahoma=tahoma,arial,helvetica,sans-serif;" +
            "Times New Roman=times new roman,times;" +
            "Verdana=verdana,geneva;" +
            "Webdings=webdings;" +
            "Wingdings=wingdings,zapf dingbats",
        draggable_modal: true
    });
</script>
@using (Html.BeginForm("Edit", "NewsManagement", FormMethod.Post))
{
        <div class="col-md-12 ltr">
            <br />
            <label for="MainContent">Context of Blog</label>
            @Html.TextAreaFor(m => m.news.newsContent, new { @class = "fullWidth tiny", placeholder = "Main Content" })
            @Html.ValidationMessageFor(m => m.news.newsContent, "", new { @class = "redError" })<br />
            <br />
        </div>
        <div class="col-md-12 rtl">
            <br />
            <label for="MainContentFa">شرح مطلب</label>
            @Html.TextAreaFor(m => m.news.newsContentFa, new { @class = "fullWidth tiny rtl", placeholder = "شرح مطلب" })
            @Html.ValidationMessageFor(m => m.news.newsContentFa, "", new { @class = "redError" })<br />
        </div>
}

I don't have any problem with save raw Html tinyMCE but for showing my stored raw html in database, there is a problem - as seen in this screenshot:

As you can see the raw HTML doesn't render in TinyMCE. I searching everywhere on google and here too, but there isn't any right answer according to my problem.

The text you see on the editor e.g. "p dir_"ltr"> is this exactly what was saved in your database? The editor should strip out the HTML, but the HTML does appear a little wonky? — Ciaran Gallagher
– Ciaran Gallagher, Commented Sep 29, 2019 at 11:33
Yes, it saved to the database using TinyMCE too and HTML doesn't render in TinyMCE while fetching from database. — Reza Paidar
– Reza Paidar, Commented Sep 29, 2019 at 11:56

Muhammad Ali · Accepted Answer · 2019-09-30 22:22:18Z

1

By defaultIn in MVC all html inputs are htmlencoded for security reason so if you want to use html markup as input to you input control then you can htmldecode it in your view before binding it to your html helper like this

    @{
      Model.news.newsContent= HttpUtility.HtmlDecode(Model.news.newsContent);
     }

and then use it with your htmlHelper

      @Html.TextAreaFor(m => m.news.newsContent, new { @class = "fullWidth tiny", placeholder = "Main Content" })

this link may help you How to use @Html.Raw() in @Html.TextAreaFor()

answered Sep 30, 2019 at 22:22

Muhammad Ali

2883 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Michael Fromin · Accepted Answer · 2019-09-30 21:02:10Z

0

If you are seeing HTML tags in the HTML in TinyMCE some part of your application is likely escaping the HTML for "safety". Most modern frameworks do this by default but they all have a way to bypass this safety measure when needed.

If you look at the data you are passing into TinyMCE if you see something like:

&lt;p&gt;I have escaped tags&lt;/p&gt;

...as opposed to...

<p>I have escaped tags</p>

...then something in your app is escaping the HTML and you just need to not escape the HTML to solve this issue when re-loading data into TinyMCE.

answered Sep 30, 2019 at 21:02

Michael Fromin

13.9k2 gold badges25 silver badges35 bronze badges

Collectives™ on Stack Overflow

Get and set html format using tinyMCE in ASP.NET MVC 5

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related