Require add Upload Image plugin

fengerzh commented 8 years ago

According to this official document, http://sdk.ckeditor.com/samples/fileupload.html, ckeditor introduced a new plugin named "Upload Image", address is here: http://ckeditor.com/addon/uploadimage . Can you please include this plugin in? Thanks!

DarthLegiON commented 8 years ago

I'd like to see this plugin in your widget too!

tonydspaniard commented 8 years ago

Do you mind making a PR? Make sure the tests pass and i'll merge it and update version patch. Thanks.

nirvana-msu commented 8 years ago

It is actually pretty straight-forward. Just follow the instructions on the dev guide - download the plugin and all its dependencies. Register them as you would normally register external plugins. The response format has to be different from that of filebrowser plugin, but you can still use the same action/URL to submit the file to, just add e.g. responseType=json to the URL. In the controller action, respectively, you should format the response depending on whether you have responseType set to json or not, i.e. whether the image was uploaded through uploadimage or filebrowser plugin.

The only tricky bit is that you need to include CSRF token into the form that gets submitted. You can do that with the following js:

// We need the listener to be executed after filetools plugin opens XHR object as a POST request (priority 5),
// but before the default request is sent (priority 999), so e.g. priority 10 is fine.
CKEDITOR.on('instanceReady', function (ev) {
    ev.editor.on('fileUploadRequest', function (evt) {
        var fileLoader = evt.data.fileLoader,
            formData = new FormData();

        formData.append('upload', fileLoader.file, fileLoader.fileName);
        formData.append('ckCsrfToken', CKEDITOR.tools.getCsrfToken());  // Append CKEditor CSRF token
        formData.append(yii.getCsrfParam(), yii.getCsrfToken());        // Append Yii2 CSRF token
        fileLoader.xhr.send(formData);

        // Prevented default behavior.
        evt.stop();
    }, null, null, 10);
});

One more note is that CKEditor code that's packaged into the latest released version of this extension, 1.0.4, seems to have some bugs that prevent uploadimage from working properly. If you use master branch instead it works fine.

tonydspaniard commented 8 years ago

https://github.com/2amigos/yii2-ckeditor-widget/blob/master/README.md#how-to-add-custom-plugins

2amigos / yii2-ckeditor-widget

Require add Upload Image plugin #61