TinyMCE 4.2 - Get the new (core) Image Tools to save (API) edited images as files?

Question

I am sorry if this is a duplicate. I haven't found any question related to this yet:

The new TinyMCE 4.2 Image Tools saves images as base64 data in stead of image files in a directory.

In the newly released TinyMCE 4.2 there is a NEW inline image editor (Ref: Image Tools) that works well. But it saves the image inside the HTML as a base64 data:

<img src="data:image/jpeg;base64 (...)">

in stead of uploading the image file to a specific folder and then use a regular image referance / path.

I must get it to save the images as regular files, or else I get a problem on another page in the CMS. (+ it is much more better anyways).

I have tried to understand the little documentation that exist at the moment, but have not succeeded. (It might be that I just don't understand javascript good enough, and that it's logical for you who knows javascript well.)

This is what I have done:

In TinyMCE init:

        plugins: [" (...) imagetools"],


        images_upload_handler: function(blobInfo, success, failure) {
                console.log(blobInfo.blob());
                success('url');
        },

        images_upload_url: "/tinymce/postAcceptor.php",

Reference: http://www.tinymce.com/wiki.php/Configuration:images_upload_handler http://www.tinymce.com/wiki.php/Configuration:images_upload_url

My postAcceptor.php is a copy of this (except with correct paths, IPs etc): http://www.tinymce.com/wiki.php/PHP_Upload_Handler

The Image Tools works well. It just doesn't save the images where I'd like it to.

Here is a view of the Image Tools inline:

Answer 1

My code, it's works! If you modify the image and click confirm button then Image Tools will upload the new image to server automatic.

images_upload_handler: function(blobInfo, success, failure) {
            var xhr, formData;

            xhr = new XMLHttpRequest();
            xhr.withCredentials = false;
            xhr.open('POST', 
'<%=request.getContextPath()%>/fylerMedia?flyerID=<%=flyerID %>'); <<<<note that you must set your server-side upload hander.


            xhr.onload = function() {
              var json;

              if (xhr.status != 200) {
                failure('HTTP Error: ' + xhr.status);
                return;
              }

              json = JSON.parse(xhr.responseText);

              success(json[0].url); <<<<<return value, you can change the url of image.
            };

            formData = new FormData();
            formData.append('file', blobInfo.blob(), blobInfo.filename());

            xhr.send(formData);
        }

Hope it helps you!

Answer 2

You have to initiate the upload by invoking the

uploadImages()

method. see http://www.tinymce.com/wiki.php/api4:method.tinymce.Editor.uploadImages