ckeditor 和 jquery UI 对话框不工作

Question

我不断地尝试，现在你解决了我一直遇到的这个完全令人沮丧的情况。我试图让 ckEditor 在 jQuery UI 对话框中工作。编辑器完美包含在内，它用 ckeditor 皮肤替换了文本区域，但我无法在内容块中编辑/添加内容。我现在看到的唯一可行的解​​决方案是，如果我单击编辑器中的“源代码”并取消单击它，我就可以向其中添加内容。

我的实现纯粹只是 并且我没有添加任何其他信息/代码。有什么想法吗？

Answer 1

遇到了同样的问题，

从模态中删除效果有帮助：
已删除：

show: "scale",
hide: "puff",

现在我的通话如下所示：

$("#report").dialog({
        title: "<?php echo caption("REPORT_EDITOR"); ?>",
        bgiframe: true,
          autoOpen: false,
          width: 990,
          height: 620,
          modal: true,

          draggable: true,
          resizable: true,
          resizeStop: function(event, ui) {
              var y = $(event.target).height();
              repEditor.resize( "99%", y - 10 );
          },

          buttons: {
            'Close': function() {
              $(this).dialog('close');
            }
          } 
        });

Answer 2

对于 jQuery-UI (1.10+) 和 jQuery (1.10+) 版本以及 CKEditor 3.6，这个解决方案似乎有效：

_moveToTop: function( event, silent ) {
    var $parent = this.uiDialog.parent();
    var $elementsOnSameLevel = $parent.children();

    var heighestZIndex = 0;
    $.each($elementsOnSameLevel, function(index, element) {
        var zIndexOfElement = $(element).css('z-index');
        if (zIndexOfElement) {
            var zIndexOfElementAsNumber = parseInt(zIndexOfElement) || 0;
            if (zIndexOfElementAsNumber > heighestZIndex) {
                heighestZIndex = zIndexOfElementAsNumber;
            }
        }
    });
    var currentZIndex = this.uiDialog.css('z-index');

    var moved;
    if (currentZIndex >= heighestZIndex) {
        moved = false;
    } else {
        this.uiDialog.css('z-index', heighestZIndex + 1);
        moved = true;
    }

    if ( moved && !silent ) {
        this._trigger( "focus", event );
    }

    return moved;
}

您可以在线编辑文件（不推荐），或者只是覆盖默认值jQuery-UI 功能位于单独的 JS 文件中，该文件在 jQuery-UI 之后、创建对话框之前加载。

$.widget("ui.dialog", $.ui.dialog, {
    _moveToTop: function( event, silent ) {
        //Logic from above
    }
});

Answer 3

作为保留“表演”和“表演”的替代方案。 “隐藏”动画，在“显示”事件完成后创建编辑器实例，并使用完整的回调函数：“显示”选项

$("#report").dialog({
    title: "<?php echo caption("REPORT_EDITOR"); ?>",
    bgiframe: true,
      autoOpen: false,
      width: 990,
      height: 620,
      modal: true,

      // start my suggestion
      show: {
          effect: "scale",
          complete: function() {
            $( "#selector" ).ckeditor();
          }
      },

      hide: "puff",
      // end my suggestion

      draggable: true,
      resizable: true,
      resizeStop: function(event, ui) {
          var y = $(event.target).height();
          repEditor.resize( "99%", y - 10 );
      },

      buttons: {
        'Close': function() {
          $(this).dialog('close');
        }
      } 
    });