javascript – TinyMCE 4.2 – 获取新的(核心)图像工具以保存(API)编辑的图像作为文件?

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

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

在最新发布的TinyMCE 4.2中,有一个新的内联图像编辑器(Ref:Image Tools)运行良好.但它将图像保存在HTML中作为base64数据:

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

而不是将图像文件上传到特定文件夹,然后使用常规图像参考/路径.

我必须将它保存为常规文件,否则我在CMS中的另一个页面上出现问题. (无论如何它会好得多).

我试图理解目前存在的小文档,但没有成功. (可能是因为我对javascript不够了解,而且对于了解javascript的人来说这是合乎逻辑的.)

这就是我所做的:

在TinyMCE init中:

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


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

        images_upload_url: "/tinymce/postAcceptor.php",

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

我的postAcceptor.php是这个的副本(除了正确的路径,IP等):
http://www.tinymce.com/wiki.php/PHP_Upload_Handler

图像工具运行良好.它只是不保存我想要的图像.

以下是图像工具内联的视图:

解决方法:

我的代码,它的工作原理!如果您修改图像并单击确认按钮,则图像工具会自动将新图像上载到服务器.

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

希望它能帮到你!

上一篇:javascript – 我可以阻止TinyMCE setContent窃取焦点吗?


下一篇:javascript – TinyMCE自定义“文件”菜单栏