2013/11/21

SimpleUploads and the new image2 widget

CKEditor 4.3 has introduced a new image plugin that is a showcase of its widget system.

The problem is that any image that has been added through direct drag&drop or paste into the editor with the SimpleUploads plugin behaves like an image (big surprise), and it's not such a widget.

That means that after inserting it, you can't edit the image until you reload the content, and it's a little bit ugly that situation because you can't be sure if everything is working correctly or if your image will be gone or whatever.

So for the moment you can use this patch:

// Let's add this to every editor on the page. You can instead add it only to a specific editor.
CKEDITOR.on('instanceReady', function(e) {
    // the real listener
    e.editor.on( 'simpleuploads.finishedUpload' , function(ev) {
        var editor = ev.editor
        // workaround for image2 support
        if (editor.widgets && editor.plugins.image2) {
            var element = ev.data.element;
            if (element.getName()=="img")
                editor.widgets.initOn(element, "image2");
        }
    });
});

It's adjusted to work only with the "image2" plugin, if you want to use other plugin to handle images then you must replace the name of it in the call to initOn.

It simply uses the event fired after an element has been inserted to check first if your editor has the widgets and image2 plugins active, then verifies that the new element is an image, and in that case it manually inits the widget on that image.

 

2 comments:

s4m3 said...

I am trying to do the same thing on 'focus', but that does not work. I am using inline ckeditor instances. After loading the page, it works fine, but after blur event, the img tags are found but the initOn(element, "image2") has no effect anymore.

Any help would be appreciated.

ck.on('focus', function (ev) {
var editor = ev.editor;
if (editor.widgets && editor.plugins.image2) {
$wnd.$(editor.element.$).find('img').not('.cke_reset').each(function (i, el) {
console.log(editor.widgets);
editor.widgets.initOn(el, "image2");
});
}
//.....
});

(Event is definitely triggered. Editor.widgets is found, initOn is found, but desired effect does not happen.) Tested in chrome 43

Alfonso said...

I can't help you with that problem.

My post was meant to explain how to use the events of my plugin and get a workaround for those that wanted to use the "image2" widget, but if you want help on a general question about CKEditor you should seek support from its developers, not me.