TinyMCE не рендерится в соответствующем элементе / разделе страницы при вызове Ajax для заполнения

Question

Я использую TinyMCE в качестве редактора HTML в проекте MVC. При загрузке страницы все выглядит нормально (страница может загружать несколько экземпляров TinyMCE), однако, если я добавлю еще один экземпляр TinyMCE в DOM через Ajax, TextArea будет размещена прямо под последним TinyMCE, который был добавлен на страницу при загрузке. .

TinyMCE работает до и после загрузки страницы:

Должны быть указаны детали размещения:

Проблема в том, что «Пробел» должен находиться в совершенно другом разделе страницы, вместо этого он, кажется, «добавляется» после последнего TinyMCE.

TinyMCE находится в пределах ~/Shared/EditorTemplates/EditHtml.cshtml:

@* TinyMCE 4.7.9 (2018-02-27) *@
<script src="@Url.Content("~/Scripts/tinymce/tinymce.js")" type="text/javascript"></script>

Selector: @ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty)<br />
Name: @ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty)<br />

@Html.TextArea(string.Empty,
    (string)ViewData.TemplateInfo.FormattedModelValue
)

<script type="text/javascript">

    $(document).ready(function () {
        initTinyMCE(
            '#@ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty)',
            '@ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty)'
        );
    });

</script>

Функция JS в другом файле (я тестировал с selector и elements):

function initTinyMCE(selector, name) {

    console.log('selector: ' + selector);
    console.log('name: ' + name);

    tinyMCE.init({

        //editor_selector: selector,
        selector: selector,
        mode: "exact",
        elements: name,
        //elements: "@ViewData.TemplateInfo.GetFullHtmlFieldName(string.Empty)",

        //inline: true, //must be on a Div (but onclick of div, editor doesn't show when content came from Ajax).

        branding: false,
        height: 250,
        menubar: false,
        plugins: [
            'advlist autolink lists link image charmap print preview anchor',
            'searchreplace visualblocks code fullscreen',
            'insertdatetime media table contextmenu paste code',
            'code'
        ],

        relative_urls: false,
        remove_script_host: true,
        convert_urls: true,

        toolbar: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | code',
        content_css: "/Content/bootstrap.css",

        entity_encoding: 'raw',

        init_instance_callback: function (editor) {
            editor.on('blur', function (e) {
                tinyMCE.triggerSave();
            });
        }        

    });

}

Родительский вид (Slider Edit), который вызывает foreach Banner:

@model x.Entities.Content.Sliders.Slider

@{
    ViewBag.Title = "Edit";
}

<h2>Edit</h2>

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    @* Omitting other fields *@

    <div class="form-group">
        @Html.Label("Banners", htmlAttributes: new { @class = "control-label col-md-2" })

        <div id="Banners_@Model.Oid" class="sortable col-md-10">
            @foreach (var banner in Model.Banners.OrderByDescending(b => b.Order.HasValue).ThenBy(b => b.Order).ThenBy(b => b.Name))
            {
                @Html.Partial("~/Views/Banners/_Edit.cshtml", banner)
            }
        </div>

        @Html.ValidationMessageFor(model => model.Banners, "", new { @class = "text-danger" })

        <div class="form-group">
            <div class="col-md-12" style="float: right;">
                <br />
                @Ajax.ActionLink(
                    "Add Banner",
                    "Newbanner",
                    "Banners",
                    new { id = Model.Oid },
                    new AjaxOptions
                    {
                        HttpMethod = "GET",
                        InsertionMode = InsertionMode.InsertAfter,
                        UpdateTargetId = "Banners_" + @Model.Oid,
                    },
                    new { style = "btn btn-info" }
                )
            </div>
        </div>
    </div>

}

BannerController для Newbanner:

public PartialViewResult NewBanner(Guid id)
{
    Banner newBanner = new Banner() { SliderID = id, Name = "New Banner", Content = "Blank" };
    return PartialView("_Edit", newBanner);
}

Каждый баннер (~ / Views / Banners / _Edit.cshtml):

@model x.Entities.Content.Sliders.Banner

@using (Html.BeginCollectionItem("Banners"))
{

    @* OMitting other fields *@

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

Баннер-класс с UIHint:

public class Banner : BaseObject
{
    //Omitting ther fields

    [UIHint("EditHtml")]
    [Column(TypeName = "varchar(MAX)")]
    [DataType(DataType.MultilineText)]
    [AllowHtml]
    public string Content { get; set; }

}

Пожалуйста, дайте мне знать, если я должен добавить дополнительную информацию.