Bootstrap 弹出窗口关闭时不显示 Tiny Editor

Question

我使用的是 TinyMCE 编辑器 5.6.1 版。每当我第一次加载弹出窗口时，我都会得到以下信息：

当我关闭 Popup 并再次重新显示它时，我得到以下信息：

控制台中没有错误，加载弹出窗口非常简单：

<div class="modal" tabindex="-1" role="dialog" id="form-modal">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"></h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
            </div>
        </div>
    </div>
</div>

这是调用模态框的代码

@{
    ViewData["Title"] = "Product Administration";
}

<br />

<div class="modal" tabindex="-1" role="dialog" id="form-modal">
    <div class="modal-dialog modal-lg modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"></h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
            </div>
        </div>
    </div>
</div>

<div class="shadow-lg p-1 mb-1 bg-primary rounded d-flex">
    <h5 class="text-white flex-grow-1">Product Administration ...</h5>
    <div>
        <a onclick="showInPopup('@Url.Action("AddEdit","Product",null,Context.Request.Scheme)','New Product')"
            class="btn btn-success text-white">
            <i class="fas fa-random"></i>New Product</a>
    </div>
</div>

模态框的代码如下：

@model ProductEdit

@{
    Layout = null;
}

<script>tinymce.init({
        selector: 'textarea',
        menubar: false,
        plugins: [
            'advlist autolink lists link image charmap print preview anchor',
            'searchreplace visualblocks code fullscreen',
            'insertdatetime media table paste code help wordcount'
        ],
        toolbar: 'undo redo | formatselect | ' +
            'bold italic backcolor | alignleft aligncenter ' +
            'alignright alignjustify | bullist numlist outdent indent | ' +
            'removeformat | help',
        content_css: '//www.tiny.cloud/css/codepen.min.css'
    });</script>

<div class="row">
    <div class="col-lg-12">
        <form asp-action="AddEdit" asp-route-id="@Model.Id" onsubmit="return jQueryAjaxPost(this, RefreshMe, false);" autocomplete="off">
            <input type="hidden" asp-for="@Model.Id" />
            <div id="errValidation" class="alert alert-dismissible alert-danger" data-content="ok">
                <button id="closeValidation" type="button" class="close">&times;</button>
                <div id="errTitle" class="font-weight-bolder">Oh snap!</div>
                <div id="errDetails">An Error Occured!</div>
            </div>

            <div class="row">
                <div class="col-lg-4">
                    <div class="form-group">
                        <label asp-for="@Model.CategoryId" class="control-label"></label>
                        <select asp-for="@Model.CategoryId"
                                class="form-control"
                                asp-items="@(new SelectList(Model.ProductCategories,"Id","Display"))">
                        </select>
                        <span asp-validation-for="@Model.CategoryId" class="text-danger"></span>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="form-group">
                        <label asp-for="@Model.SectionId" class="control-label"></label>
                        <select asp-for="@Model.SectionId"
                                class="form-control"
                                asp-items="@(new SelectList(Model.ProposalSections,"Id","Display"))">
                        </select>
                        <span asp-validation-for="@Model.SectionId" class="text-danger"></span>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="form-group">
                        <label asp-for="@Model.ManufacturerId" class="control-label"></label>
                        <select asp-for="@Model.ManufacturerId"
                                class="form-control"
                                asp-items="@(new SelectList(Model.Manufacturers,"Id","Display"))">
                        </select>
                        <span asp-validation-for="@Model.ManufacturerId" class="text-danger"></span>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-lg-6">
                    <div class="form-group mb-2 has-warning has-feedback">
                        <label asp-for="@Model.InternalPartNumber" class="control-label"></label>
                        <input asp-for="@Model.InternalPartNumber" class="form-control"></>
                        <span asp-validation-for="@Model.InternalPartNumber" class="text-danger"></span>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group mb-2 has-warning has-feedback">
                        <label asp-for="@Model.ManufacturerPartNumber" class="control-label"></label>
                        <input asp-for="@Model.ManufacturerPartNumber" class="form-control"></>
                        <span asp-validation-for="@Model.ManufacturerPartNumber" class="text-danger"></span>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label asp-for="@Model.Description" class="control-label"></label>
                <input asp-for="@Model.Description" class="form-control" rows="2"></>
                <span asp-validation-for="@Model.Description" class="text-danger"></span>
            </div>

            <div class="row">
                <div class="col-lg-6">
                    <div class="form-group">
                        <label asp-for="@Model.SellPrice" class="control-label"></label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <div class="input-group-text">
                                    <i class="fas fa-dollar-sign"></i>
                                </div>
                            </div>
                            <input asp-for="@Model.SellPrice" class="form-control"></>
                        </div>
                        <span asp-validation-for="@Model.SellPrice" class="text-danger"></span>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="form-group">
                        <label asp-for="@Model.Cost" class="control-label"></label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <div class="input-group-text">
                                    <i class="fas fa-dollar-sign"></i>
                                </div>
                            </div>
                            <input asp-for="@Model.Cost" class="form-control"></>
                        </div>
                        <span asp-validation-for="@Model.Cost" class="text-danger"></span>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label asp-for="@Model.ProductWebsite" class="control-label"></label>
                <input asp-for="@Model.ProductWebsite" class="form-control"></>
                <span asp-validation-for="@Model.ProductWebsite" class="text-danger"></span>
            </div>

            <div class="form-group">
                <label asp-for="@Model.Note" class="control-label"></label>
                <textarea asp-for="@Model.Note" class="form-control" rows="5"></textarea>
                <span asp-validation-for="@Model.Note" class="text-danger"></span>
            </div>

            <div class="d-flex">
                <div class="form-group mr-2">
                    <input asp-for="@Model.Active" />
                    <label asp-for="@Model.Active" class="control-label text-success"></label>
                </div>
                <div><button type="submit" value="Save" class="btn btn-success mr-2">Save Changes</button></div>
                <div><input type="reset" class="btn btn-warning"></></div>
            </div>
        </form>
    </div>
</div>

<script>

    $('#errValidation').hide();

    $(function () {
        $("#SectionId").chosen({ no_results_text: "Oops, Section not found!", disable_search_threshold: 4 });
        $("#CategoryId").chosen({ no_results_text: "Oops, Category not found!" });
        $("#ManufacturerId").chosen({ no_results_text: "Oops, Manufacturer not found!" });
    });

    
    $("#closeValidation").click(function () {
        $("#errValidation").hide();
    });
   
    function RefreshMe() {
        $('#products').DataTable().ajax.reload(null, false);
        showSuccessToast('Product Saved', 'top-center');
    }

</script>

showInPopup 方法如下：

showInPopup = (url, title) => {
    $.ajax({
        type: "GET",
        url: url,
        success: function (res) {
            $('#form-modal .modal-body').html(res);
            $('#form-modal .modal-title').html(title);
            $('#form-modal').modal('show');
        }
    })
}

对可能发生的事情有什么想法吗？如果我刷新页面，它只会在第一次加载时再次运行。

谢谢。

--- 值

Answer 1

从第二张图片看，textare不是tinymce渲染的，因为ajax返回的html是tinymce无法渲染的。 TinyMCE 在页面构建时工作。所以更好的方法是使用@Html.Partial加载局部视图（ProductEdit）。

在视图 产品管理 中，更改模态正文。

        <div class="modal-header">
            <h5 class="modal-title">@Context.Request.Scheme</h5>
            <button type="button" class="close" data-dismiss="modal">
                <span>&times;</span>
            </button>
        </div>
        <div class="modal-body">
            @Html.Partial("addedit.cshtml",Model)
        </div>

更改此 javascript 方法。

    var showInPopup = (url, title) => {
        $('#form-modal').modal('show');
    }

并将 tinymce.init({ //... }) 移动到此视图 Product Administration。

那么，TinyMCE 就可以正常工作了。

Bootstrap 弹出窗口关闭时不显示 Tiny Editor

Tiny Editor doesn't show on close of Bootstrap Popup

asp.net-core

tinymce

tinymce-5