将 JavaScript 插入到 jQuery-UI 对话框内运行的 CKEditor 实例时出现问题

Question

事情是这样的：

我正在构建一个应用程序（使用 PHP、jQuery 等），其中一部分允许用户使用 CKEditor 编辑网页的各个部分（页眉、页脚、主要内容、侧边栏）。

它的设置使得每个可编辑位在右上角都有一个“编辑内容”按钮，单击该按钮会在 jQuery-UI 对话框内启动 CKEditor 的实例。用户完成编辑后，他们可以单击“更新更改”按钮，将编辑的内容传递回主页并关闭对话框/CKeditor。

除了一件事之外，一切都进展顺利。如果有人使用 CKEditor 的插入 HTML 插件或转到 CKEditor 中的“源”并将代码放入源中插入任何包含在“脚本”标签中的 JavaScript 代码，则一切看起来都正常，直到他们单击“更新更改”按钮。

JavaScript 似乎插入正确，但是当单击“更新更改”时，对话框不是关闭并将脚本传递回其所属的 div 中，而是一个全白屏幕，仅显示JavaScript。例如，一个简单的“Hello World”脚本会导致白色屏幕，左上角显示字符串“Hello World”；对于更复杂的脚本，比如对 Aweber 的 API 调用，生成新闻通讯注册表单，我会得到一个全白屏幕，Aweber API 调用生成的表单完美呈现在屏幕中间。

最令人困惑的部分之一是，在这些页面上，如果我单击“查看源代码”，我绝对什么也得不到。一片空白。

以下是我的所有代码，用于处理 jQuery-UI 对话框内 CKEditor 实例的启动，以及在单击“更新更改”按钮时将编辑后的数据传递回其关联的 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');
  });
});

我很困惑。如果有人能指出我正确的方向，我将不胜感激。

谢谢！

Answer 1

我在 drupal 中使用 ckeditor 时遇到类似的问题。正如你所说，我可以在 ckeditor 中输入 javascript，它似乎第一次工作。然而，当涉及到更新内容时，我的 JavaScript 似乎被破坏了。我注意到的一件事是它似乎调整了输出，特别是在任何句点之后插入一个空格。

我的解决方案是在内容中添加或更新任何 javascript 时不使用 ckeditor。