javascript - TinyMCE 编辑器仅显示在第一个元素上

Question

这是我的选择器(我使用的是tinyMCE 4.2.8)

    $(document).ready(function () {
        tinymce.init({
            selector: "textarea",
        });
    });

我想将折叠内的每页 1-10 个文本区域转换为 TinyMCE 编辑器

出于某种原因，只有第一个被转换，其他只是普通的文本区域。

我使用 MVC 将折叠渲染为布局设置为 null 的 View

可能出了什么问题？

HTML 代码

<div class="table-responsive">
        <table class="table table-bordered table-striped">
            <tr>
                <th>Huvudkategori</th>
                <th>ID</th>
                <th>Antal subkategorier</th>
                <th>
                    @using (Html.BeginForm())
                    {
                        <div class="row">
                            <div class=" col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                <input id="searchString" name="searchString" class="form-control float-left" style="width: 75%" type="text" placeholder="Sök">
                                <input value="Sök" type="submit" class="btn btn-info float-left" style="width: 25%" />
                            </div>
                        </div>
                    }
                </th>
            </tr>
            <tbody>
                @foreach (var item in (IEnumerable<Categories>)ViewBag.Categorys)
                {
                    <tr>
                        <td>@item.CategoryName</td>
                        <td>@item.CategoryId</td>
                        <td>@item.SubCategories.Count()</td>
                        <td class="text-center">
                            @Html.ActionLink("Underkategorier", "Index", "SubCategory", new { id = item.CategoryId }, new { @class = "btn btn-info" })
                            <a class="btn btn-info" href="#@item.CategoryId" data-toggle="collapse">Detaljer</a>
                            @Html.ActionLink("Ta bort", "Delete", new { id = item.CategoryId }, new { @class = "btn btn-danger" })
                        </td>
                    </tr>
                    <tr class="collapse" id="@item.CategoryId">
                        <td colspan="4">
                            <div class="well">
                                @Html.Action("Details", new { id = item.CategoryId })
                            </div>
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
    @Html.PagedListPager((IPagedList)ViewBag.Categorys, page => Url.Action("Index", new { page }), PagedListRenderOptions.ClassicPlusFirstAndLast)

详细信息 HTML

@model Admin2.Models.Categories
@{
    ViewBag.Title = "Kategorier";
    Layout = null;
}
@using (Html.BeginForm("DetailsSave", "Category", FormMethod.Post))
{
    @Html.ValidationSummary(true)
    @Html.HiddenFor(model => model.CategoryId)

<div class="well">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div class="row">
            <div class="editor-label">
                @Html.LabelFor(model => model.CategoryName, "Kategorinamn ",
                        new { @class = "text-info-large", @style = "" })
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(model => model.CategoryName, new { @class = "form-control" })
            </div>
        </div>
        <div class="row">
            <div class="editor-label">
                @Html.LabelFor(model => model.CommonDescription, "Beskrivning ",
                        new { @class = "text-info-large", @style = "" })
            </div>
            <div class="editor-field">
                @Html.TextAreaFor(model => model.CommonDescription, new { @class = "form-control" })
            </div>
        </div>
    </div>
</div>
<div class="row padding20pxTop">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <input id="saveInfo" type="submit" value="Spara" class="btn btn-info textWhite float-right" />
    </div>
</div>
}

Answer 1

是的，我相信问题可能是因为页面上的所有“TextArea”控件都具有相同的 ID 和相同的名称。 例如，如果页面上有 10 个 TextArea 控件(取决于 ViewBag.Categories)，则所有 10 个 TextArea 将具有相同的 ID 和名称属性。 我记得类似的情况过去在 javascript 级别为我带来了一些问题，这不是 TineMCE，但仍然值得一试。

尝试为每个 TextArea 控件提供唯一的 ID 和/或名称属性，看看会发生什么!