tinyMCE版本5.2.1中使用ajax方式将图片的自定义上传

川长思鸟来 2023-05-21 11:48 14阅读 0赞

tinyMCE的版本为5.2.1

# 资料 #

熟读api http://tinymce.ax-z.cn/general/upload-images.php

http://tinymce.ax-z.cn/

# ajax方式 #

我自己用的

images_upload_handler: function(blobInfo, success, failure) { 
                var form = new FormData();
    			var uploadTime = formatTime(new Date().getTime(),"Y-M-D");
                form.append('files', blobInfo.blob(), blobInfo.filename());
                $.ajax({ 
                        url: "/keJiaoXingNong/UploadServlet"+"?uploadTime="+uploadTime,
                        type: "post",
                        data: form,
                        processData: false,
                        contentType: false,
                        success: function(data) { 
    						console.log(data);
    						backData = JSON.parse(data);
    // success(data.location);
    						var imgUrl = "/keJiaoXingNong/"+backData.filepath[0];
    						console.log(imgUrl);
                            success(imgUrl);
    
                        },
                        error: function(e) { 
                            alert("图片上传失败");
                        }
                    });
             },

`uploadTime`我只是给他加了个日期字段，方便后端分类，无关紧要

这里的最主要的是`success(imgUrl);`你要 按照他的格式来写，这里参数imgUrl是图片的地址

![在这里插入图片描述][20200418190311292.png]  
这里做一下说明。

function（blobInfo, success, failure)

blobInfo——插入的图片信息

success——成功的回调函数

failure——失败的回调函数

我们上面的配置对应的是这里  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dhYnJpZWxfd2Vp_size_16_color_FFFFFF_t_70]

# 一些其他的资料 #

我写的基于tinyMCE的文件上传https://blog.csdn.net/Gabriel\_wei/article/details/105603549

其实他的文件上传就是用图片上传改的，如果配置了文件上传，再传图片的时候，对应的是这个

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dhYnJpZWxfd2Vp_size_16_color_FFFFFF_t_70 1]

[20200418190311292.png]: /images/20230521/4670fc5e262449ada3546866757754d9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dhYnJpZWxfd2Vp_size_16_color_FFFFFF_t_70]: /images/20230521/755799aab8164f0eb6a6f8450731409e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0dhYnJpZWxfd2Vp_size_16_color_FFFFFF_t_70 1]: /images/20230521/be52b77d39c8498da94c9479c74cebd9.png