CODEWITHSUNDEEP
javascriptiframeckeditor
vee
vee

Reputation: 4755

CKEditor cannot get current instance from iframe

CKEditor 4 or above

I have form > textarea with CKEditor enabled and functioning.

I have iframe in modal dialog and inside iframe is button with insert_media() javascript function.

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

and this is javascript in main page html

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


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

The problem is i cannot get current active CKEditor to insert element with insertElement command.

CKEDITOR.currentInstance is undefined or null

window.parent.CKEDITOR.currentInstance is undefined or null

How to get current active CKEditor from iframe?

file for test: http://www.megafileupload.com/en/file/420060/test-ckeditor-zip.html

Upvotes: 1

Views: 4125

Answers (3)

vee
vee

Reputation: 4755

CKEditor is null/undefined as Reinmar said.

Now i can find the way to work with current instance even if you clicked outside CKEditor.

Here is sample files for test. http://www.megafileupload.com/en/file/448409/test-ckeditor-zip.html

What i do is ...

  1. Add global variable for current instance in javascript (in html)
  2. On click button for open modal dialog, get current instance and set to global variable in choice 1.
  3. On click insert button in iframe in modal dialog, get window.parent.current_instance variable and use as texteditor id. (var parent_cke_current_id = window.parent.current_instance_id;)
  4. Now do what ever you want with clicked CKEditor instance. for example (CKEDITOR.instances[parent_cke_current_id].insertElement(element);)

Thank you Reinmar.

Upvotes: 0

Jimmy Kane
Jimmy Kane

Reputation: 16825

I'd do it like this

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

Upvotes: 0

Reinmar
Reinmar

Reputation: 22023

If CKEDITOR.currentInstance is null/undefined, then none editor instance is active. It means that you moved focus out of editor to the place which is not recognised as its part.

However, if you're using CKEditor's dialogs (do you?) editor instance should always be active, when this dialog is opened for it. If this is your case, then you need to provide us a working example, because it's hard to guess what can be wrong.

Second option is that you don't use CKEditor's dialogs and then you have to take care of registering that iframe to the CKEditor's focusManager, although this is tricky so you rather should not use 3rd party's dialogs with CKEditor.

Edit The test_current function works fine when I click "test" button, but editor has to be focused. But after 200ms from the moment you click button editor will be blurred and you won't be able to get it from currentInstance. To avoid blurring editor when clicking button you need to register it in focusManagers (of both editors if it will be used with both).

Upvotes: 2

Related Questions