TinyMCE редактор показывает только первый элемент

Question

Это мой селектор (я использую TinyMCE 4.2.8)

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

я есть 1-10 текстовых областей на странице внутри рушится, что я хочу, чтобы преобразовать в TinyMCE редакторов

По какой-то причине только первый получает преобразование, а остальные - обычные нормальные текстовые поля.

Я использую MVC, чтобы сделать коллапс, как вид с макетом установлен в нуль

Что может быть не так?

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» контроль на вашей странице, имеющих тот же идентификатор и то же имя. Так, например, если на вашей странице есть 10 элементов управления TextArea (в зависимости от ViewBag.Categories), то все 10 TextArea будут иметь те же свойства ID и имени. Я помню, что подобная ситуация создавала некоторые проблемы на уровне javascript для меня в прошлом, это было не для TineMCE, а по-прежнему стоит попробовать.

Попробуйте указать уникальный идентификатор и/или свойства имени для каждого элемента управления TextArea и посмотреть, что произойдет!

Answer 2

Вы можете попробовать

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

Update:

Это было для TinyMCE 3.

Вы добавили больше возможностей для своей функции init или это так? Если это так, вы не должны добавлять запятую к последней опции.

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

должен быть

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