TinyMCE 编辑器只显示在第一个元素上

Question

这是我的选择器（我使用的是 tinyMCE 4.2.8）

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

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

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

我正在使用 MVC 将折叠呈现为布局设置为 null 的视图

有什么问题吗？

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

你能试试吗

tinymce.init({
mode : "textareas",
});

更新：

那是针对 TinyMCE 3 的。

你有没有给你的初始化函数添加更多的选项，还是像这样？如果是这样，您不应该在最后一个选项中添加逗号。

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

应该是

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

Answer 2

是的，我认为问题可能是因为您页面上的所有 "TextArea" 控件都具有相同的 ID 和相同的名称。因此，例如，如果您的页面上有 10 个 TextArea 控件（取决于 ViewBag.Categories），那么所有 10 个 TextArea 都将具有相同的 ID 和名称属性。我记得过去类似的情况在 javascript 级别对我造成了一些问题，它不是针对 TineMCE 但仍然值得一试。

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

TinyMCE 编辑器只显示在第一个元素上

TinyMCE editor only shows on first element

html

javascript

asp.net-mvc

jquery

tinymce-4