TinyMCE editor only shows on first element

Question

This is my selector (I'm using tinyMCE 4.2.8)

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

i have 1-10 textareas per page inside collapses that i want to convert to TinyMCE editors

For some reason only the first one get's transformed and the others are just normal textareas.

I'm using MVC to render the collapse as views with layout set to null

What can be wrong?

HTML code

<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)

Details 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

Yes, I believe the issue is possibly because all "TextArea" control on your page are having same id and same name. So for example, if you have 10 TextArea control on your page (depending upon ViewBag.Categories), then all 10 TextArea will have same ID and name properties. I remember similar situation created some issues at javascript level for me in the past, it wasn't for TineMCE but still its worth giving a try.

Try to give unique ID and/ or Name properties to each of your TextArea control and see what happens!

Answer 2

Can you try

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

Update:

That was for TinyMCE 3.

Did you add any more option to your init function or is it like this ? If so you shouldn't add comma to the last option.

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

should be

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