将 JavaScript 插入在 jQuery-UI 对话框中运行的 CKEditor 实例时出现问题答案

【问题标题】：Problem inserting JavaScript into a CKEditor Instance running inside a jQuery-UI Dialog Box将 JavaScript 插入在 jQuery-UI 对话框中运行的 CKEditor 实例时出现问题
【发布时间】：2010-05-13 20:29:11
【问题描述】：

这是怎么回事：

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

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

除了一件事之外，这一切都非常出色。如果有人插入任何 JavaScript 代码，包裹在“脚本”标签中，使用 CKEditor 的插入 HTML 插件或转到 CKEditor 中的“源代码”并将代码放在源代码中，在他们单击“更新更改”之前一切似乎都正常按钮。

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');
  });
});

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

谢谢！

【问题讨论】：

标签： php javascript jquery ckeditor jquery-ui-dialog

【解决方案1】：

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

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

【讨论】：