1

For example, if I have a ready instance of CKEDITOR, and on that same page I have a list of pictures, with this markup:

<div class="galleryPictures">
    <a href="#image-id-1" data-id="1" data-img-src="/pictures/image-1.jpg" class="galleryPicture">
        <img src="/pictures/image-1.jpg" />
    </a>
    <a href="#image-id-2" data-id="2" data-img-src="/pictures/image-2.jpg" class="galleryPicture">
        <img src="/pictures/image-2.jpg" />
    </a>
    <a href="#image-id-3" data-id="3" data-img-src="/pictures/image-3.jpg" class="galleryPicture">
        <img src="/pictures/image-3.jpg" />
    </a>
</div>

And I have following jQuery click handler delegated to these a.galleryPicture items:

$(document).ready(function() {
    $('.galleryPictures').on('click', 'a.galleryPicture', function() {
        // when this accours I would like to open CKEditor's
        // Insert-Image Component, and to get the "url" field filled with
        // $(this).data('img-src'); value
    });
});

Is it possible to trigger / open Insert-Image programmatically?

1 Answers1

1

Found it. Might be of help to someone else:

With a simple inspection with Firebug I've seen that the <a> which on click triggers the opening of the Insert-Image component contains this function call in it's onclick attribute:

CKEDITOR.tools.callFunction(51,{});
// second argument is {} (an empty js-object), it the original the <a> onclick it was like this:
// CKEDITOR.tools.callFunction(51, this); meaning it was sending the instance of that element

After this call it is possible to do something like this:

CKEDITOR.tools.callFunction(51,{});

// a failsafe if jQuery doesn't find the specified element after the function is executed
setTimeout(function() {
    $('#cke_69_textInput').val('someImageUrl');
}, 50);