In CKEditor, how do I programmatically select an existing element (an image) and bring up the Image dialog within an instance?

Question

I created an "Edit Image" button that gets appended to all my images and when they click the button I want the Image dialog to appear with their image selected.

So far I have been able to figure out how to select the instance, and bring up the image dialog box. However, I cannot figure out how to preselect the image in question. Right now it just appends another image to the instance instead of replacing it.

Please help?

cantchoos cantchoos · Accepted Answer · 2016-01-19T17:00:04

Since no one was able to provide me an answer I took several hours to dig deep into the CKEditor API and was able find the correct methods to accomplish my task above.

function SelectImage(field) {
    var element = new CKEDITOR.dom.element($("#"+field).find("img:first").get(0));
    var editor = CKEDITOR.instances[field];
    editor.getSelection().selectElement(element);
    CKEDITOR.instances[field].openDialog('image');
}

Probably more efficient ways of doing this but this was my solution for now. Hope it can help someone else in need.

In CKEditor, how do I programmatically select an existing element (an image) and bring up the Image dialog within an instance?

1 Answers