TinyMCE 4.2 - 获取新的（核心）图像工具以将编辑后的图像保存为文件？

问题描述

如果这是重复，我很抱歉。我还没有发现任何与此相关的问题：

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

新的TinyMCE 4.2图像工具将图像保存为base64数据而不是目录中的图像文件。

在新发布的TinyMCE 4.2中，有一个新的内联图像编辑器（参考：图像工具），效果很好。 但它会将图像保存为HTML64中的图像：

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.

我必须将它保存为常规文件，否则我在CMS中的另一个页面上出现问题。 （+反正它好多了。）

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).

我试图理解目前存在的小文档，但没有成功。 （可能是因为我对javascript的理解还不够好，而且对于熟悉javascript的人来说这是合乎逻辑的。）

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.)

这就是我所拥有的完成：

在TinyMCE init中：

In TinyMCE init:

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


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

        images_upload_url: "/tinymce/postAcceptor.php",

参考：

我的postAcceptor.php是这个的副本（除了正确的路径，IP等）：

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:

推荐答案

我的代码，它的确有效！如果您修改图像并单击确认按钮，则图像工具将自动将新图像上载到服务器。

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);
        }

希望对您有帮助！

这篇关于TinyMCE 4.2 - 获取新的（核心）图像工具以将编辑后的图像保存为文件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！