ckeditor исчезает, когда <textarea>обновляется ответом ajax

Question

Я использую ckeditor с адаптером jQuery в сценарии ajax.Ckeditor привязан к элементу textarea с помощью jQuery.

Приложение:

Я разрабатываю приложение электронного обучения для клиента.Каждый курс имеет много шагов, взятых из таблицы базы данных.

Пользовательский интерфейс приложения - это просто форма с кнопками «Предыдущий» и «Следующий» для навигации по курсу.

Проблема связана с возможностью администратора, где преподаватели могут создавать и обновлять шаги в каждом из них.Конечно.

Опять же, средство администрирования - это просто форма с кнопками предыдущего и следующего.Тем не менее, есть поле с именем StepText, которое я хочу иметь HTML, а не простой текст.Отсюда требование для Rich Text Editor.

Прокрутка от шага к шагу сокращена с помощью вызовов Ajax, которые отправляются на контроллер, получают данные для следующего (или предыдущего) шага и вставляют их встраница.Ajax вызывает return html, созданный из частичного представления.

Проблема:

Текстовая область находится в этом частичном представлении.CKEditor правильно связывается при первой загрузке страницы, но не для любых последующих ответов ajax.

В результате ckEditor отображается не во всей своей полноте, и я просто получаю непривлекательную наготу текстовой области.

Есть идеи, почему это происходит?

SETUP (показано для ссылки) (отредактировано):

Используются следующие сценарии:

<script type="text/javascript" src="@Url.Content("~/ckeditor/ckeditor.js")"></script>
 <script type="text/javascript" src="@Url.Content("~/ckeditor/adapters/jquery.js")"></script>

Это позволяет мне использовать ckEditor с jQuery следующим образом:

$(document).ready(function () {
        $('#StepText').ckeditor(function () { }, { toolbar: 'Basic' });
    });

Текстовая область находится в частичном файле .cshtml внутри div, который действует как цель для вызова ajax:

Отредактировано !!чтобы показать, как выполняется вызов ajax !!

<div id="ajaxEditor">
  @using (Ajax.BeginForm(MVC.Admin.StepEditor.Edit(), new AjaxOptions { UpdateTargetId = "ajaxEditor", HttpMethod = "POST" },
    new { @name = "EditStepForm", @id = "EditStepForm" }))
{
    <div class="editor-label">
                @Html.LabelFor(model => model.StepText)
            </div>
            <div class="editor-field">
                @Html.TextAreaFor(model => model.StepText, 20, 68, null)
                @Html.ValidationMessageFor(model => model.StepText)
            </div>
   }
</div>

Ответ Крису Марисику:

Я попытался повторно связать ckeditor в OnSuccess вызова ajax, но при отладкеjQuery в Chrome, я получаю следующую ошибку:

Uncaught [CKEDITOR.editor]  The instance "myTextArea" already exists.

Как и следовало ожидать: имя элемента управления остается прежним и полное обновление страницы не было.

Answer 1

Звонок Крису Марисику:

Если Крис Марисик захочет обновить свой комментарий до ответа, я дам ему печенье.

Я решил следующим образом:

Форма Ajax:

<div id="ajaxEditor">
@using (Ajax.BeginForm(MVC.Admin.StepEditor.Edit(), new AjaxOptions { UpdateTargetId = "ajaxEditor", HttpMethod = "POST", OnComplete="ReBindCKEditor" },
        new { @name = "EditStepForm", @id = "EditStepForm" }))
    {
    <div class="editor-label">
                @Html.LabelFor(model => model.StepText)
            </div>
            <div class="editor-field">
                @Html.TextAreaFor(model => model.StepText, 20, 68, null)
                @Html.ValidationMessageFor(model => model.StepText)
            </div>
   }
</div>

Javascript:

Поскольку возвращающаяся ошибка (см. Ответ на вопрос Криса Марисика) утверждает, что экземпляр CKEDITOR уже существует, мне нужно от него избавиться. Итак:

function BindCKEditor() {
    var elem = $('#StepText');
    elem.ckeditor(function () {}, { toolbar: [
        ['Source'],
        ['Preview'],
        ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Scayt'],
        ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],
        ['Image', 'Table', 'HorizontalRule'],
        ['Styles', 'Format'],
        ['Bold', 'Italic', 'Strike'],
        ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote'],
        ['Link', 'Unlink', 'Anchor']
        ]
    });
}

BindCKEditor () просто делает то, что говорит на жестяной банке. Он настраивает редактор и применяет его.

Теперь, когда я перезаписываю текстовую область ответом ajax, мне нужно удалить этот экземпляр и создать его заново. Итак:

function ReBindCKEditor() {
    delete CKEDITOR.instances['StepText'];
    BindCKEditor();
}

Обратите внимание, что я использую ReBindCKEditor () в OnComplete для формы Ajax. Я использую oncomplete, а не onsuccess, потому что я хочу, чтобы он выполнял повторную привязку независимо от того, успешен ли этот вызов ajax или нет.

УСПЕХ:

Я не могу рекомендовать ckeditor достаточно высоко. Я думал, что это будет кошмар, чтобы решить, но как только я сел и отложил эти мысли в сторону, я обнаружил, что была очень краткая документация и хорошие форумы пользователей.

Я просмотрел множество других текстовых редакторов, и ни один из них не был настолько хорош или так хорошо поддержан Yahoo выглядела хорошо, но была кошмаром и плохой документацией, если вы не являетесь экспертом по javascript, которым я не являюсь.

Я чуть не пошел с lwrte, это выглядело хорошо, но никакой поддержки за этим не было.

Я посмотрел на других, которые останутся безымянными.

Но ckEditor действительно впечатлил меня. Теперь я могу выкатить его туда, куда захочу, без страха и трепета.

Примечание:

Я не работаю на CKEditor и не имею к ним никакого отношения. Это настоящий энтузиазм. Да, такая вещь существует.

Answer 2

У меня тоже была эта проблема, но senario был немного другим, я использовал ckeditor в Ajax.BeginForm, но моя форма (частичное представление) появляется в диалоговом окне jquery ui, первый ответ дал мне отличную идею: исправить это. Я сделал повторную привязку для ckeditor, когда появится диалог!

1. Я отредактировал этот код и добавил обязательный атрибут / проверку (поле имеет обязательный атрибут в моей модели), он отлично работает! посмотрите на это магические коды: $('input[type=submit]').bind('click', function () { $('.ckeditor').ckeditorGet().updateElement(); });
2. Также я добавил несколько кодов конфигурации для ckeditor! начинается с CKEDITOR.editorConfig =
3. У меня на родительской странице появляются разные диалоги, и единственное, что мне нужно сделать, это добавить new { @class = "ckeditor" }) в TextAreaFor (частичное представление) и добавление этой строки на родительской странице delete CKEDITOR.instances['FieldName'];
4. Команда Браво Кекдитор

на родительской странице я вызываю диалог:

function openDialog() {
    $('#dialog').dialog('open');

    delete CKEDITOR.instances['Ingredient'];

    CKEDITOR.editorConfig = function (config) {
        config.uiColor = "#EFEFEF";
        config.toolbar =
        [{ name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat']}];
        config.width = 400;
        config.height = 100;
        config.autoParagraph = false;
        config.removePlugins = 'elementspath';
        config.resize_enabled = false;
        config.enterMode = CKEDITOR.ENTER_BR;
        config.startupFocus = true;
    };

    $('.ckeditor').ckeditor();
    $('input[type=submit]').bind('click', function () {
        $('.ckeditor').ckeditorGet().updateElement();
    });
}

в моем частичном представлении с Ajax.BeginForm:

<div class="editor-field">
        @Html.TextAreaFor(model => model.Ingredient, new { @class = "ckeditor" })
        @Html.ValidationMessageFor(model => model.Ingredient)
</div>

как вы видите, я НЕ использовал OnCompelete или OnBegin. надеюсь, это кому-нибудь поможет!

Answer 3

это лучше всего работает для меня с помощью адаптера jquery ckeditor.Я просто называю это, когда загружаю ajax текстовой областью ckeditor.

function initCKEditor() {
$('.wysiwyg').ckeditor(function(e){
        delete CKEDITOR.instances[$(e).attr('name')];
    },{
        toolbar:
            [
                ['Bold','Italic','Underline','Strike','-','NumberedList','BulletedList','-','Paste','PasteFromWord','-','Outdent','Indent','-','Link','-','Maximize','-','Source']
            ],
        skin: 'office2003'
    }
);  

}