Problem while trying to open tinymce editor for second time in modal popup(partial view).

See more:

jQuery

MVC3

I have a requirement to built ‘Contact Us’ Form using MVC 3 and implement tincymce 4.1.2 as text editor.
The problem i am facing is, for the first when I am opening the modal popup i.e. ‘Contact Us’ Form , the tincemce editor is visible in modalup, but after closing the modal popup and when I am trying to re-open the modal popup for second time tincemce editor is not visible any more in the modal popup. I also tried bellow code snippet then also tinymce editor is not coming.
tinyMCE.execCommand("mceRemoveControl", false, "elm1")
The code i have written is given bellow for reference –

Index.cshtml (Script used to open modal popup)

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



<script type="text/javascript">
    $(function () {
        $('.modal').click(function () {
            $('<div/>').appendTo('body').dialog({
                close: function (event, ui) {
                    dialog.remove();
                },
                modal: true,
                height: 800,
                width: 800,
            }).load(this.href, {});

            return false;
        });
    });
</script>
@Html.ActionLink("show modal", "modal", null, new { @class = "modal" })

ContactUs.cshtml (Partial View inside modal popup)

@model MvcApplication.Models.BlogPost
<script>
            tinymce.init({
                selector: "textarea#elm1",
                theme: "modern",
                 
                plugins: [
                     "advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
                     "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
                     "save table contextmenu directionality emoticons template paste textcolor"
                ],
                content_css: "css/content.css",
                toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l      ink image | print preview media fullpage | forecolor backcolor emoticons",
                style_formats: [
                     { title: 'Bold text', inline: 'b' },
                     { title: 'Red text', inline: 'span', styles: { color: '#ff0000' } },
                     { title: 'Red header', block: 'h1', styles: { color: '#ff0000' } },
                     { title: 'Example 1', inline: 'span', classes: 'example1' },
                     { title: 'Example 2', inline: 'span', classes: 'example2' },
                     { title: 'Table styles' },
                     { title: 'Table row 1', selector: 'tr', classes: 'tablerow1' }
                ]
            });
            
    </script>
  
@using (Html.BeginForm()) {
    
    @Html.ValidationSummary(true)

    <fieldset>
         

        <div class="editor-label">
            @Html.LabelFor(model => model.Title)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Title)
            @Html.ValidationMessageFor(model => model.Title)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.Content)
        </div>
        <div class="editor-field">
            @Html.TextAreaFor(model => model.Content, new { @id = "elm1" })
            @Html.ValidationMessageFor(model => model.Content)
        </div>

        <p>
            <input type="submit" value="Create" />
        </p>


    </fieldset>
}

Hence would be thankful, if any one help me on this issue.


Thanks,
Dipak.