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

时间:2015-12-16 13:10:21

标签: javascript jquery html asp.net-mvc tinymce-4

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

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

我在折叠中每页有1-10个textareas,我想转换为TinyMCE编辑器

出于某种原因,只有第一个被改变而其他的只是普通的textareas。

我正在使用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>
}

2 个答案:

答案 0 :(得分:1)

是的,我相信这个问题可能是因为所有&#34; TextArea&#34;您网页上的控件具有相同的ID和相同名称。 例如,如果您的页面上有10个TextArea控件(取决于ViewBag.Categories),那么所有10个TextArea将具有相同的ID和名称属性。 我记得类似的情况在过去为我创建了javascript级别的一些问题,对于TineMCE来说并不是值得尝试的。

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

答案 1 :(得分:0)

你能试试吗

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

更新

那是TinyMCE 3。

您是否在init函数中添加了更多选项,还是这样? 如果是这样,您不应该在最后一个选项中添加逗号。

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

应该是

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