tinyMCE版本5.2.1中使用file_picker_callback回調函數自定義文件上傳（當然包含圖片上傳）

熟讀api

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

環境說明

jQuery+tinyMCE版本5.2.1，我引用的是tinymce.min.js而不是jQuery版本

準備工作

把這個圖標弄出來
在plugins加入link
在toolbar加入link

如果有

	    link_list: [
	        { title: '預置鏈接1', value: 'http://www.tinymce.com' },
	        { title: '預置鏈接2', value: 'http://tinymce.ax-z.cn' }
	    ],
	    image_list: [
	        { title: '預置圖片1', value: 'https://www.tiny.cloud/images/[email protected]' },
	        { title: '預置圖片2', value: 'https://www.baidu.com/img/bd_logo1.png' }
	    ],
	    image_class_list: [
	    { title: 'None', value: '' },
	    { title: 'Some class', value: 'class-name' }
	    ],

點開以後是這樣的

如果沒有上面那個配置的話，點開是這樣

file_picker_callback情況

如果不想過濾文件上傳的後綴，可以禁用input.setAttribute('accept', filetype);

	    //自定義文件選擇器的回調內容
	    file_picker_callback: function (callback, value, meta) {
	        //文件分類
	        var filetype='.pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4';
	        //後端接收上傳文件的地址
			var uploadTime = formatTime(new Date().getTime(),"Y-M-D");
	        var upurl="/keJiaoXingNong/UploadServlet"+"?uploadTime="+uploadTime;
	        //爲不同插件指定文件類型及後端地址
//	        switch(meta.filetype){
//	            case 'image':
//	                filetype='.jpg, .jpeg, .png, .gif';
//	                upurl='upimg.php';
//	                break;
//	            case 'media':
//	                filetype='.mp3, .mp4';
//	                upurl='upfile.php';
//	                break;
//	            case 'file':
//	            default:
//	        }
	        //模擬出一個input用於添加本地文件
	        var input = document.createElement('input');
	            input.setAttribute('type', 'file');
//	            input.setAttribute('accept', filetype);
	        input.click();
	        input.onchange = function() {
	            var file = this.files[0];
	            var xhr, formData;
	            console.log(file.name);
	            xhr = new XMLHttpRequest();
	            xhr.withCredentials = false;
	            xhr.open('POST', upurl);
	            xhr.onload = function() {
	                var json;
	                if (xhr.status != 200) {
	                    failure('HTTP Error: ' + xhr.status);
	                    return;
	                }
	                json = JSON.parse(xhr.responseText);
	                console.log(json);
	                var fileUrl = "/keJiaoXingNong/"+json.filepath[0]
	                callback(fileUrl, { title: file.name });
	                
	                
//					console.log(data);
//					backData = JSON.parse(data);
//                        success(data.location);
//					var imgUrl = "/keJiaoXingNong/"+backData.filepath[0];
//					console.log(imgUrl);
	            };
	            formData = new FormData();
	            formData.append('file', file, file.name );
	            xhr.send(formData);
	        };
	    },

這個寫法參考
http://tinymce.ax-z.cn/general/upload-images.php

我太懶了，沒有改爲jQuery的ajax

這裏需要注意callback(fileUrl, { title: file.name });上門的參考寫的是callback(fileUrl);你這麼寫的話，js會報錯，少個參數，其實很簡單

• fileUrl：圖片的地址
• title：圖片的名稱
  你可以打印一下上面的file看一下

全部配置

	//初始化富文本編輯器
	tinymce.init({
	    selector: '#mytextarea',
	    //skin:'oxide-dark',
	    language:'zh_CN',
	    plugins: 'print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help emoticons autosave autoresize',
	    toolbar: 'code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \
	    styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
	    table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen',
	    height: 650, //編輯器高度
	    min_height: 400,
	    /*content_css: [ //可設置編輯區內容展示的css，謹慎使用
	        '/static/reset.css',
	        '/static/ax.css',
	        '/static/css.css',
	    ],*/
	    fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
	    font_formats: '微軟雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;蘋果蘋方=PingFang SC,Microsoft YaHei,sans-serif;宋體=simsun,serif;仿宋體=FangSong,serif;黑體=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;',
	    link_list: [
	        { title: '預置鏈接1', value: 'http://www.tinymce.com' },
	        { title: '預置鏈接2', value: 'http://tinymce.ax-z.cn' }
	    ],
	    image_list: [
	        { title: '預置圖片1', value: 'https://www.tiny.cloud/images/[email protected]' },
	        { title: '預置圖片2', value: 'https://www.baidu.com/img/bd_logo1.png' }
	    ],
	    image_class_list: [
	    { title: 'None', value: '' },
	    { title: 'Some class', value: 'class-name' }
	    ],
	    importcss_append: true,
	    //自定義文件選擇器的回調內容
	    file_picker_callback: function (callback, value, meta) {
	        //文件分類
	        var filetype='.pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4';
	        //後端接收上傳文件的地址
			var uploadTime = formatTime(new Date().getTime(),"Y-M-D");
	        var upurl="/keJiaoXingNong/UploadServlet"+"?uploadTime="+uploadTime;
	        //爲不同插件指定文件類型及後端地址
//	        switch(meta.filetype){
//	            case 'image':
//	                filetype='.jpg, .jpeg, .png, .gif';
//	                upurl='upimg.php';
//	                break;
//	            case 'media':
//	                filetype='.mp3, .mp4';
//	                upurl='upfile.php';
//	                break;
//	            case 'file':
//	            default:
//	        }
	        //模擬出一個input用於添加本地文件
	        var input = document.createElement('input');
	            input.setAttribute('type', 'file');
//	            input.setAttribute('accept', filetype);
	        input.click();
	        input.onchange = function() {
	            var file = this.files[0];
	            var xhr, formData;
	            console.log(file.name);
	            xhr = new XMLHttpRequest();
	            xhr.withCredentials = false;
	            xhr.open('POST', upurl);
	            xhr.onload = function() {
	                var json;
	                if (xhr.status != 200) {
	                    failure('HTTP Error: ' + xhr.status);
	                    return;
	                }
	                json = JSON.parse(xhr.responseText);
	                console.log(json);
	                var fileUrl = "/keJiaoXingNong/"+json.filepath[0]
	                callback(fileUrl, { title: file.name });
	                
	                
//					console.log(data);
//					backData = JSON.parse(data);
//                        success(data.location);
//					var imgUrl = "/keJiaoXingNong/"+backData.filepath[0];
//					console.log(imgUrl);
	            };
	            formData = new FormData();
	            formData.append('file', file, file.name );
	            xhr.send(formData);
	        };
	    },
//	    images_upload_base_path: '/keJiaoXingNong',
	    relative_urls : false,
    	remove_script_host : false,
	    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("圖片上傳失敗");
                    }
                });
         },
	    init_instance_callback : function(editor) {
	    	// 編輯器初始化完成以後的 
			layer.closeAll('loading');
	    },
	    autosave_ask_before_unload: false,
	});

如果僅僅需要圖片上傳，請看我寫的另外一篇
https://blog.csdn.net/Gabriel_wei/article/details/105603314