激情综合色五月六月婷婷,久久久久久综合网天天,国产精品久久久久精品综合紧无码

  • 2022-10-27
宇哥博客 前端開發 TinyMCE富文本編輯器粘貼圖片自動上傳

TinyMCE富文本編輯器粘貼圖片自動上傳

TinyMCE 編輯器支持粘貼圖片,但是自動會將圖片轉換成 base64 編碼,這樣將內容提交到后臺,數據會很大。

圖 | TinyMCE

本文內容配置TinyMCE(版本:5.10.0)向編輯器中粘貼圖片自動上傳到后臺,以下為配置代碼:

tinymce.init({
    selector: '#textarea',
    plugins: 'preview autolink directionality visualchars fullscreen image link template code table pagebreak nonbreaking anchor insertdatetime advlist lists wordcount autoresize imagetools paste',
    paste_data_images: true,
    //粘貼圖片后,自動上傳
	urlconverter_callback: function(url, node, on_save, name) {
		console.log('圖片鏈接', url );
		return url;
	},
	images_upload_handler: function (blobInfo, succFun, failFun) {
		var xhr, formData;
		var file = blobInfo.blob();//轉化為易于理解的file對象
		xhr = new XMLHttpRequest();
		xhr.withCredentials = false;
		xhr.open('POST', 'upload.php');
		xhr.onload = function() {
			var json;
			if (xhr.status != 200) {
				failFun('HTTP Error: ' + xhr.status);
				return;
			}
			json = JSON.parse(xhr.responseText);
			if (!json || typeof json.location != 'string') {
				//failFun('Invalid JSON: ' + xhr.responseText);
				failFun( '上傳失敗' );
				return;
			}
			succFun(json.location);
		};
		formData = new FormData();
		formData.append('file', file, file.name );//此處與源文檔不一樣
		xhr.send(formData);
	}
});

配置項

plugins中添加paste;
paste_data_images設置為true;
添加:

urlconverter_callback: function(url, node, on_save, name) {
		console.log('圖片鏈接', url );
		return url;
	}

以下是配置后粘貼圖片效果,和上傳效果一樣。

圖 | TinyMCE

更多

TinyMCE富文本編輯器配置參考 http://www.callingbugs.com/1892.html

本文來自網絡,不代表本站立場,轉載請注明出處。http://www.callingbugs.com/3497.html

發表評論

您的電子郵箱地址不會被公開。

返回頂部
激情综合色五月六月婷婷,久久久久久综合网天天,国产精品久久久久精品综合紧无码