Как получить несколько текстовых полей с TinyMCE на одной странице динамически на странице приложения MVC 4?

У меня есть, как мне кажется, простой сценарий, в котором мне нужно создать несколько текстовых областей с возможностью RTE. Я использую TinyMce, который прекрасно работает, если у меня есть только одно текстовое поле, а другие нет. Я создал простой пример приложения MVC 4, чтобы попытаться заставить все это работать, прежде чем переносить свои новые знания в реальное приложение. На этой странице есть и другие элементы, которые можно редактировать, поэтому похоже, что проблема может быть связана с помощником html. Или из того факта, что результирующий html показывает, что все три текстовых поля имеют одинаковый идентификатор. Однако, поскольку код явно не ссылается на идентификатор, я не думал, что это будет иметь значение. Кто-нибудь знает наверняка?

У меня простая модель:

TextModel text = new TextModel();
text.P1 = "This is an editable element.";

Я включил TinyMce в свой файл BundleConfig, а затем в свой _Layout. Тогда у меня есть строго типизированное представление.

@model TinyMCE_lite.Models.TextModel

И раздел сценария для расширения моих текстовых полей в фокусе:

<script>
$(window).load(function () {
$('textarea.expand').focus(function () {
        $(this).addClass("expanding")
        $(this).animate({
            height: "10em"
        }, 200);
    });
    $('textarea.expand').blur(function () {
        $(this).animate({
            height: "28px"
        }, 100);
        $(this).removeClass("expanding")
    });
});

Потом проворачиваю в петлю три:

@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
<fieldset>
    <h1 class="editable">Editable header</h1>

    @for (int count = 0; count < 3; count++ )
    {
        int index = count + 1;
        <h3>@index</h3>
        <p class="editable">@Html.DisplayFor(model => model.P1)</p>
        @Html.TextAreaFor(model => model.P2, 0,0, new { @class = "expand" })
    }

    <div style="margin-top: 25px;"><input type="submit" value="Save" /></div>
</fieldset>
}

Первый действует так, как ожидалось, показывая элементы редактора, но не остальные. Все три расширяются, как и ожидалось. Надеюсь, я упустил из виду кое-что простое. Любые идеи?


asp.net-mvc-4 tinymce-4
person leemid    schedule 21.02.2014    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Ух ты! Оказывается, это были одинаковые идентификаторы. Все, что мне нужно было сделать, это создать уникальные идентификаторы, и это прекрасно работает. Я изменил это:

@Html.TextAreaFor(model => model.P2, 0,0, new { @class = "expand" })

к этому:

@Html.TextAreaFor(model => model.P2, 0,0, new { @class = "expand", id = @count })

Надеюсь, это избавит кого-то от долгих часов мучительных попыток понять это.

person leemid    schedule 21.02.2014
comment
Почему у вас есть два TextAreas для одного и того же свойства? есть ли за этим особая причина? - person hjavaher; 22.02.2014