RichTextEditor not working for multiple fields in ASP.NET MVC5

Question

I want to create a form like below image in mvc 5

You'll see It has two Rich Edit Text field for English and for Arabic , I followed this Tutorial to add those rich text fields.

but When I put that Its like below image, one of rich text field not working

this is relevant code snippet in view page

    <div class="form-group">
    @Html.LabelFor(model => model.ProductAbstractEn, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.ProductAbstractEn, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.ProductAbstractEn, "", new { @class = "text-danger" })
    </div>
</div>

<div class="form-group">
    @Html.LabelFor(model => model.ProductAbstractAr, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.ProductAbstractAr, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.ProductAbstractAr, "", new { @class = "text-danger" })
    </div>
</div>

This is model class code snippet for those fields

    [UIHint("tinymce_full_compressed"), AllowHtml]
    [Display(Name = "English")]
    public string ProductAbstractEn { get; set; }

    [UIHint("tinymce_full_compressed"), AllowHtml]
    [Display(Name = "Arabic")]
    public string ProductAbstractAr { get; set; }

Could you please mention how can I make these two fields workable

Edited Code tinymce_full_compressed.cshtml

  <script src="@Url.Content("~/Scripts/tinymce/tiny_mce.js")" type="text/javascript"></script>

<script type="text/javascript">
(function(){tinyMCE.init({mode:"exact",elements:"@ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty)",theme:"advanced",height:"500",width:"790",verify_html:false,plugins:"pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave",theme_advanced_buttons1:"save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",theme_advanced_buttons2:"cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",theme_advanced_buttons3:"tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",theme_advanced_buttons4:"insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak,restoredraft,codehighlighting,netadvimage",theme_advanced_toolbar_location:"top",theme_advanced_toolbar_align:"left",theme_advanced_statusbar_location:"bottom",theme_advanced_resizing:false,content_css:"@Url.Content("~/Scripts/tinymce.3.4.5/css/content.css")",convert_urls:false,template_external_list_url:"lists/template_list.js",external_link_list_url:"lists/link_list.js",external_image_list_url:"lists/image_list.js",media_external_list_url:"lists/media_list.js",})})();
</script>

@Html.TextArea(string.Empty, /* Name suffix */
    ViewData.TemplateInfo.FormattedModelValue /* Initial value */
)

Answer 1

I installed the NuGet package from your tutorial and here is what I came up with.

In your templates (tinymce_full_compressed, tinymce_full) you have the string:

<script src="@Url.Content("~/Scripts/tinymce/tiny_mce.js")" type="text/javascript"></script>

That's where your component scripts are located. Because you use this template for 2 properties, you basicaly add 2 script links in your View and that is what causes the problem.

When I use this component, I solve this problem like this:

Delete <script src="@Url.Content("~/Scripts/tinymce/tiny_mce.js")" type="text/javascript"></script> string from your templates.

In your templates change this code.

(function(){ 

    tinyMCE.init({

        // General options
        mode: "exact",
        elements: "@ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty)",
        ... //here more optins, don't touch them
    });

})();

To this code:

$(document).ready(function () { //To make sure that DOM is loaded
    $('#@ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty)').tinymce({ //changed selector for initialization

                mode: "exact",
                // Location of TinyMCE script
                script_url: '@Url.Content("~/Scripts/tinymce/tiny_mce.js")', //this line should fix your problem in script adding
            ... //here more optins, don't touch them
        }); 
})();