CODEWITHSUNDEEP
c#asp.net-mvc-5tinymce-4
Reza Paidar
Reza Paidar

Reputation: 883

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

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:

enter image description here

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.

Upvotes: 0

Views: 2083

Answers (2)

Muhammad Ali
Muhammad Ali

Reputation: 288

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()

Upvotes: 1

Michael Fromin
Michael Fromin

Reputation: 13744

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.

Upvotes: 0

Related Questions