Проблема при вставке JavaScript в экземпляр CKEditor, работающий в диалоговом окне jQuery-UI - PullRequest
0 голосов
/ 14 мая 2010

Вот что происходит:

Я создаю приложение (с использованием PHP, jQuery и т. Д.), Часть которого позволяет пользователям редактировать различные фрагменты веб-страницы (верхний колонтитул, нижний колонтитул, основное содержимое, боковую панель) с помощью CKEditor.

Он настроен так, что каждый редактируемый бит имеет кнопку «Редактировать содержимое» в правом верхнем углу, которая при щелчке запускает экземпляр CKEditor в диалоговом окне jQuery-UI. После того, как пользователь завершит редактирование, он может нажать кнопку «Обновить изменения», которая возвращает отредактированный контент обратно на главную страницу и закрывает Dialog / CKeditor.

Все это работает великолепно, за исключением одного. Если кто-то вставляет какой-либо код JavaScript, завернутый в теги «script», используя либо «Вставить HTML-плагин» для CKEditor, либо перейдя в «Source» в CKEditor и поместив код в исходный код, все будет в порядке, пока они не нажмут «Обновить изменения». кнопка.

Кажется, что JavaScript вставляется правильно, но когда нажата кнопка «Обновить изменения», вместо закрытия диалогового окна и передачи сценария обратно в div, где он принадлежит, вместо этого я получаю полностью белый экран с только вывод JavaScript. Например, простой скрипт «Hello World» приводит к появлению белого экрана со строкой «Hello World» в верхнем левом углу; для более сложных сценариев, таких как вызов API, скажем, Aweber, который генерирует форму подписки на новостную рассылку, я получаю полностью белый экран с результирующей формой из вызова Aweber API, идеально отображаемой в середине экрана.

Одна из самых запутанных частей заключается в том, что на этих страницах, если я нажимаю «Просмотреть источник», я абсолютно ничего не получаю. Пустая пустота.

Вот весь мой код, который обрабатывает запуск экземпляра CKEditor в диалоге jQuery-UI и передачу отредактированных данных обратно в связанный с ними div при нажатии кнопки «Обновить изменения»:

$(function()
{
  $('.foobar_edit_button')
  .button()
  .click(function()
  {
    var beingEdited = $(this).nextAll('.foobar_editable').attr('id');
    var content = $(this).nextAll('.foobar_editable').html();
    $('#foobar_editor').html(content);
    $('#foobar_editor').dialog(
    {
      open:function()
      {
        $(this).ckeditor(function()
        {
          CKFinder.SetupCKEditor( this, '<?php echo '/foobar/lib/editor/ckfinder/'; ?>' );
        });
      },
      close:function()
      {
        $(this).ckeditorGet().destroy();
      },
      autoOpen: false,
      width: 840,
      modal: true,
      buttons: 
      {
        'Update Changes': function() 
        {
          // TODO: submit changes to server via ajax once its completed:
          for ( instance in CKEDITOR.instances )
            CKEDITOR.instances[instance].updateElement();

          var edited_content = $('#foobar_editor').html();
          $('#' + beingEdited).html(edited_content);
          $(this).dialog('close');
        }
      }
    });
    $('#foobar_editor').dialog('open');
  });
});

Я все в замешательстве. Если кто-нибудь и укажет мне правильное направление, это будет оценено.

Спасибо!

1 Ответ

1 голос
/ 23 февраля 2011

У меня похожая проблема при использовании ckeditor с drupal. Как вы говорите, я могу ввести javascript в ckeditor, и он, кажется, работает с первого раза. Однако, когда дело доходит до обновления контента, мой JavaScript кажется сломанным. Одна вещь, которую я заметил, это то, что она, кажется, регулирует вывод и, в частности, вставляет пробел после любых периодов.

Мое решение состояло в том, чтобы не использовать ckeditor при добавлении или обновлении любого javascript-содержимого.

...