CKEditor 无法从 iframe 获取当前实例答案

【问题标题】：CKEditor cannot get current instance from iframeCKEditor 无法从 iframe 获取当前实例
【发布时间】：2013-05-23 14:29:43
【问题描述】：

CKEditor 4 或更高版本

我的表单 > textarea 启用并运行了 CKEditor。

我在模态对话框中有 iframe，而 iframe 里面是带有 insert_media() javascript 函数的按钮。

function insert_media( element ) {
    // get element html decode
    element = htmlspecialchars_decode( element, 'ENT_QUOTES' );
    // htmlspecialchars_decode is external function.

    // CKEditor insert element ---------------------------------------------
    // use .insertElement()
    var CKEDITOR = window.parent.CKEDITOR;
    var element = CKEDITOR.dom.element.createFromHtml(element);

    // body_value is name of textarea
    // this code only works with specific textarea NOT current active textarea
    //CKEDITOR.instances.body_value.insertElement(element);

    var current_instance_ckeditor = window.parent.test_current();
    // CKEditor insert element ---------------------------------------------

    // close modal dialog at parent window
    window.parent.close_dialog();

    // done
    return false;
}// insert_media

这是主页html中的javascript

function close_dialog() {
    $('#media-modal').modal('hide');
}// close_dialog


function test_current() {
    console.log( CKEDITOR.currentInstance.name );
}

问题是我无法让当前活动的 CKEditor 使用 insertElement 命令插入元素。

CKEDITOR.currentInstance 未定义或为空

window.parent.CKEDITOR.currentInstance 未定义或为空

如何从 iframe 获取当前活动的 CKEditor？

测试文件：http://www.megafileupload.com/en/file/420060/test-ckeditor-zip.html

【问题讨论】：

标签： javascript iframe ckeditor

【解决方案1】：

如果CKEDITOR.currentInstance 是null/undefined，则没有一个编辑器实例处于活动状态。这意味着您将焦点从编辑器移到了未被识别为它的部分的地方。

但是，如果您正在使用 CKEditor 的对话框（是吗？），编辑器实例在打开此对话框时应该始终处于活动状态。如果这是您的情况，那么您需要为我们提供一个可行的示例，因为很难猜出什么是错误的。

第二个选项是您不使用 CKEditor 的对话框，然后您必须注意将该 iframe 注册到 CKEditor 的 focusManager，尽管这很棘手，因此您不应该在 CKEditor 中使用第 3 方的对话框。

编辑当我单击“测试”按钮时，test_current 函数工作正常，但编辑器必须集中。但是从您单击按钮编辑器的那一刻起 200 毫秒后，您将无法从 currentInstance 获取它。为避免在单击按钮时使编辑器模糊，您需要在focusManagers 中注册它（如果两者都使用，则在两个编辑器中注册）。

【讨论】：

我使用引导对话框而不是 CKEditor 的对话框。这是我的文件。 megafileupload.com/en/file/420060/test-ckeditor-zip.html 问题出在 zip 文件中的 test2.html 中。
你试过使用focusManager吗？基本上，您需要致电editor.focusManager.add( yourFocusableElement )。但是，正如我所写 - 这很棘手，因为您使用 iframe。关于您的上传 - 请在 jsfiddle.net 上创建简化示例
我有 2 个编辑器，所以我不知道什么是“编辑器”。是？我在网上没有看到任何 focusManager 示例，所以我不知道如何使用。我无法在 jsfiddle 上创建示例，因为它使用 2 个 html 文件并且 jsfiddle 不支持其中包含 iframe 页面的模态对话框。
我更新了我的答案。但是如果你不熟悉焦点处理，你仍然应该考虑使用 CKEditor 的对话框和按钮，因为你很难让它正常工作。
亲爱的 Reinmar，我已经在下面的答案中弄清楚了如何使它工作。现在每个人都可以在没有 CKE 的对话框的情况下使用他们的对话框。谢谢你的帮助。

【解决方案2】：

我会这样做

    var ck_instance_name = false;
    for ( var ck_instance in CKEDITOR.instances ){
        if (CKEDITOR.instances[ck_instance].focusManager.hasFocus){
            ck_instance_name = ck_instance;
            return ck_instance_name;
        }
    }

【讨论】：

【解决方案3】：

正如 Reinmar 所说，CKEditor 为空/未定义。

现在，即使您在 CKEditor 外部单击，我也可以找到使用当前实例的方法。

这是用于测试的示例文件。 http://www.megafileupload.com/en/file/448409/test-ckeditor-zip.html

我所做的是……

在 javascript (html) 中为当前实例添加全局变量
点击打开模式对话框的按钮，获取当前实例并设置为选项 1 中的全局变量。
在模态对话框中单击 iframe 中的插入按钮时，获取 window.parent.current_instance 变量并用作文本编辑器 ID。 (var parent_cke_current_id = window.parent.current_instance_id;)
现在用点击的 CKEditor 实例做任何你想做的事。例如 (CKEDITOR.instances[parent_cke_current_id].insertElement(element);)

谢谢 Reinmar。

【讨论】：