Skip to main content
 首页 » 编程设计

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

2024年12月31日16langtianya

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

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

在新发布的 TinyMCE 4.2 中,有一个运行良好的新内联图像编辑器(引用:图像工具)。 但它会将 HTML 中的图像保存为 base64 数据:

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

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

我必须得到它才能将图像保存为常规文件,否则我在 CMS 的另一个页面上会遇到问题。 (+ 无论如何要好得多)。

我试图理解目前存在的少量文档,但没有成功。 (这可能是我对 javascript 的理解不够好,对于你对 javascript 很了解的人来说这是合乎逻辑的。)

这就是我所做的:

在 TinyMCE 初始化中:

        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

图像工具效果很好。它只是没有将图像保存在我想要的位置。

这是内联图像工具的 View :

请您参考如下方法:

我的代码,有效!如果您修改图片并单击确认按钮,Image Tools 会自动将新图片上传到服务器。

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

希望对你有帮助!